반응형 디자인

미디어 쿼리 사용하기를 사용하면 일련의 테스트(예: 사용자의 화면이 특정 너비 또는 특정 해상도보다 큰지 여부)를 실행하고 CSS를 선택적으로 적용하여 사용자의 요구에 맞게 페이지의 스타일을 지정할 수 있습니다.

예를 들어, 다음 미디어 쿼리는 현재 웹 페이지가 화면 미디어로 표시되고 있고(따라서 인쇄된 문서가 아님) 뷰포트의 너비가 80rem 이상인지 테스트합니다. .container 선택기에 대한 CSS는 이 두 가지가 참인 경우에만 적용됩니다.

@media screen and (min-width: 80rem) {
  .container {
    margin: 1em 2em;
  }
}

스타일시트 내에 여러 미디어 쿼리를 추가하여 다양한 화면 크기에 가장 적합하도록 전체 레이아웃 또는 일부를 조정할 수 있습니다. 미디어 쿼리가 도입되고 레이아웃이 변경되는 지점을 breakpoints(분기점)라고 합니다.

미디어 쿼리를 사용할 때 일반적인 접근 방식은 화면이 좁은 디바이스(예: 휴대폰)를 위해 간단한 단일 열 레이아웃을 만든 다음 화면이 더 넓은지 확인하고 화면 너비가 충분하다고 판단되면 다중 열 레이아웃을 구현하는 것입니다. 이를 모바일 우선 디자인이라고 합니다.

분기점을 사용하는 경우, 개별 디바이스의 절대 크기보다는 CSS 값과 단위를 사용하여 미디어 쿼리 분기점을 정의하는 것이 모범 사례입니다.

미디어 쿼리 블록 내에 정의된 스타일에 대한 접근 방식은 브라우저 크기 범위에 따라 <link> 스타일 시트에 미디어 쿼리를 사용하는 것부터 각 분기점과 관련된 값을 저장하기 위해 사용자 지정 속성 변수만 포함하는 것까지 다양합니다.

미디어 쿼리에 대한 MDN 문서를 더 찾아보십시요.

반응형 사이트는 유연한 그리드를 기반으로 구축되므로 픽셀 단위의 완벽한 레이아웃으로 가능한 모든 기기 크기를 타겟팅할 필요가 없습니다.

유연한 그리드를 사용하면 기능을 변경하거나 분기점을 추가하여 콘텐츠가 보기 좋지 않게 보이는 지점에서 디자인을 변경할 수 있습니다. 예를 들어 화면 크기가 커짐에 따라 줄 길이가 읽기 힘들 정도로 길어지지 않도록 columns를 사용할 수 있으며, 상자가 좁아지면서 각 줄에 두 단어가 찌그러지는 경우 분기점을 설정할 수 있습니다.

다단 레이아웃, Flexbox, 그리드 등 여러 레이아웃 방식이 기본적으로 반응형입니다. 모두 사용자가 유연한 그리드를 만들려고 한다고 가정하고 더 쉬운 방법을 제공합니다.

다단을 사용하면 콘텐츠를 분할할 최대 열 수를 나타내는 column-count를 지정할 수 있습니다. 그러면 브라우저에서 화면 크기에 따라 변경되는 크기를 계산합니다.

.container {
  column-count: 3;
}

column-width을 지정하는 대신 minimum 너비를 지정하는 것입니다. 브라우저는 컨테이너에 편안하게 들어갈 수 있는 만큼 해당 너비의 열을 생성한 다음 모든 열 사이에 남은 공간을 공유합니다. 따라서 열의 수는 공간의 양에 따라 변경됩니다.

.container {
  column-width: 10em;
}

columns 단축키를 사용하여 최대 열 수와 최소 열 너비를 지정할 수 있습니다. 이렇게 하면 화면 크기가 커짐에 따라 줄 길이가 읽기 힘들 정도로 길어지거나 화면 크기가 작아짐에 따라 너무 좁아지는 것을 방지할 수 있습니다.

플렉스박스에서 플렉스 항목은 컨테이너의 공간에 따라 항목 사이의 공간을 분배하여 축소 또는 증가합니다. flex-grow 및 flex-shrink 값을 변경하여 주변에 공간이 많거나 적을 때 항목이 어떻게 동작할지 지정할 수 있습니다.

