수업(국비지원)/HTML, CSS
[HTML/CSS] CSS선택자(selector) - 반응형 웹
byeolsub
2023. 4. 17. 23:38
📌
<!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>