텍스트

개념 이해하기

text-align은 인라인 내용 정렬, line-height는 줄 사이 높이, text-decoration은 밑줄, text-transform은 대소문자 표현을 바꿉니다. 긴 본문은 적절한 줄 길이와 줄 간격이 중요합니다.

p.target은 max-width: 48ch로 한 줄의 길이를 숫자 0 너비의 48배로 묶는데, 한글 한 글자는 0보다 넓어 실제로는 그보다 적은 글자가 한 줄에 들어갑니다. line-height: 1.8이 줄 사이를 넓히고, 밑줄은 연한 초록색으로 글자에서 4px 떨어져 그어져 아래 링크의 기본 밑줄과 모양이 다릅니다. text-align: left는 왼쪽에서 오른쪽으로 쓰는 문서의 기본 정렬과 같아 눈에 띄는 변화가 없습니다.

line-height에 단위 없는 1.8을 쓰면 자식 요소가 그 비율을 물려받아 자기 글자 크기에 맞게 줄 높이를 다시 계산합니다. 1.8em처럼 단위를 붙이면 부모에서 계산된 픽셀 값이 그대로 상속되므로, 글자가 더 큰 자식 요소에서는 줄이 겹칠 수 있습니다.