CSS3 미디어 쿼리

다양한 디바이스의 사용으로 반응형 웹 디자인은 필수적이다. 미디어 쿼리는 다양한 크기의 디바이스에 따라 CSS가 다르게 적용될 수 있도록 하는 기술 중 하나이다.

미디어쿼리는 css 내부에서 작성하거나, 링크로 연결할 수 있는데 css 내부에서 작성하는 방법에 대해서만 다루겠다.

미디어쿼리 사용법

@media and|not|only media type and (media feature) {
  // css 코드
}

현재, maruzzing.github.io 에서 sidebar nav는 특정 스크린 사이즈 이상일 때만 표시되는데, 아래와 같이 구현할 수 있다. 미디어 타입이 생략되어 있지만 이 경우, all로 컴파일 된다. 이 때, 미디어 특징을 추가하려면 and로 연결하면 된다.

@media (min-width: 1320px) {
  display: inline;
}

현재, maruzzing.github.io 에서 sidebar nav는 특정 스크린 사이즈 이상일 때만 표시되는데, 아래와 같이 구현할 수 있다. 미디어 타입이 생략되어 있지만 이 경우, all로 컴파일 된다. 이 때, 미디어 특징을 추가하려면 and로 연결하면 된다.

not 이나 only 연산자를 사용할 때는 media type을 필수적으로 지정해 주어야 하는데, media type은 아래와 같다.

• all : 모든 미디어 장치
• pring : 인쇄 결과물 및 출력 미리보기 화면
• screen : 컴퓨터 스크린, 태블릿, 스마트폰 등의 스크린
• speech : 페이지를 읽어주는 화면 낭독기