[CSS] 미디어 쿼리 (media query, @media)
2021. 6. 27. 23:50
728x90
01 미디어 쿼리 기본
@media 매체유형 and (표현식) {
css 스타일 코드;
}
@media screen and (max-width: 1200px){
.container{
background-color: red;
}
}
02 미디어 쿼리 매체유형
| 매체유형 | 설명 |
| all | 모든 매체에 사용 |
| 프린터 기기에 사용 | |
| screen | 컴퓨터나 태블릿, 스마트폰 등 스크린이 있는 매체에 사용 |
| speech | 웹 페이지를 읽어주는 스크린 리더에 사용 |
03 미디어 쿼리 속성 // 표현식
| 속성 | 설명 |
| width | 화면의 너비 |
| height | 화면의 높이 |
| device-width | 매체 화면의 너비 |
| device-height | 매체 화면의 높이 |
| device-aspect-ratio | 매체 화면의 비율 |
| orientation | 매체 화면의 방향 |
04 예제
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>미디어 쿼리</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
*{
margin: 0px;
padding: 0px;
}
.container{
width: 100%;
height: 500px;
background-color: red;
}
@media screen and (max-width: 700px){
.container{
background-color: goldenrod;
}
}
@media screen and (max-width: 600px){
.container{
background-color: green;
}
}
@media screen and (max-width: 500px){
.container{
background-color: hotpink;
}
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>728x90
'CSS > Study' 카테고리의 다른 글
| [CSS] 결합 선택자 (자식 선택자 ">"), 자손 선택자 " ") (0) | 2021.07.03 |
|---|---|
| CSS3 트랜지션 (transition, transition-duration, transition-property, transition-timing-function) (0) | 2021.06.27 |
| CSS3 플렉스 요소의 속성 (align-self, flex) (0) | 2021.06.27 |
| CSS3 플렉스 (flex-direction, justify-content, align-items, flex-wrap, align-content) (0) | 2021.06.27 |
| CSS3 그리드 (row-gap, column-gap, gap, grid-template-areas) (0) | 2021.06.27 |
