미디어 쿼리란?
사이트에 접속하는 미디어 타입과 특징, 해상도에 따라 다른 스타일 속성을 적용하게 하는 기술
viewport
웹 페이지가 접속한 기기에서 보이는 실제 영역의 크기
ex)
해상도가 980px인 화면에서 보는 1px의 크기와 해상독 360px인 화면에서 보는 1px 크기는 다름
-> HTML 문서는 어떤 기기에서 접속하더라도 기본을 980px 크기를 기준으로 보여주게 설정됨
-> 스마트폰 해상도는 360px인데 HTML 문서에서는 해상도를 980px로 잡고 있어 글씨가 좁쌀처럼 보이게 됨
-> 이러한 현상을 해결하기 위해서는 기기의 해상도를 인식할 수 있게 HTML코드로 뷰포트를 설정해 주어야 함
이를 처리하는 것이 meta 태그의 viewport 값
-> name 속성을 viewport로 지정하고, content 속성에 width=device-width 값을 추가하면 됨
<meta name="viewport" content="width=device-width, initial-scale=1.0">width=device-width란 HTML 문서의 너비를 기기의 너비(device-width)로 설정하는 것
| 속성 값 | 설명 |
|---|---|
| width | 뷰포트의 너비를 설정, 보통 device-width로 설정 |
| height | 뷰포트의 높이 설정, 잘 사용X |
| initial-scale | 초기 배열 설정, 기본값 1, 1보다 작으면 축소 크면 확대값 |
| minimum-scale | 뷰포트의 최소 축소 비율을 설정, 기본 0.25 |
| maximum-scale | 뷰포트의 최대 확대 비율을 설정 , 기본 5.0 |
| user-scalable | 뷰포트의 확대 축소 여부 결정, no 시 화면을 확대 축소 불가 |
미디어 쿼리 기본 문법
@media <not|Only> <mediatype> and (<media feature>) <and|or|not> (<media feature>){
css code
}미디어 쿼리는 @media 문법으로 시작
not/only
-> not 뒤에 오는 모든 조건을 부정
-> only 미디어 쿼리를 지원하는 기기만 미디어 쿼리를 해석하라는 의미
mediatype
-> 미디어 쿼리가 적용될 미디어 타입을 명시
-> 생략할 경우 all 로 인식
-> 생략하지 않으면 다음에 반드시 and 연산자가 와야 됨
| 타입 | 설명 |
|---|---|
| all | 모든 기기 |
| screen | 인쇄 장치 |
| screen | 컴퓨터 화면 장치 또는 스마트 기기 |
| speech | 스크린 리더기 같은 보조 프로그램으로 웹 페이지를 소리 내어 읽어 주는 장치 |
meida feature
미디어 쿼리가 적용될 미디어 조건을 적음
| 조건 | 값 | 설명 |
|---|---|---|
| min-width | < 화면 너비 > | 미디어 쿼리가 적용될 최소 너비 |
| max-width | < 화면 너비 > | 미디어 쿼리가 적용될 최대 너비 |
| orientation | portrait | 세로 모드, 뷰포트의 세로 높이가 가로 너비보다 큰 경우 |
| orientation | landscape | 가로 모드, 뷰포트의 가로너비가 세로 높이보다 큰 경우 |
@media only screen and (min-width:360px) and (max-width:720px){
/* css code */
}위 경우 미디어 쿼리를 적용할 수 있는 기기가 컴퓨터 화면 장치 또는 스마트 기기만, 뷰포트의 최소 너비 360 최대 720이면 CSS 코드가 실행 됨
-> 위에서 only와 미디어 타입은 생략 가능!
@media only all and (min-width:360px){
/* CSS 코드 */
}div{
width:100px;
height:100px;
background-color:red;
}
@media only screen and (min-width:420px){
div{
background-color:blue;
}
}뷰포트의 너비가 420px 이상일때는 파란색, 미만 일때는 빨간색으로 표시됨
