Chapter 12

12-1 반응형 웹 알아보기

반응형 웹 디자인이란

포털 사이트나 쇼핑몰 사이트의 경우 모바일 기기의 특성을 충분히 활용할 수 있도록 모바일 사이트를 별도록 제작한다. 하지만 스마트폰이나 태블릿 등, 브라우저 환경이 다양하게 바뀌는데 그때마다 웹사이트를 각각 제작하는 것은 쉬운 일이 아니다. 그렇다면 기존 웹 사이트의 내용을 그대로 유지하면서 다양한 화면 크기에 맞게 표시할 수 없을까? 그 해답은 바로 반응형 웹 디자인이다. 반응형 웹 디자인은 웹 요소를 화면 크기에 맞게 재배치하고 각 요소의 표시 방법만 바꾸어 사이트를 구현해 준다.

모바일 기기를 위한 뷰포트

반응형 웹 디자인에서 기본적으로 알아 둬야 할 것이 뷰포트이다. PC에 맞게 제작한 웹 사이트를 모바일 기기에서 접속해서 보면 모든 내용이 작게 표시된다. 그 이유는 화면에서 표시되는 픽셀의 차이 때문인데, 뷰포트를 지정하면 접속한 기기의 화면에 맞추어 확대하거나 축소해서 표시할 수 있다. '뷰포트'란 스마트폰 화면에서 실제 내용이 표시되는 영역이다. 모바일 기기에 적합한 사이트를 제작했더라도 정작 스마트폰 화면에서 내용을 확인하면 원래 의도한 대로 표시하지 않기도 하는데, 이는 웹키트를 기반으로 한 모바일 브라우저의 기본 뷰포트 너비가 980px이기 때문이다. 웹 페이지 너비를 스마트폰용인 320px로 맞추어 웹 사이트를 제작하더라도 스마트폰용 모바일 브라우저의 기본 뷰포트 너비가 980px이므로 웹 페이지 너비를 무조건 980px로 표시하려고 하는 것이다. 그러므로 모바일 기기에 적합한 사이트를 제작하기 위해서는 뷰포트 개념을 꼭 알아야 한다.

웹키트를 기반으로 한 브라우저란 브라우저를 동작시키는 실행 엔진이 '웹키트'엔진이라서 붙은 이름이다. pc용 크롬, 엡지, 사파리 등 대부분의 모바일 브라우저는 웹키트 엔진을 기반으로 한다.

뷰포트 지정하기

뷰포트는 <meta> 태그를 이용해 <head>와 </head> 태그 사이에 작성한다. 뷰포트를 지정하는 기본형은 다음과 같다.

/*기본형*/
<meta name="viewport" content="속성1=값1, 속성2=값2, ...">

content 속성을 이용해 뷰포트 속성과 속성값을 지정하면 되는데, contant 안에서 사용하는 뷰포트의 속성은 다음과 같다.

종류
설명
사용 가능한 값
기본값

width

뷰포트 너비

device-width 또는 크기

브라우저 기본값

height

뷰포트 높이

device-height 또는 크기

브라우저 기본값

user-scalable

확대/축소 가능 여부

yes 또는 no(yes는 1로, device-width와 device-height값은 10으로 간주)

yes

initial-scale

초기 확대/축소 값

1~10

1

다음은 가장 많이 사용하는 뷰포트 속성으로 웹 페이지 뷰포트의 너비를 스마트폰 화면 너비에 맞추고 초기 화면 배율을 1로 지정한다.

<meta name="viewport" contant="width=device-width, initial-scale=1">

뷰포트 단위

뷰포트의 개념이 등장하기 전까지는 CSS에서 크기를 지정할 때 주로 px, %의 단위를 사용했지만 이제는 다음과 같이 뷰포트를 기준으로 하는 단위를 사용할 수도 있다.

  • vw(viewport width): nvw는 뷰포트 너비의 n%와 같다.

  • vh(viewport height): nvh는 뷰포트 높이의 n%와 같다.

  • vmin(viewport minimum): 뷰포트의 너비와 높이 중에서 작은 값의 1%와 같다.

  • vmax(viewport maximum): 뷰포트의 너비와 높이 중에서 큰 값의 1%와 같다.

12-2 미디어 쿼리 알아보기