아래 예시에서 플렉스 항목은 레이아웃 항목 플렉스박스: 가변 항목의 가변 크기 조정에 설명된 대로 flex: 1의 약어를 사용하여 플렉스 컨테이너에서 각각 동일한 공간을 차지합니다.

.container {
  display: flex;
}

.item {
  flex: 1;
}

CSS 그리드 레이아웃에서 fr 단위는 그리드 트랙에 사용 가능한 공간을 분배할 수 있게 해줍니다. 다음 예제는 1fr 크기의 트랙 3개가 있는 그리드 컨테이너를 생성합니다. 이렇게 하면 컨테이너에서 사용 가능한 공간의 한 부분을 차지하는 세 개의 열 트랙이 생성됩니다. 그리드를 만드는 이 접근 방식에 대한 자세한 내용은 레이아웃 그리드 배우기 주제의 fr 단위를 포함한 가변 격자 아래에서 확인할 수 있습니다.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

미디어가 반응형 컨테이너보다 크지 않도록 하려면 다음과 같은 방법을 사용할 수 있습니다.

img,
picture,
video {
  max-width: 100%;
}

이렇게 하면 미디어가 컨테이너를 넘치지 않도록 크기를 조정합니다. 하나의 큰 이미지를 사용했다가 작은 디바이스에 맞게 축소하면 필요한 것보다 큰 이미지를 다운로드하여 대역폭이 낭비됩니다.

반응형 이미지는 <picture>와 <img> 요소, srcset 및 sizes 속성을 사용해 사용자의 뷰포트와 디바이스의 해상도에 맞는 이미지를 제공할 수 있습니다. 예를 들어 모바일용 정사각형 이미지를 포함할 수 있지만 데스크톱에서는 가로 이미지와 동일한 장면을 표시할 수 있습니다.

<picture> 요소를 사용하면 "hints"(이미지가 가장 적합한 화면 크기 및 해상도를 설명하는 메타데이터)와 함께 여러 크기를 제공할 수 있으며, 브라우저는 각 디바이스에 가장 적합한 이미지를 선택하므로 사용자가 사용 중인 디바이스에 적합한 이미지 크기를 다운로드할 수 있습니다. max-width와 함께 <picture>을 사용하면 미디어 쿼리로 이미지 크기를 조정할 필요가 없습니다. 이는 다른 화면비의 이미지를 다른 뷰포트 크기에 맞추어 사용할 수 있도록 합니다.

또한 다양한 크기로 사용되는 이미지를 직접 art direct 하여 화면 크기에 따라 다른 자르기 또는 완전히 다른 이미지를 제공할 수도 있습니다.

이곳 MDN 사이트의 반응형 이미지에서 자세한 안내서를 찾을 수 있습니다.

반응형 타이포그래피는 미디어 쿼리 내에서 글꼴 크기를 변경하거나 뷰포트 단위를 사용하여 화면 공간을 더 적게 또는 더 많이 반영하는 것을 설명합니다.

이 예제에서 우리는 수준 1 머리글을 4rem로 설정하려고 합니다. 즉, 기본 글꼴 크기의 4배입니다. 정말 큰 제목이네요! 이 커다란 제목은 더 큰 화면 크기에서만 사용해야 하므로 먼저 더 작은 제목을 만든 다음 사용자의 화면 크기가 1200px 이상인 경우 미디어 쿼리를 사용하여 더 큰 크기로 덮어씁니다.

html {
  font-size: 1em;
}

h1 {
  font-size: 2rem;
}

@media (min-width: 1200px) {
  h1 {
    font-size: 4rem;
  }
}

위의 반응형 그리드 예시를 편집하여 설명한 방법을 사용하여 반응형 유형도 포함하도록 했습니다. 레이아웃이 두 열 버전으로 전환됨에 따라 제목의 크기가 어떻게 전환되는지 확인할 수 있습니다.

모바일에서는 제목이 더 작아집니다.

그러나 데스크톱에서는 제목 크기가 더 크게 표시됩니다.

타이포그래피에 대한 이 접근 방식에서 알 수 있듯이 미디어 쿼리를 페이지 레이아웃 변경에만 제한할 필요는 없습니다. 모든 요소를 조정하여 다른 화면 크기에서 더 유용하거나 매력적으로 보이도록 하는 데 사용할 수 있습니다.

