[HTML/CSS] 텍스트 정렬하기 (text-align) 왼쪽, 가운데, 오른쪽 정렬

html 태그에서 텍스트 관련 속성 중에서 가장 많이 사용하는 속성 중에 하나가 바로 이번 포스팅에서 서술할 (text-align) 속성일 것입니다. 이번 포스팅에서는 text-align 속성을 사용하여 텍스트를 좌측, 중앙, 우측 정렬을 하는 방법에 대해 알아보도록 하겠습니다.

 

 텍스트 정렬하기(text-align) 

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

 

왼쪽 정렬

See the Pen 왼쪽 정렬 by wjdxo513 (@wjdxo513) on CodePen.

 

text-align 속성에 left 값을 넣으면 왼쪽 정렬이 됩니다.

 

 

오른쪽 정렬

See the Pen 오른쪽 정렬 by wjdxo513 (@wjdxo513) on CodePen.

 

text-align 속성에 right 값을 넣으면 오른쪽 정렬이 됩니다.

 

 

가운데 정렬

See the Pen 가운데 정렬 by wjdxo513 (@wjdxo513) on CodePen.

 

text-align 속성에 center 값을 넣으면 가운데 정렬이 됩니다.

 

 

양쪽 정렬

See the Pen 양쪽 정렬 by wjdxo513 (@wjdxo513) on CodePen.

 

text-align 속성에 justify 값을 넣으면 양쪽 정렬이 됩니다.