[HTML/CSS] 텍스트 정렬 (text-align)

텍스트 정렬(text-align)

• left : 왼쪽 정렬
• right: 오른쪽 정렬
• center : 가운데 정렬
• justify : 양쪽 정렬
• start : 현재 텍스트 줄의 시작 위치에 맞추어 문단 정렬
• end : 현재 텍스트 줄의 끝 위치에 맞추어 문단 정렬
• match-partent : 부모 요소에 따라 문단 정렬

왼쪽 정렬

HTML

<!--html 태그 속성사용-->
<p style="text-align:left">동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리 나라만세 </p>

<!--CSS 사용-->
<p class="left">무궁화 삼천리 화려강산 대한 사람 대한으로 길이 보전하세</p>

CSS

.left{ text-align : left };

 

오른쪽 정렬

HTML

<!--html 태그 속성사용-->
<p style="text-align:right">동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리 나라만세 </p>

<!--CSS 사용-->
<p class="right">무궁화 삼천리 화려강산 대한 사람 대한으로 길이 보전하세</p>

CSS

.right{ text-align : right };

 

가운데 정렬

HTML

<!--html 태그 속성사용-->
<p style="text-align:center">동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리 나라만세 </p>

<!--CSS 사용-->
<p class="center">무궁화 삼천리 화려강산 대한 사람 대한으로 길이 보전하세</p>

CSS

.center{ text-align : center };

 

양쪽 정렬

HTML

<!--html 태그 속성사용-->
<p style="text-align:justify">동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리 나라만세 </p>

<!--CSS 사용-->
<p class="justify">무궁화 삼천리 화려강산 대한 사람 대한으로 길이 보전하세</p>

CSS

.justify{ text-align : justify };