Blank부터 시작하는 아이오닉 / Text alignment, transformation, padding, margin

Blank부터 시작하는 아이오닉 / Text alignment, transformation

main.html에

<ion-content padding>

<div style="text-align:left">

<p >Text alignment</p>

</div>

라고 기존 스타일로 해보자

style="text-align:left" 가 기존스타일

아이오닉에서는

<ion-content padding>

<div text-left>

<p >Text alignment</p>

</div>

요렇게 text-left 로 간단하게 한다

오른쪽은? 당연히 text-right 겠지?

중간은? center 되시겠다

<ion-content padding>

<div>

<p text-left>Text alignment</p>

<p text-right>Text alignment</p>

<p text-center>Text alignment</p>

<p text-justify>Text alignment Text alignmentText alignmentText alignmentText alignmentText alignmentText alignmentText alignmentText alignmentText alignmentText alignmentText alignment</p>

<p text-wrap>Text alignment Text alignmentText alignmentText alignmentText alignmentText alignmentText alignmentText alignmentText alignmentText alignmentText alignment</p>

<p text-nowrap>Text alignmentText alignmentText alignmentText alignmentText alignmentText alignmentText alignmentText alignmentText alignmentText alignmentText alignmentText alignmentText alignment</p>

</div>

자! 그럼 다음 transformation

<p text-uppercase>Text alignment</p>

<p text-lowercase>Text alignment</p>

<p text-capitalize>Text alignment</p>

결과는 직접해보고 알아보도록 하자

padding

padding-top

padding-left

padding-right

padding-bottom

padding-horizontal

padding-vertical

no-padding

margin

margin-top

margin-left

margin-right

margin-bottom

margin-horizontal

margin-vertical

no-margin

패딩과 마진역시 숙제로 남기도록.... 쿨럭...

이번시간도 여기까지