미디어 쿼리 알아보기

CSS 모듈인 미디어 쿼리는 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하는 방법이다. 미디어 쿼리를 사용하면 접속하는 기기의 화면 크기에 따라 레이아웃이 달라진다. 그렇다면 미디어 쿼리는 무엇인가? 미디어 쿼리는 사용자가 어던 미디어를 사용하는 가에 따라 사이트의 형태가 바뀌도록 CSS를 작성하는 방법이다.

미디어 쿼리 구문

미디어 쿼리는 @media 속성을 사용해 특정 미디어에서 어떤 CSS를 적용할 것인지 지정해 준다. 미디어 쿼리의 기본형은 다음과 같다.

/*기본형*/
@media [only | not] 미디어 유형 [and 조건] * [and 조건]

only : 미디어 쿼리를 지원하지 않는 웹 브라우저에서는 미디어 쿼리를 무시하고 실행하지 않는다. not : not 다음에 지정하는 미디어 유형을 제외한다. 예를 들어 not tv라고 지정하면 TV를 제외한 미디어 유형에만 적용한다. and : 조건을 여러 개 연결해서 추가할 수 있다. 조건이 같은 미디어 유형이 여러 개라면 쉼표로 구분해서 추가한다.

미디어 쿼리 구문은 <style>과 </style> 사이에 사용하며 대소 문자를 구별하지 않는다. 기본적으로 미디어 유형을 지정해야 하고, 필요할 경우에는 and연산자로 조건을 적용한다. 예를 들어 다음 소스는 미디어 유형이 screen이면서 최소 너비가 768px이고 최대 너비는 1439px일 경우에 적용할 css를 정의하는 구문이다.

@media screen and (min-width: 768px) and (max-width: 1439px) {
	......
}

미디어 유형의 종류

미디어 쿼리는 미디어별로 적용할 css를 따로 작성하므로 @media 속성 다음에 미디어 유형을 알려 줘야 한다. @media 속성의 미디어 유형은 다음과 같다.

종류
설명

all

모든 미디어 유형에서 사용할 CSS를 정의한다.

print

인쇄 장치에서 사용할 CSS를 정의한다.

screen

컴퓨터 스트린에서 사용할 CSS를 정의한다. 스마트폰의 스크린도 포함된다.

tv

음성과 영상이 동시에 출력되는 TV에서 사용할 CSS를 정의힌다.

aural

음성 합성 장치(주로 화면을 읽어 소리로 출력해 주는 장치)에서 사용할 CSS를 정의힌다.

braille

점자 표시 장치에서 사용할 CSS를 정의힌다.

handheld

패드(pad)처럼 손에 들고 다니는 장치를 위한 CSS를 정의힌다.

projection

프로젝터를 위한 CSS를 정의한다.

tty

디스플레이 기능이 제한 된 장치에 맞는 CSS를 정의한다. 이런 장치에서는 픽셀 단위를 사용할 수 없다.

embossed

점자 프린터에서 사용할 CSS를 정의한다.

예를 들어 화면용 스타일과 인쇄용 스타일을 따로 만든다면 다음과 같이 미지어 쿼리를 지정할 수 있다.

@madia screen { /* 화면용 스타일 작성 */
	......
}
@madia print { /* 인쇄용 스타일 작성 */
	......
}

웹 문서의 가로 너비와 세로 높이 속성

실제 웹 문서 내용이 화면에 나타나는 영역을 뷰포트라고 하는데, 뷰포트의 너비와 높이를 미디어의 쿼리의 조건으로 사용할 수 있다. 이때 높잇값은 미디어에 따라 달라지므로 주의해야 한다.

가로 너비와 세로 높이를 지정할 때 사용하는 속성은 다음과 같다.

종류
설명

width, height

웹 페이지의 가로 너비, 세로 높이를 지정한다.

min-width, min-height

웹 페이지의 최소 너비, 최소 높이를 지정한다.

max-width, max-height

웹 페이지의 최대 너비, 최대 높이를 지정한다.

예를 들어 너비가 1440px 이상일 때 미디어 쿼리는 다음과 같이 지정한다.

/*기본형*/
@media screen and (mid-width: 1440px) { /* 너비가 최소 1440px인 화면용 스타일 */
	......
}

