5.1 line-height 속성
line-height, letter-spacing, word-spacing 같은 텍스트 속성은 웹 페이지에서 텍스트 스타일링에 중요한 역할을 해. 이 속성들로 줄 사이 간격, 글자 간 간격, 단어 간 간격 등을 조절할 수 있어. 각각의 속성을 자세히 알아보자.
line-height 속성은 텍스트의 줄 높이를 결정해. 이 속성은 인접한 텍스트 줄의 기본 선 사이의 거리를 설정하며, 텍스트의 밀도와 가독성에 영향을 미쳐.
값:
- 숫자값: 단위 없이 상대적인 값 (예: 1.5), 현재 폰트 크기에 곱해져
- 백분율값: 현재 폰트 크기의 백분율로 표현된 상대적인 값 (예: 150%)
- 절대값: 고정된 단위로 표현된 값 (예: 픽셀) (예: 24px)
- 키워드
normal: 기본값, 일반적으로 1.2와 같아
사용 예시:
CSS
.normal {
line-height: normal;
}
.one-point-five {
line-height: 1.5;
}
.double {
line-height: 2;
}
HTML
<body>
<p class="normal">이것은 일반적인 줄 높이의 텍스트입니다. 이것은 일반적인 줄 높이의 텍스트입니다.</p>
<p class="one-point-five">이것은 1.5 줄 높이의 텍스트입니다. 이것은 1.5 줄 높이의 텍스트입니다.</p>
<p class="double">이것은 두 배 줄 높이의 텍스트입니다. 이것은 두 배 줄 높이의 텍스트입니다.</p>
</body>
5.2 letter-spacing 속성
letter-spacing 속성은 글자 간의 간격, 즉 텍스트의 문자 사이의 추가 공간을 결정해. 이 속성은 가독성을 향상하거나 시각적 효과를 내는데 사용할 수 있어.
값:
- 절대값: 고정된 단위로 표현된 값 (예: 픽셀 — 2px)
- 음수값: 문자 간의 간격을 줄여 (예: -1px)
- 키워드
normal: 기본값, 추가 공간 없음 (0)
사용 예시:
CSS
.normal {
letter-spacing: normal;
}
.wide {
letter-spacing: 2px;
}
.narrow {
letter-spacing: -1px;
}
HTML
<body>
<p class="normal">이것은 일반적인 글자 간 간격의 텍스트입니다.</p>
<p class="wide">이것은 넓어진 글자 간 간격의 텍스트입니다.</p>
<p class="narrow">이것은 줄어든 글자 간 간격의 텍스트입니다.</p>
</body>
5.3 word-spacing 속성
word-spacing 속성은 텍스트에서 단어 사이의 간격을 결정해. 이 속성은 단어 간의 공간을 추가하거나 제거하며, 가독성을 향상하거나 시각적 효과를 위해 사용할 수 있어.
값:
- 절대값: 고정된 단위로 표현된 값 (예: 픽셀) (예: 4px)
- 음수값: 단어 간의 간격을 줄여 (예: -2px)
- 키워드
normal: 기본값, 표준 단어 간 간격 (일반적으로 0)
사용 예시:
CSS
.normal {
word-spacing: normal;
}
.wide {
word-spacing: 4px;
}
.narrow {
word-spacing: -2px;
}
HTML
<body>
<p class="normal">이것은 일반적인 단어 간 간격의 텍스트입니다.</p>
<p class="wide">이것은 넓어진 단어 간 간격의 텍스트입니다.</p>
<p class="narrow">이것은 줄어든 단어 간 간격의 텍스트입니다.</p>
</body>
GO TO FULL VERSION