오늘은 css상에서 수직 정렬을 할 수 있는 vertical-align 속성에 대해서 알아보는 시간을 갖겠습니다.
바로 전 포스팅인 css table에서도 vertical-align 속성값을 썼었는데요.
(https://begindevelop.tistory.com/37)
<div class="table-cell top">
<p>안녕하세요.4</p>
</div>
<div class="table-cell middle">
<p>안녕하세요.5</p>
</div>
<div class="table-cell bottom">
<p>안녕하세요.6</p>
</div>
.top {
vertical-align: top;
}
.middle {
vertical-align: middle;
}
.bottom {
vertical-align: bottom;
}
vertical align이 쓰인 코드입니다.
결과를 보시면 4, 5, 6이 각각 수직상에서 위, 중간, 아래로 정렬되어 있는 모습을 볼 수 있습니다.
이와 같이 vertical-align은 여러 세부 속성값들이 있는데요, 어떤 것들이 있는지 알아보고 예제 코드로
한 번 써 보겠습니다.
- 속성값
기본값(baseline)
length : 길이값만큼 올리고 내리며, 음수값도 사용 가능합니다.(px값 사용시 baseline 기준으로 이동)
% : 해당 요소가 line-height 기준으로 이동하며 음수값 사용 가능합니다.
| 속성값 | 설명 |
| baseline | 부모 요소 기준 하단 라인에 맞춥니다. |
| sub | 부모 아래 첨자 기준으로 정렬합니다. |
| super | 부모 위 첨자 기준으로 정렬합니다. |
| text-top | 요소의 맨 위를 부모 font의 맨 위에 맞춥니다. |
| text-bottom | 요소의 맨 아래를 부모 font의 맨 아래에 맞춥니다. |
| top | 요소 맨 위를 줄의 가장 큰 요소 맨 위 위치에 맞춥니다. |
| middle | 부모의 중앙에 위치합니다. |
| bottom | 요소 맨 아래를 줄에서 가장 낮은 요소에 맞춥니다. |
그럼 예제 코드로 한 번 보겠습니다.
(코드가 좀 길어 html과 css 부분으로 나누겠습니다.)
<html 코드>
<body>
<div class="par">
부모텍스트
<div class="base child">
자식텍스트 baseline
</div>
</div>
<div class="par">
부모텍스트
<div class="sub child">
자식텍스트 sub
</div>
</div>
<div class="par">
부모텍스트
<div class="super child">
자식텍스트 super
</div>
</div>
<div class="par">
부모텍스트
<div class="texttop child">
자식텍스트 text-top
</div>
</div>
<div class="par">
부모텍스트
<div class="textbtm child">
자식텍스트 text-bottom
</div>
</div>
<div class="par">
부모텍스트
<div class="top child">
자식텍스트 top
</div>
</div>
<div class="par">
부모텍스트
<div class="middle child">
자식텍스트 middle
</div>
</div>
<div class="par">
부모텍스트
<div class="bottom child">
자식텍스트 bottom
</div>
</div>
</body>
<css 코드>
<style type="text/css">
div {
display: inline-block;
border: 1px solid black;
}
div.par {
width: 500px;
height: 200px;
font-size: 30px;
}
div.child {
font-size: 20px;
}
div.base {
vertical-align: baseline;
}
div.sub {
vertical-align: sub;
}
div.super {
vertical-align: super;
}
div.texttop {
vertical-align: text-top;
}
div.textbtm {
vertical-align: text-bottom;
}
div.top {
vertical-align: top;
}
div.middle {
vertical-align: middle;
}
div.bottom {
vertical-align: bottom;
}
</style>
이렇게 결과창이 나오게 됩니다.
하나씩 볼까요?
- baseline(기본값) : 부모 요소의 하단 라인에 맞춥니다.
- sub : 부모 아래 첨자 기준으로 정렬합니다.
- super : 부모 위 첨자를 기준으로 정렬합니다.
- text-top : 요소 맨 위를 부모 font의 맨 위에 맞춥니다.
- text-bottom : 요소 맨 아래를 부모 font의 맨 아래에 맞춥니다.
그런데 여기서 봐야 할 점이 top, middle, bottom이 우리 생각대로라면 부모의 영역을 기준으로 해서
top은 위쪽, middle은 중간, bottom은 맨 아래에 가 있어야 합니다.
그런데 생각했던 것과 다르게 움직이지 않은 모습을 볼 수 있습니다.
그 이유는 자식이 활동할 수 있는 영역이 한정적이기 때문입니다.
(펜으로 그린거라 퀄리티는 양해 부탁드립니다.)
저렇게 영역이 한정되어 있기 때문에 top, middle, bottom을 해도 저 영역 안에서만 움직일 수 있게
되는 것입니다.
그럼 우리가 원하는 대로 되려면, 저 영역을 확장시켜 줘야겠죠?
<html 코드>
<div class="par tmb">
부모텍스트
<div class="top child">
</div>
</div>
<div class="par tmb">
부모텍스트
<div class="middle child">
</div>
</div>
<div class="par tmb">
부모텍스트
<div class="bottom child">
</div>
</div>
<css 코드>
div.tmb {
line-height: 200px;
}
div.tmb > div {
width: 50px;
height: 50px;
}
line-height 속성으로 세로값 전체를 줘서 영역을 확장시켜 줬고, 자식 div의 크기값을 50px씩 고정시켜
줬습니다.
(자식 div의 텍스트를 없앤 것은 가로50px, 세로50px에 텍스트가 다 들어가지 않아 위치값들이 다 깨지기
때문에 아예 텍스트를 지웠습니다.)
top
middle
bottom
(부모텍스트가 가운데로 내려온 것은 부모 영역에 line-height값을 세로 전체로 줬기 때문입니다.)
이렇게 오늘은 예제와 함께 vertical-align 요소에 대해 알아보는 시간을 가졌습니다.
line-height와 함께 수직 정렬을 해야 할 상황일 때 유용하게 사용하시길 바랍니다.
'웹 개발 > 주요 태그, 속성들' 카테고리의 다른 글
| css text-align 속성 (0) | 2021.12.23 |
|---|---|
| css z-index 속성 (0) | 2021.12.23 |
| display table 속성 (0) | 2021.12.22 |
| css block, inline, inline-block 속성 (0) | 2021.12.22 |
| css box-sizing 속성 (0) | 2021.12.22 |
댓글