9.1 text-indent 속성
CSS에서 문단 속성은 텍스트의 포맷을 관리하는 데 매우 중요해. 이 속성들은 읽기 편하고 보기 좋게 만들어줘. 그 중 text-indent와 text-align-last는 문단의 첫 줄 들여쓰기와 마지막 줄 정렬을 조정하는 중요한 도구야.
text-indent는 블록 요소 안의 첫 번째 줄의 들여쓰기를 조절해. 보통 문단의 시작에 들여쓰기를 만들어 텍스트의 가독성과 구조를 개선하는데 사용돼.
값 종류:
- 절대값: 픽셀(
px), 포인트(pt), 센티미터(cm) 같은 고정된 단위로 된 값. 예시:text-indent: 20px; - 백분율 값: 포함하는 블록의 너비를 기준으로 한 백분율 값. 예시:
text-indent: 5%; - 음수 값: 들여쓰기가 음수일 수도 있어, 그러면 텍스트가 컨테이너의 왼쪽 너머로 정렬될거야. 예시:
text-indent: -20px;
사용 예시:
CSS
.indent-20px {
text-indent: 20px;
}
.indent-5percent {
text-indent: 5%;
}
.indent-negative {
text-indent: -20px;
}
HTML
<body>
<p class="indent-20px">이 문단은 첫 줄이 20 픽셀 들여쓰기 됐어.</p>
<p class="indent-5percent">이 문단은 첫 줄이 블록 너비의 5% 들여쓰기 됐어.</p>
<p class="indent-negative">이 문단은 첫 줄이 음수 20 픽셀 들여쓰기 됐어.</p>
</body>
9.2 text-align-last 속성
text-align-last는 블록 요소 안의 마지막 줄의 정렬을 조절해. 문단에서 균일한 정렬을 이루고 싶을 때 유용해, 특히 텍스트가 양쪽 정렬(justify)될 때.
값 종류:
auto: 마지막 줄이 일반 텍스트처럼 정렬돼 (기본값)left: 마지막 줄이 왼쪽으로 정렬돼right: 마지막 줄이 오른쪽으로 정렬돼center: 마지막 줄이 가운데로 정렬돼justify: 마지막 줄이 양쪽으로 정렬돼, 다른 줄과 마찬가지로
사용 예시:
CSS
.justify-left {
text-align: justify;
text-align-last: left;
}
.justify-right {
text-align: justify;
text-align-last: right;
}
.justify-center {
text-align: justify;
text-align-last: center;
}
.justify-justify {
text-align: justify;
text-align-last: justify;
}
HTML
<body>
<p class="justify-left">이 문단은 텍스트가 양쪽 정렬되고 마지막 줄이 왼쪽으로 정렬돼.</p>
<p class="justify-right">이 문단은 텍스트가 양쪽 정렬되고 마지막 줄이 오른쪽으로 정렬돼.</p>
<p class="justify-center">이 문단은 텍스트가 양쪽 정렬되고 마지막 줄이 중앙으로 정렬돼.</p>
<p class="justify-justify">이 문단은 텍스트와 마지막 줄이 모두 양쪽 정렬돼.</p>
</body>
9.3 속성의 결합 사용
text-indent와 text-align-last는 함께 사용돼서 더 복잡한 문단 포맷을 만들 수 있어, 이로 인해 가독성과 텍스트의 시각적 구조가 향상돼.
HTML과 CSS 예시:
CSS
.styled-paragraph {
text-indent: 30px;
text-align: justify;
text-align-last: right;
width: 300px;
border: 1px solid #000;
padding: 10px;
}
HTML
<body>
<p class="styled-paragraph">
이 문단은 첫 줄이 30 픽셀 들여쓰기 되었고, 텍스트는 양쪽 정렬되며, 마지막 줄은 오른쪽으로 정렬돼. text-indent와 text-align-last 속성을 함께 사용하여 원하는 포맷 효과를 나타낸 예시야.
</p>
</body>
코드 설명:
text-indent: 30px;: 텍스트의 첫 줄 들여쓰기를 30 픽셀로 설정text-align: justify;: 텍스트를 컨테이너의 넓이에 맞게 정렬text-align-last: right;: 마지막 줄을 오른쪽으로 정렬width: 300px;: 텍스트 컨테이너의 넓이를 설정border: 1px solid #000;: 텍스트 컨테이너 주변에 테두리 추가padding: 10px;: 컨테이너 내부 여백 설정
GO TO FULL VERSION