[CSS] 미디어 쿼리 활용하기

미디어 쿼리(Media Query)란?

사용하는 기기의 해상도에 따라 CSS를 분기시키는 기법이며, PC 이외에도 스마트폰이나 태블릿 PC 등 다양한 기기에서 웹 서핑을 하는 사람들을 위한 반응형 프로젝트에 반드시 필요하다.

---

01. <link ~ media="">

<link rel="stylesheet" media="all and (min-width: 1000px)" href="style_pc.css">

최소 가로폭이 1000px, 즉 1000px보다 넓은 해상도일 때 style_pc.css를 연결한다는 뜻이다.

태블릿이나 모바일 기기마다 가로폭은 다르며 Chrome의 개발자 도구의 Toggle device toolbar를 누르면 기기마다의 해상도가 등록되어 있고 기기 모델 추가도 가능하다.

모바일 기기별 해상도

모바일 기기	가로	세로
iPhone X	375	812
iPhone 6, 7, 8	375	667
iPhone 6, 7, 8 plus	414	736
iPhone 5	320	568
Galaxy S5, S8	360	640
Galaxy Note 8	360	640
iPad Pro	1024	1366
. . .	. . .	. . .

---

02. @media

처음 로딩 시 성능이 저하되지 않도록 CSS 파일을 하나로 만들어서 CSS 내부에서 조건에 따라 분기시키는 것이 일반적인 형태의 반응형웹 CSS이다.

@media all and (min-width: 1000px) {
    /* 모든 기기에서 해상도가 최소 1000px 인 겨우 적용할 속성들… */
}

all은 Media Type을 나타내며 and 전, 후에 띄어쓰도록 한다.

미디어 타입 종류

Media Type	설명
all	모든 미디어 장치에 사용 (기본값)
print	프린터에 사용
screen	PC, 태블릿, 스마트폰에 사용
speech	스크린 리더기가 페이지를 읽는데 사용

예시 01)

body { color: red; }

@media only screen and (max-width:768px) {
    body { color: blue; }
}

위 구문은 원래 글자색이 빨간색이지만 화면이 768px보다 작아졌을 때는 파란색으로 변경한다는 뜻임.
PC에서는 빨간색, 모바일에서는 파란색으로 나타남.

예시 02)

body {
    color: blue;    
}

@media only screen and (max-width:768px) {
    body {
        color: red;
    }
}

위 구문은 원래 글자는 파란색인데 768px보다 화면이 커지면 글자색을 빨간색으로 변경함.

예시 03)

미디어 쿼리를 이용해 브라우저의 방향에 따라 다른 레이아웃을 제공 가능

@media only screen and (oreientation: portrait) {
    body { background: skyblue; }
}

위 구문은 모바일 기기가 세로방향이 되면 배경색을 하늘색으로 지정한다는 뜻.

예시 04)

@media only screen and (oreientation: landscape) {
    body { background: lightgreen; }
}

위 구문은 모바일 기기가 가로방향이 되면, 배경색을 연두색으로 지정한다는 뜻.

예시 05)

쉼표로 구분하여 조건을 추가 할 수 있다.

@media only screen and (max-width: 900px) and (min-width: 600px), (min-width: 1000px) {
    body { color: red; }
}

위 구문은 가로가 600px 에서 900px 사이일 때, 그리고 1100px 이상일 때에만 글자색을 빨간색으로 지정한다는 뜻.

---

실습

Figma로 만든 모바일, 태블릿, PC 레이아웃 3가지를 HTML과 CSS & 미디어 쿼리를 이용해 만들어보도록 하자.
HTML, CSS 소스는 코드펜을 참조할 것.

레이아웃 계획

코딩 & 결과