6.1 text-align 속성
텍스트 정렬 — 웹 페이지 스타일링의 거의 가장 중요한 측면으로, 텍스트가 컨테이너 안에서 어떻게 배치될지를 제어할 수 있게 해준다. CSS는 텍스트 정렬을 위한 두 가지 주요 속성인 text-align과 vertical-align을 제공해. 이 속성들은 각각 수평 및 수직으로 텍스트 정렬을 관리할 수 있게 한다.
text-align 속성은 블록 요소 내에서 텍스트의 수평 정렬을 관리해. 이 속성은 텍스트가 요소의 경계에 대해 어떻게 정렬될지 결정한다.
값들
left: 텍스트를 왼쪽 끝에 정렬 (기본적으로 왼쪽에서 오른쪽으로 글을 쓸 때)right: 텍스트를 오른쪽 끝에 정렬 (기본적으로 오른쪽에서 왼쪽으로 글을 쓸 때)center: 텍스트 중앙 정렬justify: 텍스트를 양쪽 끝에 정렬, 단어 사이에 공간을 추가해 텍스트가 컨테이너의 전체 너비에 고르게 배치되도록 함start: 텍스트를 시작점에 정렬 (텍스트 방향에 따라 왼쪽 또는 오른쪽 끝)end: 텍스트를 끝점에 정렬 (텍스트 방향에 따라 오른쪽 또는 왼쪽 끝)
사용 예제:
CSS
.left {
text-align: left;
}
.right {
text-align: right;
}
.center {
text-align: center;
}
.justify {
text-align: justify;
}
HTML
<body>
<p class="left">이 텍스트는 왼쪽으로 정렬됩니다.</p>
<p class="right">이 텍스트는 오른쪽으로 정렬됩니다.</p>
<p class="center">이 텍스트는 가운데 정렬됩니다.</p>
<p class="justify">이 텍스트는 양쪽 정렬됩니다. 이 텍스트는 전체 컨테이너의 너비를 차지하도록 늘어납니다.</p>
</body>
6.2 vertical-align 속성
vertical-align 속성은 부모 요소의 기준선에 따라 요소의 수직 정렬을 관리해. 보통 이미지나 텍스트 라인 내에 있는 인라인 요소 또는 다른 컨테이너의 수직 정렬을 위해 사용돼.
값들:
baseline: 부모의 기준선에 정렬 (기본 값)sub: 하위 첨자로 정렬super: 상위 첨자로 정렬text-top: 부모의 글꼴 상단에 정렬text-bottom: 부모의 글꼴 하단에 정렬middle: 부모의 가운데에 정렬top: 컨테이너 상단에 정렬bottom: 컨테이너 하단에 정렬- 퍼센트 값: 요소를 줄 높이에 대해 지정된 퍼센트만큼 오프셋
사용 예제:
CSS
.container {
height: 100px;
border: 1px solid #000;
}
.baseline {
vertical-align: baseline;
}
.sub {
vertical-align: sub;
}
.super {
vertical-align: super;
}
.text-top {
vertical-align: text-top;
}
.text-bottom {
vertical-align: text-bottom;
}
.middle {
vertical-align: middle;
}
.top {
vertical-align: top;
}
.bottom {
vertical-align: bottom;
}
.percent-50 {
vertical-align: 50%;
}
HTML
<body>
<div class="container">
<span class="baseline">baseline</span>
<span class="sub">sub</span>
<span class="super">super</span>
<span class="text-top">text-top</span>
<span class="text-bottom">text-bottom</span>
<span class="middle">middle</span>
<span class="top">top</span>
<span class="bottom">bottom</span>
<span class="percent-50">50%</span>
</div>
</body>
GO TO FULL VERSION