이번 글에서는 텍스트의 정렬 방향을 나타내는 css 속성인 text-align에 대해서 다뤄보도록 하겠습니다.
text-align은 문서를 수평으로 정렬할 때 쓰이는 것으로, 전에 한번 다뤘었던 수직 정렬에 대한 속성인
vertical-align과 비슷하고, 수평과 수직에서 차이점이 있다고 보시면 됩니다.
(https://begindevelop.tistory.com/38)
- 속성값 및 특징
1. block요소에만 text-align 속성을 적용할 수 있습니다.
2. 정렬되는 것은 block 안의 inline 요소만 가능합니다.
(텍스트, 이미지 등도 포함)
| 속성값 | 설명 |
| text-align: left | 왼쪽 정렬 |
| text-align: right | 오른쪽 정렬 |
| text-align: center | 중앙 정렬 |
| text-align: justify | 양쪽 정렬 |
개념은 여기까지 보고, 예제 코드로 자세히 알아 보도록 하겠습니다.
- 예제 코드
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>exhtml</title>
<style type="text/css">
div {
width: 200px;
height: 100px;
border: 1px solid black;
font-size: 20px;
}
#left {
text-align: left;
}
#right {
text-align: right;
}
#center {
text-align: center;
}
#justify {
width: 400px;
text-align: justify;
}
#comjustify {
width: 400px;
}
</style>
</head>
<body>
<div id="left">
<span>left</span>
</div>
<div id="right">
right
</div>
<div id="center">
center
</div>
<div id="justify">
justify양쪽정렬입니다.정렬되는 것을 보기위해 길게 글을 썼습니다.
</div>
<div id="comjustify">
justify양쪽정렬입니다.정렬되는 것을 보기위해 길게 글을 썼습니다.
</div>
</body>
</html>
차례대로 보면 위부터 left, right, center, justify 정렬입니다.
left, right, center는 이름 그대로 부모 요소의 왼쪽, 오른쪽, 가운데 정렬이므로 넘어가고,
마지막 justify 정렬을 좀 주의깊게 보겠습니다.
justify정렬은 위에서 양쪽 정렬이라고 했는데, justify를 값으로 주면 줄바뀜이 생길 때 왼쪽과
오른쪽의 여백을 동일하게 주게 됩니다.
비교를 위해 아래에 text-align값을 주지 않은(기본값 세팅) div에 똑같은 텍스트를 넣었습니다.
보면 아래 div와 위의 div의 텍스트가 줄바뀜이 될 때 아래는 약간의 여백이 있는 상태에서 줄바뀜이 되는
반면, 위 justify 정렬 텍스트는 양쪽 여백에 맞게 텍스트가 살짝씩 늘어져 첫 줄 마지막 텍스트가 오른쪽에
딱 붙게 되는 것을 볼 수 있습니다.
'웹 개발 > 주요 태그, 속성들' 카테고리의 다른 글
| css border-radius 속성 (0) | 2021.12.26 |
|---|---|
| css text-indent 속성 (0) | 2021.12.26 |
| css z-index 속성 (0) | 2021.12.23 |
| css vertical-align 속성 (0) | 2021.12.23 |
| display table 속성 (0) | 2021.12.22 |
댓글