[CSS] 7장: 효과적인 레이아웃을 위한 CSS 속성 다루기

개요

이번 글에서는 웹 페이지 디자인에서 중요한 레이아웃 설계를 다루기 위해 CSS의 핵심 속성들을 살펴본다. 플렉스 박스와 그리드 레이아웃 시스템을 활용해 각각 1차원과 2차원 레이아웃을 설계하는 방법을 배울 것이다. 이를 통해 요소들의 배치와 정렬을 보다 직관적이고 유연하게 다룰 수 있다. 또한, 미디어 쿼리를 사용해 다양한 기기에서 반응형 웹을 구현하는 방법도 알아본다. 이러한 CSS 속성들을 통해 다양한 화면 크기와 해상도에서 최적화된 사용자 경험을 제공하는 웹 페이지를 설계할 수 있을 것이다.

플렉스 박스 레이아웃으로 1차원 레이아웃 설계하기

플렉스 박스 레이아웃 : 1차원 방식으로 효과적으로 레이아웃을 설계할 수 있도록 고안된 스타일 속성.

 

플렉스 박스 레이아웃 살펴보기

구성 요소 :
주축 (수평축),
교차축(수직축),
플렉스 컨테이너(flex나 inline-flex가 적용된 요소),
플렉스 아이템(플렉스 컨테이너의 자식 요소).

레이아웃 확인 방법 : 크롬 브라우저 기준 개발자 도구 - Elements 탭 - flex 아이콘 클릭

플렉스 박스 레이아웃 기본 속성

display 속성 : flex나 inline-flex로 지정.
flex : 다음 요소가 줄바꿈됨.
inline-flex : 다음 요소가 주변에 배치됨.

display 속성이 지정된 요소가 플렉스 컨테이너가 되고, 그 자식이 플렉스 아이템이 된다.

flex-direction 속성 : 플렉스박스 레이아웃의 주축 방향을 결정한다.
row, row-reverse, column, column-reverse가 속성값. 이름이 직관적이므로 자세한 설명은 생략.

flex-wrap 속성 : 플렉스 아이템이 컨테이너 영역을 벗어날 때의 처리를 결정한다.
nowrap, wrap, wrap-reverse : 무시하기, 줄바꿈하기, 역줄바꿈하기.

flex-flow 속성 : 위의 두 flex-  속성을 한 번에 사용할 수 있는 단축 속성.

플렉스 박스 레이아웃 정렬 속성

• justify-content 속성 : 플렉스 아이템을 주축 방향으로 정렬할 때 사용
• align-items 속성 : 플렉스 아이템을 교차축 방향으로 정렬할 때 사용
• align-content 속성 : items와 비슷하지만 두 줄 이상이 됐을 때만 사용
• align-self 속성 : 아이템을 각각 정렬하고 싶을 때 사용

그리드 레이아웃으로 2차원 레이아웃 설계하기

그리드 레이아웃 : 웹페이지에서 2차원 방식으로 레이아웃을 설계할 수 있도록 고안된 스타일 속성

그리드 레이아웃 살펴보기

구성 요소 : 
행 - 가로줄
열 - 세로줄
그리드 셀 - 행과 열이 만나 이루어지는 하나의 공간
그리드 갭 - 셀과 셀 사이 간격
그리드 아이템 - 그리드 셀 안의 컨텐츠
그리드 라인 - 행과 열을 그리는 선
그리드 넘버 - 그리드 라인에 붙는 번호
그리트 컨테이너 - 그리드 레이아웃의 전체 내용을 담은 하나의 컨테이너.

레이아웃 확인 방법은 플렉스 박스와 유사하다.

그리드 레이아웃 기본 속성

• display 속성 : grid, inline-grid
• grid-template-columns 속성 : 각 열의 값 (반복자 repeat, 최대 최소 minmax)
• grid-template-rows 속성 : 각 행의 값 (반복자 repeat , 최대 최소 minmax)
• row-gap, column-gap 속성 : 그리드 갭 크기 설정

그리드 레이아웃 정렬 속성

• align-items, align-self 속성
• justify-items, justify-self 속성
• place-items, place-self 속성

그리드 레이아웃 배치 속성

• grid-template-areas, grid-asea 속성
• grid-column / row-start / end 속성 (각각 2중 택1해서 조합해서 사용)
• grid-column / row 속성 : 위의 속성을 단축한 속성

반응형 웹을 위한 미디어 쿼리 사용하기

미디어 쿼리란

미디어 쿼리 : 사이트에 접속하는 미디어 타입과 특징, 해상도에 따라 다른 스타일 속성 적용하게 하는 기술.
(ex : 스마트폰 접속 vs 웹 접속 다른 UI)

뷰포트 알아보기

뷰포트 : 웹페이지가 접속한 기기에서 보이는 실제 영역 크기

스마트폰 등 다른 해상도에서 웹의 글씨가 너무 작게 보이지 않기 위해서는 meta 태그, viewport 값에서 디바이스 너비를 기준으로 하도록 설정해야 한다.

미디어 쿼리의 기본 문법

형식 : @media < not | only > < mediatype > and (< media feature >) < and | or | not > (< media feature >) {}

not/only : 뒤에 오는 조건 부정 or 지원하는 기기만 해석

mediatype : 적용될 미디어 타입. 생략 가능.
타입 종류 : all, print, screen, speech .

media feature : 미디어 쿼리가 적용될 미디어 조건.
ex ) 화면 최대/최소 너비, portrait vs landscape 뷰포트.

마무리

이번 글을 통해 CSS의 다양한 레이아웃 기술을 학습하면서 웹 페이지의 설계를 좀 더 효율적으로 할 수 있는 방법을 익혔다. 특히 플렉스 박스와 그리드 레이아웃은 복잡한 레이아웃을 손쉽게 구성할 수 있도록 도와주는 강력한 도구임을 다시 한번 느꼈다. 플렉스 박스는 단순한 1차원 레이아웃에서, 그리드 레이아웃은 복잡한 2차원 레이아웃에서 매우 유용했다. 또한 미디어 쿼리를 통해 반응형 웹을 구현하는 방법을 배우면서, 다양한 기기에서 일관된 사용자 경험을 제공하는 것이 얼마나 중요한지 깨달았다. 앞으로 더 복잡한 레이아웃을 설계할 때 이 기술들을 적극적으로 활용할 계획이다.

문득 든 생각인데, 희망 직무로 Unity 클라이언트 개발자를 생각한 나 자신이 다행으로 여겨진다. 오늘 배운 레이아웃 속성들을 보니 Unity의 Vertical / Horizental / Grid Layout Group 컴포넌트가 바로 떠올랐다. Unity 에디터에서 직관적으로(클릭, 드래그, 콤보박스 등) 디자인하던 모든 것이 이런 속성들으로 변한다 생각하니 약간 아득해진다...