CSS 반응형 디자인에 대하여

Flex·2022년 2월 25일

HTML/CSS/JS

CSS 모음

목록 보기

13/14

CSS 반응형 디자인에 대하여 정리해보았습니다.
Front-end 개발에 관심이 있다면 한번쯤 들어봤을텐데,
정확히 어떤 개념인지는 알고 가야겠죠?

🥠 반응형 디자인 vs 적응형 디자인

반응형 디자인 = responsive web design

다양한 기기들이 나오고, 다양한 화면 크기가 나오면서 멀티 디바이스 웹에 대한 설계방식이 필요해져 탄생한 개념입니다.

웹 환경에서 우리가 말하는 화면 크기는 브라우저의 크기, 즉 Viewport 를 의미합니다.
보통 PC나 랩탑 등의 기기에서는 가로 모드의 화면을 가지고 있죠.
그런데 스마트폰이나 태블릿 PC는 어떨까요? 지금 내 폰을 한번 쳐다봅시다.

보시는것처럼 세로 모드의 화면에 우리가 PC에서 보는 가로 모드 페이지를 띄우면 당연히 맞지 않을 거에요.
또, 모바일 환경은 해상도 자체도 낮게 설정되어있기 때문에 PC의 웹 환경을 변경하지 않고 그대로 이식시킨다는건 무리입니다.

이처럼 사용자에게 보다 편안한 환경을 제공하기 위해 탄생한 것이 바로 "반응형 디자인" 입니다.

적응형은 반응형의 완벽히 반대인가? 🤔

적응형은 디바이스의 크기와 상관없이 보여지는걸 의미할까요?

정답은 "아닙니다".
반응형은 하나의 웹페이지가 여러 디바이스에서 크기에 맞게 조절되는 것을 의미하는 반면, 적응형은 디바이스마다 적절한 웹페이지를 따로따로 만드는 것을 뜻합니다.

스마트폰이 처음 나올 시점에는 m.address.com 처럼 모바일용 페이지가 따로 존재했음을 생각해보면 이해하기 편할거에요.
즉, 반응형과 적응형은 웹페이지를 디자인하고 렌더링하는 방식의 차이인 것이죠.

대표적인 형상관리 서비스인 Github 사이트에서 반응형이 어떤 것인지 확인해볼 수 있습니다. 사이트에 들어가서 화면을 줄였다 늘렸다 해봅시다!

[ 결과 화면 ]
PC 화면	줄였을 때 화면 (모바일)

Tip - 굳이 화면을 직접 줄이지 않고도 F12(개발자도구) 를 열어서 좌측 상단의 디바이스 토글 버튼을 누르면 여러 기기들에서 화면이 어떻게 보일지 확인해볼 수 있습니다.

아래 링크에서 반응형 디자인의 문서를 확인할 수 있습니다.
🦊 MDN Link - 반응형 디자인

🥠 미디어 쿼리 (Media Query)

미디어 쿼리 = CSS Media Query

뷰포트가 특정 조건을 만족했을 때 CSS 를 적용시키는 문법을 미디어 쿼리라고 부릅니다.
기본적으로는 @media 의 @규칙을 선언하여 사용합니다. 미디어 쿼리 조건에 맞을 경우 CSS 스타일을 적용시키죠.
대부분의 브라우저에서는 미디어 쿼리를 지원하지만, IE 에서만큼은 예외입니다. (역시 안쓰는게 좋아...😨)

미디어 쿼리의 기본 구문은 아래와 같습니다.

@media media-type and (media-feature-rule) {
  /* CSS rules go here */
}

media-type과 뒤쪽에 오는 규칙이 모두 만족해야 안쪽에 있는 CSS 스타일이 적용됩니다.
지정할 수 있는 미디어 타입에는 all, print, screen, speech 들이 있습니다.
media-feature-rule (미디어 조건)에는 보통 max-width 와 min-width 가 가장 많이 사용됩니다.

아래 예제는 뷰포트 즉, 화면이 300px 까지는 배경색을 다르게 적용합니다. screen 미디어 타입을 사용하여 지정해주었습니다.

body {
  background-color: blanchedalmond;
}

@media screen and (max-width: 300px) {
  body{
    background-color: tomato;
  }
}

초기 페이지는 blanchedalmond 배경색을 갖고있다가, 화면 너비가 300px 이하로 줄어들면 tomato 색으로 변경되는것을 확인할 수 있습니다.

[ 결과 화면 ]
초기 페이지	줄였을 때 페이지

아래 링크에서 미디어 쿼리에 대한 문서를 확인할 수 있습니다.
🦊 MDN Link - 미디어 쿼리 안내서

🥠 가로모드, 세로모드?

미디어 쿼리는 가로모드와 세로모드에 따른 스타일 지정에도 많이 쓰입니다.

모바일 기기에서 웹사이트를 사용할 때, 세로 고정을 풀면 가로모드와 세로모드로 사이트가 전환되는 것을 확인할 수 있습니다.
가로/세로모드 전환에 따라 여러 요소들의 모습이나 길이가 바뀌기도 하는데 바로 이런 스타일은 미디어 쿼리에 orientation 규칙으로 적용시킬 수 있습니다.

세로모드 스타일 지정 = portrait
@media screen and (orientation: portrait) {}
가로모드 스타일 지정 = landscape
@media screen and (orientation: landscape) {}

🥠 성능문제에 관하여

html 문서에 css 스타일을 불러오는 태그는 <link> 입니다.
여기에 미디어 쿼리를 적용시켜 조건에 따라 필요한 .css 파일만 적용시킬 수는 없을까요?

결론적으로 가능은 하지만, 성능에 좋은 방법은 아닙니다.
html 문서와 모든 css 파일은 우선 연결된 후, <link> 태그에 들어있는 미디어 조건에 따라 그때그때 다른 파일을 읽고 스타일을 불러오기 때문에 결과적으로 작업을 두번씩 하는것과 같습니다.

위의 내용은 권장하는 방법은 아니며, css 파일에 태그별로 @media 를 적용하도록 합시다!

🥠 breakpoint - 분기 처리

일반적으로 모바일, 태블릿, 데스크탑 기준의 분기 처리가 자주 이루어집니다.
대응하려는 디바이스가 많아질수록 breakpoint 도 많아지겠죠?

breakpoint 는 이처럼 디바이스의 환경에 따라 다른 미디어 조건을 선언하는 것을 뜻합니다.
아래 예제를 보면 더욱 이해가 쉬울거에요.

Example

/* 모바일 퍼스트 */
@media screen and (min-width: 480px) {
  body {
    background-color: lightpink;
  }
}

@media screen and (min-width: 768px) {
  body {
    background-color: orangered;
  }
}

@media screen and (min-width: 1024px) {
  body {
    background-color: slateblue;
  }
}

위 예제에서 스크린(viewport)의 너비가 각각 480px, 768px, 1024px 일 경우 스타일이 바뀌게 되는데, 저 세 가지 조건들이 breakpoint가 되는 것입니다.