미디어쿼리

미디어쿼리(media query)

뷰포트의 해상도에 따라 CSS를 분기시키는 미디어쿼리는 반응형 프로젝트에서 반드시 필요한 기법입니다.

---

01. <link ~ media="">

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

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

크롬 브라우저에서 개발자 도구를 열고 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입니다.
all은 Media Type을 나타냅니다. and 전, 후에 띄어 씁니다.

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

예제 01

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

예제 02

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

위 구문은 원래 글자색이 빨간색인데, 화면이 768px보다 작아졌을 때는 파란색으로 지정한다는 뜻으로, PC에서는 글자 색상이 빨간색, 모바일에서는 파란색으로 나타나게 됩니다.

예제 03

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

위 구문은 원래 글자색이 파란색인데, 화면이 768px보다 커지면 글자색을 빨간색으로 지정한다는 뜻으로, 모바일 우선으로 하면서도 같은 결과를 가져옵니다.

예제 04

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

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

예제 05

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

위 구문은 모바일 기기를 눕혀 가로가 세로보다 긴 가로방향이 되면 배경색을 연두색으로 지정한다는 뜻입니다.

예제 06

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

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

---

02-01. 레이아웃 템플릿 계획

모바일과 태블릿 그리고 PC의 경계를 768px, 1024px, 1280px로 하여 레이아웃이 달라지는 media query를 실습해 봅시다.

02-01. 레이아웃 템플릿 미디어쿼리 결과물

원본 소스 보기 원본 사이트 보기

---

03. media query를 흉내내는 script

function initLayout() {
    var widthWin = $(window).width();
    if (widthWin < 1000) $('body').addClass('mob').removeClass('pc');
    else $('body').removeClass('mob').addClass('pc');
}

창의 가로 크기를 재고 1000px보다 좁으면 body에 mob클래스를 붙이고 pc클래스는 제거하고, 1000px이상이면 body에 pc클래스를 붙이고, mob클래스는 제거한다는 뜻입니다.

$(window).resize(funtion() {
   initLayout(); 
});

미리 만들어둔 스크립트를 창 크기가 바뀔 때마다 실행합니다.

...
    body.mob { max-width: 720px; }
...

css에서 body.mob에 속성을 추가하면 모바일일 때의 속성이 등록되는 것입니다.