미디어쿼리(media query)

미디어쿼리(media query)

디바이스들이 점점 다양해 지면서 웹에서 화면의 해상도에 따라 유연하게 컨텐츠를 배치하는 기술은 중요해지고 있습니다. 미디어쿼리는 반응형 웹디자인의 기본이 되는 기술 입니다.

---

<link ~ media=" ">

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

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

모바일 기기	가로	세로
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
⁝	⁝	⁝

@media

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

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

all은 Media Type을 나타냅니다.

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

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

화면이 768px보다 작아졌을 때 body의 글 색상을 파란색으로 지정한다는 뜻 입니다.

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

화면이 768px보다 작아졌을 때 body의 글 색상을 빨간색으로 지정한다는 뜻 입니다.

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

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

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

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

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

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

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는 제고한다는 뜻입니다.

레이아웃

결과

원본 보기