친절한효자손 취미생활

지난 시간에는 가로에 대한 다양한 정렬 방법을 알아보았습니다. 이번에는 세로축에 대해 다양한 정렬 방법에 대해 알아볼 것입니다. 우선 세로에 대해서 정렬하기 위해서는 부모 요소인 컨테이너에 반드시 세로크기가 정의되어 있어야 합니다. 아시다시피 웹브라우저 생태계는 보통 가로축은 고정으로 정해져 있습니다. 반응형에서는 100%로 사용되어질텐데 스마트폰이나 모니터의 경우에는 웹페이지의 가로 크기가 접속한 디바이스 또는 PC 디스플레이의 가로 사이즈만큼의 크기가 최대 사이즈입니다. 그러나 세로는 보통 스크롤로 표현되어집니다. 이때 홈페이지에 담긴 콘텐츠의 양에 따라 세로 사이즈는 무한정으로 늘릴 수 있습니다. 그러니 세로 크기는 반드시 고정된 상태여야 자식 요소를 세로 기준으로 자유롭게 배치할 수 있게 됩니다.

 

자식 요소를 세로축 기준으로 배치하는 방법은 두 가지가 있습니다.

 

align-items

align-content

 

이렇게 두 가지죠. 본문에서는 첫번째인 align-items에 대해 알아볼 것입니다. 서두가 길어졌군요. 바로 예시를 살펴보겠습니다.

 

align-items

See the Pen CSS flex : align-items by rgy0409 (@rgy0409) on CodePen.

 

위의 예시를 살펴보시면 아시겠지만 빨강색 div가 부모 요소인 컨테이너 박스고 녹색 div가 컨테이너의 아이템 자식 요소임을 확인할 수 있습니다. 빨간색 컨테이너 박스의 세로 사이즈는 100px입니다. 그리고 녹색 박스에는 텍스트가 들어가있고 패딩값으로 몸을 불린 상태입니다. 또한 각 박스의 텍스트 크기는 서로 다릅니다. 이제 align-items의 각 속성을 살펴봅시다.

 

align-items: stretch; ▶ 기본값. 자식 요소의 콘텐츠에 상관 없이 세로 크기를 컨테이너의 세로 크기만큼 100% 사용

align-items: flex-start; ▶ 자식 요소를 컨테이너의 최상단에 맞춤

align-items: flex-end; ▶ 자식 요소를 컨테이너의 최하단에 맞춤

align-items: center; ▶ 자식 요소를 컨테이너의 중앙에 맞춤

align-items: baseline; ▶ 자식 요소 콘텐츠의 하단을 컨테이너의 중앙에 맞춤

이렇게 설명을 할 수 있을 것 같습니다. stretch가 가장 기본이 되는 형태이고 baseline은 솔직히 잘 쓰이지는 않습니다. 그런데 baseline이 대체 무슨 의미인지 잘 모르시겠다면 아래의 그림을 보시면 확실히 이해가 되실 것입니다.

 

baseline

출처 : 일러스트레이터로 내가 만듦

이렇게 이해하시면 되십니다. 빨간색 컨테이너 박스의 세로 사이즈의 정 중앙이 노란색 선입니다. 녹색 박스인 자식요소 안에 들어있는 텍스트의 하단이 이 노란색 라인에 정렬됩니다. 이것이 align-items: baseline; 정렬입니다. 확실히 이해 되시죠? 그래서 이 방법은 실전에도 잘 쓰이지 않고 있어요. 다소 정렬이 쓸모가 없다고 해야할까요? 그래도 알아두면 언젠가는 요긴하게 사용할 날이 있을 것입니다. 끝.

공유하기

facebook twitter kakaoTalk kakaostory naver band