뷰포트 단위 vw를 사용하여 미디어 쿼리로 중단점을 설정할 필요 없이 반응형 타이포그래피를 활성화할 수도 있습니다. 1vw는 뷰포트 너비의 1%에 해당하므로 vw를 사용하여 글꼴 크기를 설정하면 항상 뷰포트의 크기와 관련됩니다.

h1 {
  font-size: 6vw;
}

위와 같이 할 때의 문제점은 텍스트가 항상 뷰포트의 크기와 관련되어 있기 때문에 사용자가 'vw' 단위를 사용하여 설정한 텍스트를 확대/축소할 수 없다는 것입니다. 따라서 뷰포트 단위만 사용하여 텍스트를 설정해서는 안 됩니다.

해결책이 있는데, calc()를 사용하는 것입니다. em 또는 rem과 같은 고정 크기를 사용하여 설정된 값에 vw 단위를 추가하면 텍스트를 계속 확대/축소할 수 있습니다. 기본적으로 vw 단위는 확대된 값 위에 추가됩니다.

h1 {
  font-size: calc(1.5rem + 3vw);
}

즉, 모바일용으로 설정하고 미디어 쿼리에서 다시 정의할 필요 없이 제목의 글꼴 크기를 한 번만 지정하면 됩니다. 그런 다음 뷰포트의 크기를 늘리면 글꼴이 점차 커집니다.

반응형 페이지의 HTML 소스를 보면 일반적으로 문서의 <head>에 다음과 같은 <meta> 태그를 볼 수 있습니다.

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

이 viewport 메타 태그는 모바일 브라우저에 뷰포트의 너비를 기기 너비로 설정하고 문서의 크기를 의도한 크기의 100%로 조정하여 문서를 모바일에 최적화된 크기로 표시해야 함을 알려줍니다.

이것이 왜 필요한가요? 모바일 브라우저는 뷰포트 너비에 대해 거짓말을 하는 경향이 있기 때문입니다.

이 메타 태그가 존재하는 이유는 스마트폰이 처음 등장했을 때 대부분의 사이트가 모바일에 최적화되지 않았기 때문입니다. 따라서 모바일 브라우저는 뷰포트 너비를 980픽셀로 설정하고 해당 너비로 페이지를 렌더링한 후 데스크톱 레이아웃의 축소된 버전으로 결과를 표시했습니다. 사용자는 웹사이트를 확대하고 이동하면서 관심 있는 부분을 볼 수 있었지만 보기가 좋지 않았습니다.

width=device-width를 설정하면 Apple의 기본값인 width=980px와 같은 모바일 디바이스의 기본값을 디바이스의 실제 너비로 재정의하게 됩니다. 이 설정이 없으면 중단점 및 미디어 쿼리가 포함된 반응형 디자인이 모바일 브라우저에서 의도한 대로 작동하지 않을 수 있습니다. 뷰포트 너비가 480픽셀 이하인 좁은 화면 레이아웃이 있는데 기기에서 980픽셀 너비라고 표시되는 경우 해당 사용자는 좁은 화면 레이아웃을 볼 수 없습니다.

따라서 문서 헤드에 뷰포트 메타 태그를 항상 포함해야 합니다.

반응형 디자인이란 보는 환경에 따라 반응하는 사이트 또는 애플리케이션 디자인을 말합니다. 반응형 디자인은 여러 CSS 및 HTML 기능과 기술을 포함하며, 이제는 기본적으로 웹사이트를 구축하는 방식이 되었습니다. 휴대폰으로 방문하는 사이트를 생각해 보세요. 데스크톱 버전이 축소되어 있거나 옆으로 스크롤해야 무언가를 찾을 수 있는 사이트를 접하는 것은 매우 드문 일입니다. 이는 웹이 반응형 디자인 방식으로 전환되었기 때문입니다.

또한 이번 단원에서 배운 레이아웃 방법을 사용하면 반응형 디자인을 훨씬 쉽게 구현할 수 있습니다. 오늘날 웹 개발이 처음이라면 반응형 디자인 초창기보다 더 많은 도구를 사용할 수 있습니다. 따라서 사용 중인 자료의 연도를 확인하는 것이 좋습니다. 과거의 자료는 여전히 유용하지만, 최신 CSS와 HTML을 사용하면 방문자가 어떤 디바이스로 사이트를 보든 우아하고 유용한 디자인을 훨씬 쉽게 만들 수 있습니다.

• 미디어 쿼리에 대한 CSS 요령 가이드

• 이전
• Overview: CSS 레이아웃
• 다음