스마트폰, 태블릿, 노트북 등등 많은 기기에서 웹사이트를 접속하고
이들은 모두 화면의 크기가 제각각이여서 그 크기에 따라 웹페이지가 다르게 동작할 필요가 있다.
미디어 쿼리를 사용하면 화면의 크기, 화면의 모드(가로,세로모드) 등의 화면 특성에 따라 특정 CSS코드가 적용되게 할 수 있다.
@media(min-width:800px){ /*화면넓이가 800px 이상이면 안의 코드를 작동(?)시킨다*/
div{
border:5px solid red;
}
}이 코드는 화면의 넓이가 800이상일때 5px 빨간색 테두리를 씌우는 css 코드이다.
위와같은 방법을 통해서 특정 상황에서만 특정 css코드를 적용시킬수 있다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
div{ /*평상시에는 테두리 색이 초록색이지만*/
border:5px solid green;
font-size:60px;
}
@media(min-width:800px){ /*화면넓이가 800px 이상이면 테두리 색을 빨강으로 변경*/
div{
border:5px solid red;
}
}
</style>
</head>
<body>
<div>
Responsive
</div>
</body>
</html>
'웹 공부 > HTML, CSS, JS' 카테고리의 다른 글
| [Javascript/자바스크립트] HTML의 태그에 class를 추가,삭제하기 (0) | 2020.12.19 |
|---|---|
| [Javascript/자바스크립트] 실시간 시계 만들기 (1) | 2020.12.13 |
| [CSS] css파일의 분리저장과 캐싱 (0) | 2020.09.06 |
| [CSS] 그리드(Grid) (0) | 2020.09.06 |
