📌
<!DOCTYPE html>
<!-- src/main/webapp/6/selector10.html
반응형웹 : 브라우저의 크기에 따라서 자동으로 화면을 변경하도록 구현됨.
-->
<html>
<head>
<meta charset="UTF-8">
<title>@Media 태그</title>
<style>
@media(max-width:499px){
body{ background : red; }
}
@media((max-width:500px) and (max-width:799px)){
body{ background : green; }
}
@media(max-width:800px){
body{ background : blue; }
}
</style>
</head>
<body>
<h1>@Media 태그 예제</h1>
<p>화면의 크기별로 바탕색을 변경합니다.</p>
</body>
</html>
'수업(국비지원) > HTML, CSS' 카테고리의 다른 글
| [HTML/CSS] CSS선택자(selector) - 상대선택자 input태그 (0) | 2023.04.17 |
|---|---|
| [HTML/CSS] CSS선택자(selector) - CSS반응 선택자, CSS상대 선택자 (0) | 2023.04.17 |
| [HTML/CSS] CSS선택자(selector) - 메뉴만들기 (0) | 2023.04.17 |
| [HTML/CSS] CSS선택자(selector) - 박스 모델(Box Model) (0) | 2023.04.17 |
| [HTML/CSS] CSS선택자(selector) - 후손 태그, 자손 태그 (0) | 2023.04.17 |
