<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@media screen and (max-width: 767px) {
body {
background-color: royalblue;
font-size: 20px;
color: bisque;
}
}
@media screen and (min-width:768px) and (max-width:959px) {
body {
background-color: aquamarine;
}
}
@media screen and (min-width:959px) {
body {
background-color: coral;
}
}
</style>
</head>
<body>
<h1>오늘은 무슨 점심을 먹을까까머리</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut consequat semper viverra nam libero. Libero volutpat sed cras ornare arcu dui. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Lacus luctus accumsan tortor</p>
</body>
</html>bandicam 2023-05-26 11-46-41-826.mp4
1.69MB
'Html > 이론' 카테고리의 다른 글
| Flex (0) | 2023.05.26 |
|---|---|
| grid (0) | 2023.05.24 |
| background/position/ (0) | 2023.05.23 |
| 대소문자/ 들여쓰기/선으로 텍스트꾸미기/ 글자 단어 사이간격/border (0) | 2023.05.22 |
| :active/:hover/:visited/ nth-child (0) | 2023.05.22 |
