CSS align-items 속성의 baseline 값이란?
align-items 속성에 baseline 값을 지정하면 플렉스 컨테이너 안의 자식 요소들이 텍스트의 기준선(baseline)을 기준으로 정렬됩니다. 이 값은 폰트 크기나 줄 높이가 서로 다른 요소들을 나란히 배치할 때 특히 유용하며, 시각적으로 텍스트가 한 줄에 자연스럽게 맞춰진 것처럼 보이게 해줍니다.
baseline 값 사용 예제
아래 코드를 실행하면 네 개의 자식 요소(Q1~Q4)가 빨간색 플렉스 컨테이너 안에서 텍스트 기준선에 맞춰 정렬되는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
height: 200px;
background-color: red;
align-items: baseline;
}
.mycontainer > div {
background-color: orange;
text-align: center;
line-height: 60px;
font-size: 30px;
width: 100px;
margin: 5px;
}
</style>
</head>
<body>
<h1>Queue</h1>
<div class = "mycontainer">
<div>Q1</div>
<div>Q2</div>
<div>Q3</div>
<div>Q4</div>
</div>
</body>
</html>
코드 핵심 포인트
display: flex;— 컨테이너를 플렉스 박스로 설정하여 자식 요소들이 가로 방향으로 배치됩니다.align-items: baseline;— 각 자식 요소를 텍스트 기준선에 맞춰 세로 방향으로 정렬합니다.font-size: 30px;와line-height: 60px;— 텍스트 크기와 줄 높이를 지정해 baseline 정렬 효과를 더욱 명확하게 보여줍니다.margin: 5px;— 요소 사이에 여백을 두어 각 항목을 시각적으로 구분합니다.
만약 align-items 값을 stretch(기본값), center, flex-start, flex-end 등으로 변경하면 정렬 결과가 어떻게 달라지는지 직접 비교해 보는 것도 학습에 큰 도움이 됩니다.