01.CSS 기초 - 미디어 쿼리

ID짱재·2021년 3월 18일

CSS

목록 보기

9/15

🌈 미디어 쿼리

🔥 적응형 웹 vs 반응형 웹

🔥 미디어 쿼리

🔥 사용 예시

1. 적응형 웹 vs 반응형 웹

적응형 웹 : 디바이스에 따라 다른 페이지로 접속함으로써 최적화된 페이지를 보여줌
- PC로 접속하면 naver.com으로 접속하고, 모바일로 접속하면 m.naver.com으로 접속됨
- 단점은 디바이스 환경(해상도)에 따라 페이지를 여러번 만들어야 함
반응형 웹 : 동일한 웹페이지를 보여주되 디바이스의 환경에 적합한 레이아웃으로 배치하여 페이지를 띄움

2. 미디어 쿼리

반응형 웹을 구현하기 위해 사용하는 CSS 기술을 미디어 쿼리라 함
즉, 미디어 쿼리 기술을 적용시키면 다양한 디바이스 환경에 따라 다른 레이아웃 및 스타일을 적용 가능함
이에 일정 해상도(화면 크기)에 따라 레이아웃을 재배치하거나 CSS요소의 적용을 다르게하는 것임
미디어 쿼리는 @media [조건1 : media-type] ([조건2 : media-feature-rule])을 통해 선언하여 사용

1) 조건1 : media-type - 일반적으로 all 또는 screen 사용

all : 모든

screen : 브라우저 화면

print : 프린트 화면(미리보기)

speech : 음성과 관련한 특수한 경우

2) 조건2 : media-feature-rule - 일반적으로 min-width/max-width, orientation 정도만 사용

min-width : 넓이가 n인 해상도 이상에서만 해당 CSS를 적용

max-width : 넓이가 n인 해상도 이하에서만 해당 CSS를 적용

orientation : 디바이스가 가로방향(landscape)일 때와 세로방향(portrait)일 때

3. 사용 예시

and : 여러 media 조건이 모두 참일 때 해당 css 적용
컴마(,) : 여러 media 조건 중 하나만 참일 때 해당 css 적용
not : 미디어 조건이 참이 아닐 때 css 적용
only: 구형 브라우저 지원을 위해 과거에 사용하던 방식

✍🏻 화면 너비가 1024px 이하인 경우 아래 css 적용
@media (max-width:1024px){ 
  h1{
    .....
  }
  div{
    .....
  }
}

✍🏻 브라우저 화면일 경우에만 화면 너비가 800px 이상일 때, 아래 css 적용
@media only screen and (min-width:800px){ 
  nav{
    .....
  }
  main{
    .....
  }
}

✍🏻 가로 방향인 브라우저 화면이고, 화면 너비가 1200px 이상일 경우 아래 css 적용
@media only screen and (min-width:1200px) and (orientation : landscape){ 
  h1{
    .....
  }
  section{
    .....
  }
}

✍🏻 화면 높이가 680px 이상이거나, 디바이스가 가로 방향인 브라우저 화면일 때 해당 css 적용
@media (min-height : 680px), screen and (orientation : portrait){ 
  h1{
    .....
  }
  section{
    .....
  }
}