단말기의 가로 너비와 세로 높이 속성

단말기의 너비와 높이는 단말기 브라우저 창의 너비와 높이를 말한다. 이때 주의점은 대부분의 단말기 해상도와 실제 브라우저의 너비가 다르다는 것이다. 단말기의 너비나 높이를 고려해 미디어 쿼리를 작성해야 한다면 다음과 같은 속성을 사용한다.

종류
설명

device-width, device-height

단말기의 가로 너비, 세로 높이를 지정한다.

min-device-width, min-device-height

단말기의 최소 너비, 최소 높이를 지정한다.

max-device-width, max-device-height

단말기의 최대 너비, 최대 높이를 지정한다.

화면 회전 속성

스마트폰이나 태블릿에서는 화면을 세로로 보거나 가로로 돌려서 볼 수 있다. 미디어 쿼리에서 orientation 속성을 사용하면 기기의 방향을 확인할 수 있고, 그에 따라서 웹 사이트의 레이아웃을 바꿀 수 있다. orientation 속성 값으로는 portrait과 landscape이 있다. 가로 모드는 landscape이고, 세로 모드는 portrait이며, 기본값은 landscape이다. 다음은 기기의 방향을 확인할 때 사용하는 화면 회전 속성의 종류이다.

종류
설명

orientation: portrait

단말기의 세로 모드를 지정한다.

orientation: landscape

단말기의 가로 모드를 지정한다.

이 외에도 화면 비율이나 단말기 화면 비율, 색상당 비트 수 같은 여러 가지 미디어 쿼리 조건이 있다.

미디어 쿼리의 중단점

미디어 쿼리를 작성할 때 화면 크기에 따라 서로 다른 CSS를 적용할 분기점을 중단점이라고 한다. 이 중단점을 어떻게 지정하느냐에 따라 CSS가 달라지고 화면 레이아웃이 바뀌는데, 대부분 기기의 화면 크기를 기준으로 한다. 하지만 시중에 나온 모든 기기를 반영할 수 없으므로 모바일과 태블릿, 데스크톱 정도로만 구분하는 것이 좋다. 그리고 처리 속도나 화면 크기 등에서 다른 기기보다 모바일의 제약 조건이 더 많으므로 모바일의 레이아웃을 기본으로 하여 CSS를 만든다. (모바일용 CSS는 태블릿과 데스크톱에도 기본으로 적용된다.) 그러고 나서 사양이 좀 더 좋고 화면이 큰 태블릿과 데스크톱에 맞춰 더 많은 기능과 스타일을 적용한다. 이렇게 모바일을 먼저 고려하여 미디어 쿼리를 작성하는 것을 모바일 퍼스트 기법이라고 한다. 미디어 쿼리를 작성할 때 주어진 조건에 따라 여러 중단점을 만들 수 있지만, 크게 다음과 같이 모바일과 태블릿, 데스크톱으로 구분한다. 하지만 이 중단점 역시 개발자나 작업조건에 따라 달라질 수 있다.

스마트폰 : 모바일 페이지는 미디어 쿼리를 사용하지 않고, 기본 CSS로 작성한다. 만일 스마트폰의 방향까지 고려해서 제작한다면 mid-width의 세로와 가로를 각각 portrait 320px, landscape 480px로 지정한다. 태블릿 : 세로 크기가 768px 이상이면 태블릿으로 지정한다. 가로 크기는 데스크톱과 똑같이 1024px 이상으로 지정한다. 데스크톱 : 화면 크기 1024px 이상이면 데스크톱으로 설정한다.

미디어 쿼리 적용하기

미디어 쿼리가 어떻게 구성되는지 알았으니 이제 웹 문서에 적용해보자. 적용하는 방법은 크게 외부 CSS 파일로 연결하는 방법과 웹 문서에 직접 정의하는 방법이 있다.

외부 CSS 파일 연결하기

외부 CSS 파일을 따로 저장해서 웹 문서에 연결하는 방법을 알아보자. 이 방법은 각 조건별로 CSS 파일을 따로 저장한 뒤 <link> 태그나 @import 문을 사용해서 연결한다. 먼저 외부 CSS 파일을 연결할 때 가장 많이 사용하는 <link> 태그를 알아보자. <link> 태그는 <head>와 </head> 태그 사이에 넣는다. 다음 기본형의 의미는 미디어 쿼리 조건이 맞다면 지정한 CSS 파일을 가져와서 적용하라는 것이다. 속성의 순서는 상관없다.

