○ text-align : 텍스트 정렬 조정
이 속성은 흔히 문서 작업에서 많이 사용하는 정렬을 의미합니다. 가운데 정렬, 왼쪽 정렬 같은 문장의 위치 정렬을 지정하게 되지요.
선택자 {
text-align: start | end | left | right | center | justify | match-parent;
}
- left / right / center : 좌측 / 우측 / 중앙 정렬을 의미합니다.
- start / end : 현재 텍스트 줄의 시작 / 끝 위치에 맞춰 문단을 정렬합니다.
- justify : 양쪽 끝에 맞추어 정렬합니다. 오른쪽에 여백이 생기지 않습니다.
- match-parent : 부모 요소를 따라서 문단을 정렬합니다.
○ line-height : 줄 간격 조정
line-height는 우리가 흔히 얘기하는 '줄간격'을 지정하는 속성입니다. 줄간격을 지정하는 단위는 여러 가지가 있는데, px로 정확하게 간격을 지정하거나 또는 글자 크기의 배수 또는 백분율로 지정할 수 있습니다. 아래의 경우, 폰트 크기를 기준으로 세 가지 모두 20px을 줄 간격으로 설정한 경우입니다.
p {
font-size: 10px;
line-height: 24px;
}
p {
font-size: 10px;
line-height: 2.0;
}
p {
font-size: 10px;
line-height: 200%;
}
또한 line-height 속성을 이용해, 텍스트의 세로 방향 정렬을 진행할 수 있습니다. 정확히 텍스트가 일정한 공간의 height를 기준으로 중앙에 위치해야 하는 경우, height와 같은 값으로 line-height를 지정하게 되면 정확히 중앙에 위치시킬 수 있습니다. 이는 이후에 박스 관련 모델을 배우면서 height 속성이 산출되는 방식을 이해해야 합니다. 일단은 line-height를 통해 세로 정렬이 가능하다는 사실만 기억하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.heading {
width: 250px;
height: 100px;
background-color: #222;
text-align: center;
line-height: 100px;
color: aliceblue;
font-size: 20px;
}
</style>
</head>
<body>
<p class="heading">텍스트 높이 관련 샘플입니다.</p>
</body>
</html>
'Programming > HTML+CSS' 카테고리의 다른 글
| [CSS] 2. 텍스트 스타일(5) - 목록 스타일 (0) | 2023.04.01 |
|---|---|
| [CSS] 2. 텍스트 스타일(4) - 텍스트 정렬 2 (0) | 2023.03.30 |
| [CSS] 2. 텍스트 스타일(3) - 텍스트 컬러 (0) | 2023.03.27 |
| [CSS] 2. 텍스트 스타일(2) - 웹(외부) 폰트 사용하기 (0) | 2023.03.26 |
| [CSS] 2. 텍스트 스타일(1) - 폰트 스타일 속성 (0) | 2023.03.25 |
