앱개발/Ionic 3 / 아이오닉 3

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

ODB 2017. 9. 11. 10:22

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


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


이번시간도 여기까지


"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."