<!--기본형-->
<link rel="stylesheet" media="미디어 쿼리 조건" href="CSS 파일 경로">
<!--example-->
<link rel="stylesheet" media="print" href="css/print.css">

외부 CSS 파일을 연결하는 또 다른 방법으로 <link> 태그 대신 @import 문을 사용할 수 있다. @import 문은 CSS를 정의하는 <style>과 </style> 태그 사이에서 다음과 같이 사용한다.

/*기본형*/
@import url(css 파일 경로) 미디어 쿼리 조건
/*example*/
@import url("css/tablet.css") only screen and (mid-width: 321px) and (max-width: 768px);

`` 태그와 `@import` 문은 모두 외부에서 CSS 파일을 가져와 사용하는 방법이다. CSS 파일이 한두 개밖에 없다면 속도나 처리 면에서는 큰 차이가 없습니다. 그런데 인터넷 익스플로러의 경우 `@import`문과 자바스크립트가 함께 있을 경우 자바스크립트를 먼저 내려받은 후에 `@import`문에 있는 CSS를 다운로드한다. 따라서 자바스크립트에서 스타일과 관련된 정보를 처리해야 할 경우 오류가 날 수도 있다. 그래서 CSS 파일이 많고 규모가 큰 사이트를 개발한다면 `@import`문보다 `` 태그를 주로 사용한다.

웹 문서에 직접 정의하기

이번에는 외부 CSS 파일을 만들지 않고 웹 문서에서 미디어 쿼리를 직접 지정하는 방법을 알아보자. 웹 문서에서 미디어 쿼리를 직접 정의하는 방법은 다음 2가지이다. 첫 번째 방법은 <style> 태그 안에서 media 속성을 사용하여 조건을 지정하고, 그 조건에 맞는 스타일 규칙을 정의하는 것이다.

<!--기본형-->
<style media="<조건>"> {
	<스타일 규칙>
}
</style>

<!--example-->
<style media="screen and (max-width: 320px)">
	body {
		background-color: orange;
	}
</style>

두 번째 방법은 스타일을 선언할 때 @media 문을 사용해 각 조건별로 스타일을 지정해 놓고 스타일을 선택해서 적용하는 것이다. @media 문을 사용하는 기본형은 다음과 같다.

<!--기본형-->
<style>
	@media <조건> {
		<스타일 규칙>
	}
</style>
<!--example-->
<style>
	@media screen and (max-width: 320px) {
		body {
			background-color: orange;
		}
	}
</style>

첫 번째 방법은 하나의 <style> 태그 안에서 하나의 조건을 지정하지만, 두 번째 방법은 <style> 태그 안에 여러 개의 조건에 따른 스타일을 모두 나열해 놓고 그중에서 선택헤서 사용한다.

12-3 그리드 레이아웃 알아보기

그리드 레이아웃이란

반응형 웹 디자인을 사용한 사이트는 화면 너비에 따라 웹 문서의 요소를 재배치해야 한다. 재배치하려면 기준이 되는 레이아웃이 필요한데 이때 그리드 레이아웃을 사용한다. 그리드 레이아웃이란 웹 사이트를 여러 개의 칼럽으로 나눈 후 메뉴나 본문, 이미지 등의 웹 요소를 화면에 맞게 배치하는 것을 말한다. 그리드 레이아웃을 사용하면 화면을 규칙적으로 배열하므로 레이아웃을 일관성 있게 유지할 수 있다. 우리가 자주 이용하는 여러 웹 사이트에서도 그리드 레이아웃을 많이 사용한다. 먼저 그리드 레이아웃의 3가지 특징을 살펴보자

시각적으로 안정된 디자인을 만들 수 있다.

그리드 레이아웃을 사용한 웹 사이트 디자인은 사용자에게 안정감을 준다. 이미 책이나 신문 등 여러 시각 매체에서는 대부분 그리드 레이아웃을 사용하고 있다. 그러므로 우리의 눈은 한 화면을 여러 개의 칼럼으로 구성해서 밑으로 늘어뜨리는 그리드 레이아웃에 익숙하다.

