(HTML/CSS) Vertical-Align(1) - Line Box

이 글은 프론트엔드 개발자들이 자주 사용하는 CSS 속성인 vertical-align에 대해 깊이 있게 탐구합니다. 특히 inline 요소와 line box의 개념을 중심으로, 왜 vertical-align이 예상대로 동작하지 않거나 복잡하게 느껴지는지에 대한 의문을 해소하고자 합니다.

글에서는 inline-level 요소와 line box의 정의, 그리고 line box가 어떻게 계산되는지를 설명하며, vertical-align의 top과 bottom 값이 line box의 최상단 및 최하단에 정렬된다는 점을 강조합니다. 이를 통해 개발자들이 수직 정렬의 동작 원리를 명확히 이해하고 실제 개발에 더 효과적으로 적용할 수 있도록 돕는 것을 목표로 합니다.