1. 개요
반응형 디자인이란 웹 문서가 모든 화면 크기와 해상도에서 잘 렌더링되도록 하면서도 사용성을 보장하는 웹 디자인 접근 방식을 말한다.
웹 문서를 탐색하는 디바이스가 모바일, 태블릿, PC 등 다양해지면서 반응형 디자인의 필요성이 대두되었다.
어떤 디바이스에서 컨텐츠를 보더라도 화면에 맞게 자동으로 조절하는 방법을 다룬다.
2. 미디어 쿼리
미디어 쿼리(@media)를 사용하면 조건에 따라 CSS를 선택적으로 적용하여 사용자의 요구에 맞게 문서 스타일을 지정할 수 있다.
예를 들어 뷰포트의 너비가 80rem 이상인지 확인한 후 조건이 참인 경우 CSS를 적용하는 방식이다.
예시는 아래와 같다.
@media screen and (min-width: 80rem) {
.container {
margin: 1em 2em;
}
}위 코드는 현재 웹 문서가 화면 미디어로 표시되고 있고(인쇄된 문서 x) 뷰포트의 너비가 80rem 이상일 때 적용된다.
3. 반응형 레이아웃
반응형 문서는 유연한 그리드를 기반으로 구축되므로 픽셀 단위의 완벽한 레이아웃으로 가능한 모든 기기의 크기를 타겟팅할 필요는 없다.
flexbox, grid, 다단 레이아웃 등 여러 레이아웃 방식이 기본적으로 반응형이다.
3.1. flexbox
flexbox에서 item은 컨테이너의 공간에 따라 항목 사이의 공간을 분배하여 스스로 축소 또는 증가한다.
flex-grow, flex-shrink 값을 적용해 주변에 공간이 많거나 적을 때 item이 어떻게 동작할지 지정할 수 있다.
.container {
display: flex;
}
.item {
flex: 1;
}위 코드는 flexbox에서 각 item이 화면 크기에 따라 각각 동일한 공간을 차지하게 한다.
3.2. grid
grid에서 fr 단위는 item에 사용 가능한 공간을 분배할 수 있게 한다.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}위 코드는 1fr 크기의 item 3개가 있는 그리드 컨테이너를 생성한다.
화면 크기에 따라 각각 동일한 공간을 차지한다.
3.3. 다단 레이아웃
다단 레이아웃을 사용하면 컨텐츠를 분할할 최대 열 수를 나타내는 column-count를 지정할 수 있다.
브라우저에서 화면 크기에 따라 변경되는 크기를 계산한다.
.container {
column-count: 3;
}브라우저는 컨테이너에 편안하게 들어갈 수 있는 해당 숫자만큼의 열을 생성한다.
화면이 좁아지면 최소 1개의 열이 생성되고, 화면이 충분히 넓어지면 증가한다.
값을 3으로 설정했기 때문에 3개를 초과하지는 않는다.
4. 반응형 이미지
미디어가 반응형 컨테이너보다 크지 않도록 하기 위해서 다음과 같이 설정할 수 있다.
img, picture, video {
max-width: 100%;
}[MDN Study] HTML의 반응형 이미지에서 반응형 이미지에 대해 더 자세히 알 수 있다.
5. 반응형 타이포그래피
미디어 쿼리 내에서 글꼴 크기를 변경하거나 뷰포트 단위를 사용해 공간을 더 작게 혹은 더 넓게 반영할 수 있다.
5.1. 미디어 쿼리 적용하기
html {
font-size: 1em;
}
h1 {
font-size: 2rem;
}
@media (min-width: 1200px) {
h1 {
font-size: 4rem;
}
}위 코드는 뷰포트의 너비가 1200px 이상일 때 h1의 글꼴 크기를 4rem으로 지정한다.
5.2. 뷰포트 단위 사용하기
뷰포트 단위 vw를 사용하여 미디어 쿼리를 사용할 필요 없이 반응형 타이포그래피를 구현할 수 있다.
1vw는 뷰포트 너비의 1%에 해당하므로 vw를 사용하면 항상 뷰포트의 크기와 관련시킬 수 있다.
h1 {
font-size: 6vw;
}위 코드는 글꼴 크기를 항상 뷰포트 너비의 6%로 설정한다.
그래서 사용자가 텍스트를 따로 확대·축소할 수 없다는 단점이 있다.
calc() 함수를 사용하여 해결할 수 있다.
h1 {
font-size: calc(1.5rem + 3vw);
}em 또는 rem과 같은 고정 크기를 사용하여 설정된 값에 vw를 추가하면 텍스트를 확대·축소할 수 있다.
기본적으로 vw 단위는 확대된 값 위에 추가된다.
6. 뷰포트 <meta> 요소
반응형 문서의 HTML 소스를 보면 일반적으로 <head>에 다음과 같은 <meta> 태그를 볼 수 있다.
<meta name="viewport" content="width=device-width, initial-scale=1" />이 뷰포트 메타 요소는 모바일 브라우저에 뷰포트의 너비를 기기 너비로 설정하고
문서의 크기를 의도한 크기의 100%로 조정하여 문서를 모바일에 최적화된 크기로 표시해야 함을 알려준다.
위의 설정이 필요한 이유는 모바일 브라우저가 제공하는 뷰포트 너비를 신뢰할 수 없기 때문이다.
문서 <head>에 뷰포트 메타 요소를 항상 포함해야 한다.
자세한 이유는 아래 출처의 뷰포트 메타 태그 부분을 참고한다.