업데이트가 편한 웹 디자인을 구성할 수 있다.

그리드 레이아웃을 이용하면 실제 내용을 넣지 않은 상태에서도 사이트 레이아웃을 미리 만들어 볼 수 있다. 사이트나 콘텐츠 영역의 너비, 각 요소의 위치 등 사이트 구조를 먼저 만들어 놓고 나중에 내용을 채워 넣을 수 있다. 이렇게 사이트를 만들면 나중에 내용을 업데이트 하기도 쉽다.

요소를 자유롭게 배치할수 있다.

<div>나 <p> 같은 블록 레벨 요소는 한 줄에 하나의 요소만 배치할 수 있다. 그러나 그리드 레이아웃을 사용하면 한 줄에 여러 요소를 배치할 수도 있고, 중요한 내용은 좀 더 넓은 공간에 두어 사용자에게 잘 보이게 할 수도 있다.

그리드 레이아웃을 만드는 방법

반응형 웹 디자인에 적합한 그리드 레이아웃을 만드는 방법은 여러 가지가 있다. 기존에 알고 있던 가변 그리드를 CSS의 float 속성으로 사용할 수도 있고, 플렉서블 박스 레이아웃이나 CSS 그리드 레이아웃으로 적용할 수도 있다.

플렉서블 박스 레이아웃

플렉서블 박스 레이아웃은 그리드 레이아웃을 기본으로 하고 각 박스를 원하는 위치에 따라 배치하는 것이다. 이때 여유 공간이 생길 경우 너비나 높이를 적절하게 늘이거나 줄일 수도 있다. 플렉서블 박스 레이아웃은 흔히 플렉스 박스 레이아웃이라고도 한다. 플렉스 박스는 수평 방향이나 수직 방향 중 한 쪽을 주축으로 정하고 박스를 배치한다.

CSS 그리드 레이아웃

그리드 레이아웃을 많이 사용하면서 플렉스 박스에 이어 CSS 그리드 레이아웃이라는 새로운 CSS 표준이 만들어졌다. 플렉스 박스를 사용할 때는 '주축'이라는 개념이 있어서 수평이나 수직 중 하나를 기준으로 해서 요소를 배치한다. 하지만 CSS 그리드 레이아웃은 수평과 수직 어느 방향이든 배치할 수 있다. CSS 그리드 레이아웃은 대부분 모던 브라우저에서 사용할 수 있다.

플렉스 박스 레이아웃 알아보기

플렉스 박스 레이아웃에서 사용하는 용어

플렉스 박스 레이아웃은 그리드 레이아웃을 기본으로 해서 새로 등장한 개념이므로 알아 둬야 할 새로운 용어가 많다. 아래를 참고해서 플렉스 박스 레이아웃에 대해 알아보자.

image

플렉스 박스 항목을 배치하는 속성

플렉스 박스에는 플렉스 항목이 여러 개 있는데 일괄적으로 한꺼번에 배치할 수도 있고, 주축이나 교차축 기준으로 다양하게 배치할 수도 있다.

종류
설명

justyfy-content

주축 방향의 정렬 방법이다.

align-items

교차축 방향의 정렬 방법이다.

align-self

교차축에 있는 개별 항목의 정렬 방법이다.

align-content

교차축에서 여러 줄로 표시된 항목의 정렬 방법이다.

플렉스 컨테이너를 지정하는 display 속성

플렉스 박스 레이아웃을 만드려면 먼저 웹 콘텐츠를 플렉스 컨테이너로 묶어 주어야 한다. 즉, 배치할 웹 요소가 있다면 그 요소를 감싸는 부모 요소를 만들고, 그 부모 요소를 플렉스 컨테이너로 만들어야 한다. 이때 특정 요소가 플렉스 컨테이너로 동작하려면 display속성을 이용해 이 부분에 플렉스 박스 레이아웃을 적용하겠다고 지정해야 한다. 플렉스 컨테이너를 지정하는 display의 속성값은 다음과 같다.

종류
설명

flex

컨테이너 안의 플렉스 항목을 블록 레벨 요소로 배치한다.

inline-flex

