CSS vertical-align, 이제 헷갈리지 마세요!

vertical-align 속성의 동작 원리를 이해하기 위한 line box 개념 소개

inline-level 요소의 높이 계산 방식과 line box의 관계 설명

line-height 속성을 활용하여 수직 정렬을 제어하는 방법 제시

Line Box: vertical-align의 핵심

vertical-align 속성은 line box를 기준으로 작동하며, line box는 inline-level 요소들의 높이를 계산하여 결정된다. 구체적으로, line box는 inline-level 요소 중 가장 큰 높이를 기준으로 설정된다. 따라서 line box의 이해는 수직 정렬의 핵심이다.

height vs line-height: 수직 정렬의 차이

height 속성은 line box의 높이에 직접적인 영향을 주지 않지만, line-height는 line box의 높이를 결정하는 중요한 요소이다. 따라서 line-height를 조절하여 수직 정렬 위치를 변경할 수 있다. 반면, height는 요소 자체의 크기를 결정할 뿐이다.

Strut 활용: line box 조작

width가 0인 가상의 박스인 strut는 부모 요소로부터 font와 line-height를 상속받아 line box에 영향을 준다. 따라서 line-height를 활용하여 line box의 크기를 조절함으로써, 수직 정렬을 세밀하게 제어할 수 있다. 결과적으로, 다양한 레이아웃을 구현할 수 있다.