미디어 쿼리란?
PC 뿐만 아니라 모바일과 태블릿에도 대응되는 반응형 또는 적응형 웹사이트를 만들 때 사용되는 CSS 구문이다.
화면 크기마다 각각 다르게 CSS를 적용한다.
미디어 쿼리 지정 방법
- HTML 파일 내 <head> 내 <link> 태그에 media 속성 지정
- css 파일 내 @media 지정
- css 파일 내 import
미디어쿼리 작성
1. HTML 파일 내 <head> 내 <link> 태그에 media 속성 지정
<link href="css파일 경로" rel="stylesheet" media="screen and (max-width: 320px)"/>
2. css 파일 내 media 작성 방법
@media (조건1) and (조건2) {}- 조건문는 min-,max- 옵션을 줄 수 있음
- 미디어 유형으로는 all (모든 장치), print, screen, speech 등이 있다
뷰포트
viewport : 너비와 배율을 설정할 때 사용하는 메타 태그의 속성
<meta name="viewport" content="width=device-width, initial-scale=1.0">- 브라우저에서 web content가 표시되는 영역
- 미디어 쿼리가 제대로 작동하지 않는 문제가 발생할 수 있으므로 viewport로 너비와 배율을 설정해야 모바일에서 의도한 화면을 볼 수 있음
- width=device-width: viewport의 가로폭
- initial-scale : 초기 배율 (기본 값 : 1)
CSS 속성 상속
.media {
width: 500px;
height: 500px;
background-color: yellow;
}
@media (min-width: 320px) and (max-width: 800px) {
.media {
width: 300px;
height: 300px;
background-color: none;
}
}
- 미디어쿼리 외부 영역에 있는 CSS 속성을 상속받는다
- 만약 상속을 받고 싶지 않다면 속성 값을 none
- 브라우저의 가로폭이 최소 320px, 최대 800px이 되었을 경우, 중괄호 안의 css 속성으로 대체
'Web > HTML&CSS' 카테고리의 다른 글
| [CSS] CSS3 애니메이션 - Transform, Transition, Animation (0) | 2022.04.07 |
|---|---|
| [HTML&CSS] 웹사이트 레이아웃 (0) | 2022.04.05 |
| [CSS] CSS 개념 및 구성 요소 (0) | 2022.04.05 |
| [HTML] HTML 기본 구조 및 태그 (0) | 2022.04.05 |
댓글