CSS로 작업하다 보면 페이지에서 요소의 정렬 방식을 바꾸고 싶은 순간이 찾아옵니다. 이 글에서는 요소의 수직 정렬을 조절하는 CSS 속성인 vertical-align과 사용할 수 있는 다양한 속성값들을 하나씩 자세히 살펴보겠습니다.
vertical-align 속성 기본 문법
속성의 기본 문법은 다음과 같습니다:
vertical-align: 속성값;
속성값에는 baseline, length, sub, super, top, text-top, middle, bottom, text-bottom, initial, inherit 중 하나를 지정할 수 있습니다. 각 값이 어떤 방식으로 요소를 정렬하는지 아래에서 확인해 보세요.
속성값 종류와 정렬 효과
baseline (기본값)
baseline은 기본값으로, 요소가 부모 요소의 기준선(baseline)에 맞춰 정렬됩니다. 별도의 값을 지정하지 않으면 항상 이 방식이 적용됩니다.
length (길이 단위)
length 값은 지정한 길이만큼 요소를 위 또는 아래로 이동시킵니다. px, em, cm 등 다양한 단위를 사용할 수 있으며, 양수를 입력하면 위로, 음수를 입력하면 아래로 이동합니다. 마찬가지로 퍼센트(%) 값으로도 요소의 위치를 조정할 수 있습니다.
sub (아래첨자)
sub 값은 요소를 부모 요소의 아래첨자(subscript) 기준선에 맞춰 정렬합니다. 기본 위치보다 더 낮게 배치되므로 화학식이나 수학 공식 표현에 유용합니다.
super (위첨자)
super 값은 요소를 부모 요소의 위첨자(superscript) 기준선에 맞춰 정렬합니다. 기본 위치보다 높게 배치되며, 지수 표기 등에 활용할 수 있습니다.
top (라인 최상단)
top 값은 해당 라인에서 가장 높은 요소의 상단에 맞춰 요소를 정렬합니다. 같은 줄에 크기가 다른 요소들이 섞여 있을 때 유용합니다.
text-top (텍스트 상단)
text-top 값은 부모 요소에서 사용되는 텍스트의 상단에 맞춰 요소를 정렬합니다. top과 달리 라인 전체가 아닌 텍스트 영역을 기준으로 한다는 점에 주의하세요.
middle (중앙)
middle 값은 요소를 부모 요소의 세로 중앙에 맞춰 정렬합니다. 이미지와 텍스트를 나란히 배치할 때 자주 사용됩니다.
bottom (라인 최하단)
bottom 값은 해당 라인에서 가장 낮은 요소의 하단에 맞춰 요소를 정렬합니다.
text-bottom (텍스트 하단)
text-bottom 값은 부모 요소에서 사용되는 텍스트의 하단에 맞춰 요소를 정렬합니다.
initial (초기값)
initial 값은 해당 속성을 CSS 기본값으로 되돌립니다. 즉, baseline과 동일한 결과를 가져옵니다.
inherit (상속)
inherit 값은 부모 요소의 정렬 속성값을 그대로 상속받아 적용합니다.
지금까지 vertical-align 속성의 모든 값과 각각의 정렬 효과를 알아보았습니다. 실무에서는 인라인 요소나 테이블 셀 정렬에 특히 자주 활용되니, 상황에 맞는 값을 골라 사용해 보세요.
마무리
이번 글에서는 CSS의 vertical-align 속성을 사용해 페이지 내 요소를 수직으로 정렬하는 방법을 정리했습니다. CSS를 이제 막 시작했다면 기초 개념부터 차근차근 익혀 나가는 것을 추천합니다. 다양한 속성값을 직접 실험해 보면서 감각을 익혀 보세요!