컨테이너 안의 플렉스 항목을 인라인 레벨 요소로 배치한다.

플렉스 방향을 지정하는 flex-direction 속성

플렉스 컨테이너 안에서 플렉스 항목을 배치하는 주축과 방향을 지정하는 속성이다. 사용할 수 있는 속성값은 다음과 같다.

종류
설명

row

주축을 가로로 지정하고 왼쪽에서 오른쪽으로 배치한다. 기본값이다.

row-reverse

주축을 가로로 지정하고 반대로 오른쪽에서 왼쪽으로 배치한다.

column

주축을 세로로 지정하고 위쪽에서 아래쪽으로 배치한다.

column-reverse

주축을 세로로 지정하고 아래쪽에서 위족으로 배치한다.

플렉스 항목의 줄을 바꾸는 flex-wrap 속성

flax-wrap 속성은 플렉스 컨테이너 너비보다 많은 플렉스 항목이 있을 경우 줄을 바꿀지 여부를 지정한다. flex-wrap에서 사용할 수 있는 속성값은 다음과 같다.

종류
설명

nowrap

플렉스 항목을 한 줄레 표시한다. 기본값이다.

wrap

플렉스 항목을 여러 줄에 표시한다.

wrap-reverse

플렉스 항목을 여러 줄에 표시하되, 시작점과 끝점이 바뀐다.

배치 방향과 줄 바꿈을 한꺼번에 지정하는 flex-flow 속성

flex-flow 속성은 flex-direction 속성과 flex-wrap 속성을 한꺼번에 지정하여 플렉스 항목의 배치 방향을 결정하거나 줄을 바꾼다. 기본값은 row nowrap이다.

주축 정렬 방법을 지정하는 justify-content 속성

justify-content 속성은 주축에서 플렉스 항목 간의 정렬 방법을 지정한다. 사용할 수 있는 justify-content의 속성값은 다음과 같다.

종류
설명

flex-start

주축의 시작점에 맞춰 배치한다.

flex-end

주축의 끝점에 맞춰 배치한다.

center

주축의 중앙에 맞춰 배치한다.

space-between

첫 번째 항목과 끝 항목을 주축의 시작점과 끝점에 배치한 후 나머지 항목은 그 사이에 같은 간격으로 배치한다.

space-between

첫 번째 항목과 끝 항목을 주축의 시작점과 끝점에 배치한 후 나머지 항목은 그 사이에 같은 간격으로 배치한다.

space-around

모든 항목을 주축에 같은 간격으로 배치한다.

교차축 정렬 방법을 지정하는 align-items 속성

justify-content 속성이 주축에서 항목을 정렬하는 방법이라면, align-items 속성은 교차축을 기준으로 플렉스 항목을 정렬한다. align-items의 속성값은 다음과 같다.

종류
설명

flex-start

교차축의 시작점에 맞춰 배치한다.

flex-end

교차축의 끝점에 맞춰 배치한다.

center

교차축의 중앙에 배치한다.

baseline

교차축의 문자 기준선에 맞춰 배치한다.

stretch

플렉스 항목을 늘려 교차축에 가득 차게 배치한다.

특정 항목만 정렬 방법을 지정하는 align-self 속성

align-item 속성은 교차축을 기준으로 플렉스 항목의 정렬 방법을 결정하지만 그중에서 특정 항목을 지정하고 싶다면 align-self 속성을 사용한다. 그래서 align-item 속성은 플렉스 컨테이너를 지정하는 선택자에서 사용하지만 align-self 속성은 플렉스 항목 선택자에서 사용한다. align-self 속성에서 사용하는 값은 align-items 속성에서 사용하는 값과 같다.

여려 줄일 때 교차축 정렬 방법을 지정하는 align-content 속성

주축에서 줄 바꿈이 생격서 플렉스 항목을 여러 줄로 표시할 때 align-content 속성을 사용하면 교차축에서 플렉스 항목 간의 간격을 지정할 수 있다.

종류
설명

flex-start

교차축의 시작점에 맞춰 배치한다.

flex-end

교차축의 끝점에 맞춰 배치한다.

center

교차축의 중앙에 맞춰 배치한다.

space-between

첫 번째 항목과 끝 항목을 교차축의 시작점과 끝점에 맞추고 나머지 항목은 그 사이에 같은 간격으로 배치한다.

