CSS text 속성 요약 정리

 

CSS text 속성 요약 정리를 해보겠습니다.

 

text는 웹페이지를 구성하는 가장 기초적인 구성 요소라고 할 수 있습니다.

 

텍스트와 더불어 그림이 있으면 이해를 돕고 좋겠지만, 설사 그림이 없어도 이렇게 블로그 글로 내용을 작성할 수 있는 것처럼요.

 

또한 어떤 텍스트 폰트를 쓰고, 어떻게 크기와 굵기를 레벨링하고, 배치, 줄간격 등을 하느냐에 따라 하나의 디자인이 됩니다.

 

그럼 지금부터 text 요소를 디자인할 수 있는 속성들을 크게 크게 나눠서 알아보겠습니다.

 

 

 

 

text의 CSS 속성들

text에 CSS 속성들을 적용하려면, p태그 등의 텍스트를 쓴 요소에 다음과 같은 속성들을 부여하면 됩니다.

 

스타일

 

• color : 텍스트의 색상을 설정할 수 있습니다.
• direction : 왼쪽에서 오른쪽으로, 오른쪽에서 왼쪽으로 텍스트의 출력 방향을 설정할 수 있습니다.
• text-decoration : 밑줄 등 글자의 장식 요소를 설정할 수 있습니다.
• text-transform : 알파벳의 대문자, 소문자를 설정할 수 있습니다.
• text-shadow : 그림자를 설정할 수 있습니다.

 

 

정렬, 간격

 

• text-align : 글자를 왼쪽, 중앙, 오른쪽으로 정렬할 수 있습니다.
• letter-spacing : 글자 사이의 간격을 설정할 수 있습니다.
• word-spacing : 단어 사이의 간격을 설정할 수 있습니다.
• line-height : 줄간격을 설정할 수 있습니다.
• text-indent : 들여쓰기를 설정할 수 있습니다.
  
  

참고로 text-indent는 단순히 들여쓰기할 때만 쓰는 것은 아닙니다.

 

특정 요소의 패딩이나 마진을 건드리지 않고 왼쪽 오른쪽 여백을 설정할 때 쓰이기도 합니다.

 

 

영역, 여백

 

• white-space : 여백
• text-overflow : 영역을 벗어난 텍스트의 설정을 할 수 있습니다. clip으로 자르기, ellipsis로 말줄임표를 할 수 있습니다.
• word-wrap : 영역을 벗어난 텍스트를 위해 줄바꿈을 해서 표시할지 설정할 수 있습니다.
• word-break : 줄바꿈을 할 때 단어를 깰지 여부를 설정할 수 있습니다.

 

참고로 word-break는 영어권 나라에서 주로 쓰이는데 break-word, break-all, keep-all, 하이픈 기준 등 디테일하게도 설정이 가능합니다.

 

 

특정 너비를 넘어서는 글자를 말줄임표로 줄이는 방법은 이전 글에 설명해두었으니 참고하시기 바랍니다.

 

CSS position, z-index, overflow 요약 정리

 

 

텍스트 세로 쓰기

 

가로의 방향은 direction 속성으로 설정할 수 있지만, 세로 텍스트를 어떻게 할까요?

 

텍스트의 세로 방향 쓰기는 아래와 같이 설정하면 됩니다.

 

p{writing-mode: vertical-rl;
	text-orientation: upright; 또는 mixed;}

 

text-orientation을 upright로 하면 글자를 세로 방향으로 쓸 수 있습니다.

 

mixed로 하면 문단 자체는 세로로 회전한 모양이지만, 글자 하나 하나는 여전히 가로 방향으로 쓰여 있게 됩니다.

 

 

웹폰트를 적용하거나, 반응형 웹에서 폰트 크기를 손쉽게 설정하는 방법도 참고해보세요.

 

CSS font 속성과 %, em, rem 핵심 정리

 

여기까지 CSS text 속성 요약 정리를 마치겠습니다. 읽어주셔서 감사합니다.