728x90
미디어쿼리란?
- pc 뿐만 아니라 모바일과 태블릿에도 대응되는 웹사이트를 만들기 위해
- 모바일에 대응되는 반응형 또는 적응형 웹사이트를 만들 때 사용되는 CSS 구문
미디어쿼리 media
.media {
width: 500px;
height: 500px;
background-color: red;
}
@media (min-width: 320px) and (max-width: 800px) {
.media {
width: 300px;
height: 300px;
background-color: yellow;
}
}- min-width와 max-width로 브라우저 가로폭 설정
- 브라우저의 가로폭이 최소 320px, 최대 800px이 되었을 경우, 중괄호 안의 css 속성으로 대체하겠다는 의미
미디어쿼리가 정상적으로 출력되는지 확인하는 법
- 개발자도구 (F12)
- Troy Labs
- 단, 결과물이 서버에 등록되어 있어야 함
미디어쿼리 사용시 주의사항
<meta name="viewport" content="width=device-width, initial-scale=1.0">viewport
- 미디어쿼리가 제대로 작동하지 않는 문제가 발생할 수 있기 때문에 viewport로 너비와 배율을 설정해야 모바일 디바이스에서 의도한 화면을 볼 수 있다.
- HTML 파일의 <head> 태그 안쪽에 작성한다.
- 다양한 디지털 기기의 화면 상에 표기되는 영역을 의미
- 너비와 배율을 설정할 때 사용하는 메타 태그의 속성 중 하나
width=device-width
- viewport의 가로폭 = 디바이스의 가로폭
initial-scale=1.0
- 비율은 항상 1.0
.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 속성 상속
- 미디어쿼리 외부 영역에 있는 CSS 속성을 상속 받음
- 만약 상속을 받지 않고자 하면 속성값으로 none을 입력
728x90
반응형
'Front-End' 카테고리의 다른 글
| [JavaScript] Node 객체 (0) | 2023.03.08 |
|---|---|
| [JavaScript] DOM (문서객체 모델) (0) | 2023.03.08 |
| [CSS] Transform 과 Animation을 결합할 때 주의사항 (0) | 2023.03.01 |
| [CSS] Animation / 웹사이트에 접속하자마자 효과 적용하기 (0) | 2023.03.01 |
| [CSS3] Transition 속성 (0) | 2023.03.01 |