space-around

모든 항목을 교차축에 같은 간격으로 배치한다.

stretch

플렉스 항목을 늘려서 교차축에 가득 차게 배치한다.

플렉스 레이아웃을 활용해 항상 중앙에 표시하기

그동안 CSS를 사용해서 화면 요소를 세로 방향으로 중앙에 배치하는 것이 까다로웠는데, 플렉스 박스 레이아웃을 사용하면 간단해진다.

12-5 CSS 그리드 레이아웃 사용하기

CSS 그리드 레이아웃에서 사용하는 용어

플렉스 박스 레이아웃에서는 플렉스 항목을 배치할 때 가로나 세로 중에서 하나를 주축으로 배치했다. 반면 CSS 그리드 레이아웃에서는 그리드 항목을 배치할 때 가로와 세로를 모두 사용한다. 그래서 플렉스 항목은 1차원이고 CSS 그리드 레이아웃은 2차원이라고 한다. CSS 그리드 레이아웃은 가로 방향을 가리키는 줄과 세로 방향을 가리키는 칼럼으로 웹 화면을 구성한다. 그리고 칼럼과 칼럼 사이, 줄과 줄 사이의 간격을 지정해서 원하는 형태의 레이아웃을 만든다.

CSS 그리드 레이아웃 항목을 배치하는 속성

CSS 그리드 레이아웃은 가장 최근에 제안된 그리드 레이아웃 제작 방법이다. CSS 그리드 레이아웃을 만들 때 사용하는 속성을 하나하나 살펴보자.

그리드 컨테이너늘 지정하는 display 속성

그리드 레이아웃을 지정할 때에는 가장 먼저 그리드를 적용할 요소의 바깥 부분을 그리드 컨테이너로 만들어야 한다. 그리드 컨테이너를 만들 때는 display 속성을 grid나 inline-grid로 지정한다.

종류
설명

grid

컨테이너 안의 항목을 블록 레벨 요소로 배치한다.

inline-grid

컨테이너 안의 항목을 인라인 레벨 요소로 배치한다.

칼럼과 줄을 지정하는 grid-template-columns, grid-template-rows 속성

그리드 컨테이너 안에 항목을 배치할 때 칼럼과 줄의 크기와 개수를 지정하려면 grid-template-columns 속성과 grid-template-rows 속성을 각각 사용한다. grid-template-columns 속성은 그리드 컨테이너 안의 항목을 몇 개의 칼럼으로 배치할지, 각 칼럼의 너비를 얼마로 할지 지정한다.

상대적인 크기를 지정하는 fr 단위

그리드 레이아웃에서 칼럼이나 줄의 크기를 지정할 때 픽셀을 이용하면 항상 크기가 고정되므로 반응형 웹 디자인에는 적합하지 않다. 그래서 그리드 레이아웃에서는 상대적인 크기를 지정할 수 있도록 fr 단위를 사용한다.

예를 들어 칼럼을 2 : 1 : 2로 배치하고 싶다면 다음과 같이 지정한다.

grid-template-colums: 2fr 1fr 2fr;

값이 반복될 때 줄여서 표현할 수 있는 repeat() 함수

px나 fr 단위를 사용하면 똑같은 값을 여러 번 반복해야 한다. CSS 그리드 레이아웃에는 내장된 repeat()이라는 함수를 사용하면 반복하지 않고 간단하게 표현할 수 있다.

예를 들어 너비가 같은 칼럼을 3개 배치하려면 1fr을 3번 사용하는데, repeat()함수를 사용하면 다음과 같이 간단하게 작성할 수 있다.

grid-template-columns: repeat(3, 1fr);

최솟값과 최댓값을 지정하는 minmax() 함수

줄 높이를 고정 값으로 지정할 경우 줄 높이보다 내용이 많으면 보이지 않는다. 이럴 때 minmax() 함수를 사용하면 줄 높이를 고정하지 않고 최솟값과 최댓값을 사용해서 유연하게 지정할 수 있다.

/*example*/
#wrapper {
	width: 600px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: minmax(100px, auto);
}
/*너비가 같은 칼럼 3개 반복, 줄 높이는 최소 100, 내용이 많아도 다 표시할 수 있도록 max값을 auto로 지정*/

