[반응형웹] 모바일 퍼스트 CSS 작성하기 / 데스크탑 퍼스트

모바일 사용자가 점점 늘어나면서 반응형 브라우저의 중요성이 날로 커지고 있다. 반응형 웹 작업을 할 때에는 CSS 미디어 쿼리가 필수인데, 미디어 쿼리 작성 방법에도 종류가 있다. 어떤 디바이스를 우선으로 할 것이냐에 따라서 크게 나뉘는데 각 방법을 알아보고 상황에 맞게 작성하는 것을 추천한다.

 

 

 

목차

1. 뷰포트 Viewport
2. 모바일 퍼스트 Mobile first
3. 데스크탑 퍼스트 Desktop first
4. Overriding(덮어쓰기) 없이 해상도마다 지정

 

 

 

뷰포트 Viewport

우선 반응형 웹페이지를 작업하기 전에 꼭 준비해야 하는 사항이 있는데, 바로 Viewport이다. head 태그 사이에 meta viewport 태그를 넣어주어야 한다. Viewport를 작성하는 이유는 웹 페이지를 여러 디바이스 크기에 맞는 비율로 보여주기 위함이다. meta viewport는 애플에서 자사 디바이스에 맞는 뷰포트 사이즈 조절에 대응하기 위해 만든 것이므로 W3C에서 만든 표준은 아니다. 하지만 다른 여러 브라우저에서도 채택하게 되면서 표준처럼 쓰이고 있다.

 

<!-- 디바이스 너비에 따라 뷰포트 지정 -->
<meta name="viewport" content="width=device-width">

 

 

 

모바일 퍼스트 Mobile first

퍼블리싱에서 하위 브라우저 지원은 중요한 개념인데, 우리가 흔히 사용하는 CSS 미디어 쿼리의 경우도 지원이 되지 않는 하위 브라우저가 있으므로 이에 유의해야 한다. 해결 방법으로는 모바일 퍼스트로 CSS를 작성하는 것이다. 모바일을 우선으로 작성하게 되면 모바일 CSS가 기본이고 PC, Tablet에서 미디어 쿼리를 쓰므로 모바일에서 레이아웃이 깨지지 않는다. 분기점이 낮은 순서부터 작성하면 된다. 분기점이 높아질수록 Overriding(덮어쓰기) 방식으로 적용된다.

 

미디어 쿼리는 min-width 방식을 사용한다.

 

 

모바일 퍼스트 CSS 작성 순서

1. 모든 디바이스의 해상도에서 적용될 공통 CSS를 작성한다.
2. 모바일 디바이스의 해상도에서만 적용될 CSS를 작성한다. (768px 미만)
3. 태블릿과 데스크탑 해상도에서만 적용될 CSS를 작성한다. (768px 이상)
4. 태블릿 디바이스 해상도에서만 적용될 CSS를 작성한다. (768px 이상 1024px 이하)
5. 데스크톱 디바이스 해상도에서만 적용될 CSS를 작성한다. (1025px 이상)

 

 

 

데스크탑 퍼스트 Desktop first

미디어 쿼리는 max-width 방식을 사용한다. 분기점이 높은 순서부터 작성한다. 분기점이 낮아질수록 Overriding(덮어쓰기) 방식으로 적용된다.

 

 

 

Overriding(덮어쓰기) 없이 해상도마다 지정

미디어 쿼리는 min-width와 max-width를 같이 사용한다. 모바일 퍼스트나 데스크탑 퍼스트처럼 뒤에 오는 CSS가 덮어쓰기 되는 게 아니라 디바이스 해상도별로 정확히 미디어 쿼리 범위를 지정해서 중복되는 분기점이 없도록 작성하는 방법이다.