1. 미디어 쿼리란?
반응형 웹에서 디바이스의 너비와 높이 등의 정보를 가지고
CSS 스타일을 적용 시킬 수 있는 기법이다.
2. 기본 문법
@media 미디어유형 (조건) {
스타일
}
- 미디어 유형: all, print, screen, speech(음성 출력 장치),
braille(점자 표시 장치), embossed(점자 인쇄 장치),
projection(빔 프로젝트와 같은 장치), handheld(휴대용 장치)
- 조건에는 width와 height를 직접 정하거나 min-, max-를 사용하여
화면에 맞게 스타일 지정이 가능하다.
3. 방향성
조건에 orientation을 사용하여 미디어의 가로 또는 세로 방향을 확인할 수 있다.
- orientation: landscape (가로)
- orientation: portrait (세로)
4. 복합적인 조건문
미디어쿼리에서도 and 식이나 or, not 같은 식을 사용할 수 있다.
1) and ("and"를 사용)
@media screen and (min-width: 600px) and (orientation: landscape) {
p {
color: blue;
}
}
** 최소 해상도가 600px이고, 화면의 방향이 가로일 경우
본문(p)의 색이 파란색으로 변경된다.
2) or (" , "를 사용)
@media screen and (min-width: 600px), (orientation: landscape) {
p {
color: red;
}
}
** 최소 해상도가 600px이거나, 화면의 방향이 가로일 경우
본문(p)의 색이 빨간색으로 변경된다.
3) not ("not"을 사용)
@media not all and (orientation: landscape) {
p {
color: green;
}
}
** 디바이스가 세로일 경우에만 본문(p)의 색이 초록색으로 변경된다.
5. 해상도 분기점(breakpoints)
모바일 - 가로 360 ~ 580px
태블릿 - 가로 600 ~ 1024px
데스크톱 - 가로 1024 ~ 1920px
** 세로의 길이는 각 페이지마다 다르기 때문에 중요하지 않다.
** 해외 or 국내 디바이스 점유율과 페이지의 특성
(공공 사이트 or 일반 사이트)에 따라 주된 해상도가 달라진다.
@media all and (max-width: 580px) { } - 모바일
@media all and (min-width: 600px) and (max-width: 1024px) { } - 태블릿
@media all and (min-width: 1025px) { } - 데스크톱
6. 데스크톱 퍼스트 / 모바일 퍼스트
1) 반응형 디자인을 할 경우 두 가지 접근법이 있으며,
MDN에 따르면 모바일 퍼스트 기법이 선호된다고 한다.
- 데스크톱 퍼스트: 데스크톱 또는 가장 넓은 뷰포트를 기준으로 하여
차례대로 작은 뷰포트 순으로 스타일을 지정
- 모바일 퍼스트: 모바일 또는 가장 작은 뷰포트를 기준으로 하여
차례대로 넓은 뷰포트 순으로 스타일 지정
2) 작성 순서
- 데스크톱 퍼스트
(1) 모바일, portrait
(2) 모바일, landscape
(3) 태블릿
(4) 데스크톱
(5) 기본 css 작성 (대형 뷰포트 데스크톱)
- 모바일 퍼스트
(1) 기본 css 작성 (모바일, portrait)
(2) 모바일, landscape
(3) 태블릿
(4) 데스크톱
(5) 대형 뷰포트 데스크톱
Hello World!