자동으로 칼럼 개수를 조절하는 auto-fill, auto-fit 값

앞에서 repeat() 함수를 사용해서 크기가 같은 칼럼을 반복할 때는 다음과 같이 칼럼의 개수를 지정했다.

grid-template-columns: repeat(3, 1fr);

이때 칼럼의 너빗값과 함께 auto-fit이나 auto-fill을 지정하면 화면 너비에 따라 칼럼 개수를 조절할 수 있다. 예를 들어 다음과 같이 너비가 200px인 칼럼을 화면 너비에 가득 찰 때까지 배치한다.

grid-template-columns: repeat(auto-fit, 200px);

auto-fit이나 auto-fill 모두 칼럼 개수를 자동으로 조절해 주므로 화면이 넓어지면 칼럼 개수가 많아지고, 반대로 화면이 좁아지면 칼럼 개수가 줄어든다. 두 값의 차이점은 남는 공간을 다 채울지 말지 여부에 달렸다.

그리드 항목의 간격을 지정하는 grid-column-gap, grid-row-gap, grid-gap 속성

항목과 항목 사이의 간격을 조절하려면 다음과 같은 속성을 사용한다.

종류
설명

grid-column-gap

칼럼과 칼럼 사이의 간격을 지정한다.

grid-row-gap

줄과 줄 사이의 간격을 지정한다.

grid-gap

칼럼과 줄 사이의 간격을 한꺼번에 지정한다.

/*example*/
grid-row-gap: 20px;
grid-column-gap: 30px;

grid-gap을 이용해 간격을 한꺼번에 지정할 수도 있는데, 이때 첫 번째 값은 grid-row-gap에 해당하고 두 번째 값은 grid-column-gap에 해당한다. 즉, 위의 예시는 다음과 같이 작성할 수 있다.

/*example*/
grid-gap: 20px 30px;

이 외에도 플렉스 박스 레이아웃에서 살펴보았던 justify-content나 align-content 같은 속성을 사용하여 그리드 레이아웃의 항목을 정렬할 수 있다.

그리드 라인을 이용해 배치하기

그리드 레이아웃은 눈에 보이지 않는 그리드 라인이 포함되어 있다. 예를 들어 칼럼 3개와 줄 3개로 이루어진 그리드 레이아웃을 생각해보자. 다음 그림처럼 칼럼 라인은 앞에서부터 차례로 1, 2, 3, 4 번호가 매겨지므로 총 4개이다. 마찬가지로 줄에서도 총 4개의 라인이 있다.

image

이 그리드 라인을 이용해서 그리드 항목을 배치할 수 있는데, 이때 사용하는 속성은 다음과 같다.

종류
설명

grid-column-start

대상의 시작 칼럼 라인 번호를 지정한다.

grid-column-end

대상의 마지막 칼럼 라인 번호를 지정한다.

grid-column

칼럼 시작 번호와 칼럼 끝 번호 사이에 슬래시를 넣어 사용한다.

grid-row-start

대상의 시작 줄 라인 번호를 지정한다.

grid-row-end

대상의 마지막 줄 라인 번호를 지정한다.

grid-row

줄 시작 번호외 줄 끝 번호 사이에 슬래시를 넣어 사용한다.

템플릿 영역을 만들어 배치하기

앞에서 살펴본 그리드 라인은 시작 번호와 끝 번호를 일일이 지정해서 레이아웃을 만들어야 했다. 템플릿 영역으로 항목을 배치하면 그리드 레이아웃을 만드는 것보다 더 쉽다.로 맨 먼저 grid-area 속성을 사용해서 각 영역에 템플릿 이름을 지정해준다. 이어서 컨테이너로 사용하는 요소에서 grid-template-areas 속성을 사용해 템플릿 영역을 어떻게 배치할지 지정한다. 템를릿 영역을 비워 두려면 그 자리에 마침표를 넣는다. 한 줄에 들어갈 템플릿 영역을 큰따옴표로 묶어주면 되는데, 한 줄마다 줄 바꿈을 하면 마치 눈으로 보듯 템플릿 영역을 나열할 수 있어서 좀 더 쉽게 작성할 수 있다.

PreviousChapter 11NextChapter 13

Last updated