앱개발/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
패딩과 마진역시 숙제로 남기도록.... 쿨럭...
이번시간도 여기까지