[CSS] 미디어쿼리

CSS: 미디어쿼리란?

해상도에 따라 css를 분기시키기 때문에 반응형 프로젝트에서 반드시 필요한 기법입니다!

---

#1. <link ~ media=" ">

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

!point! 위 코드는 최소 가로폭 1000px, 즉 1000px 보다 넓은 해상도일 때 style_pc.css를 연결한다는 뜻입니다!
또한 크롬 개발자 도구를 통해 각 기기마다의 해상도에 따른 예시를 볼 수 있습니다.

해상도 평균 사이즈 표

기기	가로
데스크탑	1920
테블릿pc	768
모바일	480

---

#2. @media

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

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

미디어 타입 종류

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

!point! and 양 옆에 띄어쓰기를 꼭 해주어야 한다!

코드 예제

body {
    color: red;    
}

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

원래 해상도(pc)해서는 글자 색상이 red이지만 해상도가 768px보다 작아졌을 때(모바일, 태블릿) 글자 색상을 blue로 지정하겠다는 의미 입니다.

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

모바일 기기가 세로 방향이 되면, 배경색을 하늘색으로 설정하겠다는 뜻입니다.

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

모바일 기기가 가로 방향이 되면, 배경색을 연두색으로 설정하겠다는 뜻입니다.

---

#3. 미디어쿼리 실습하기

지금까지의 개념을 바탕으로 1280px, 1024px, 768px로 미디어 쿼리 실습을 해보겠습니다!

결과보기

원본 소스 보기

원본 페이지 보기