<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@media screen and (min-width: 1024px) {
.wide{
display: block;
}
.mid{
display: none;
}
.narrow{
display: none;
}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
.wide{
display: none;
}
.mid{
display: block;
}
.narrow{
display: none;
}
}
@media screen and (max-width: 767px) {
.wide{
display: none;
}
.mid{
display: none;
}
.narrow{
display: block;
}
}
</style>
<title>Document</title>
</head>
<body>
<div class="wide">넓은 화면 입니다.</div>
<div class="mid">중간 화면 입니다.</div>
<div class="narrow">좁은 화면 입니다.</div>
</body>
</html>@media screen and (min-width: 1024px) {
@media screen and (min-width: 768px) and (max-width: 1023px) {
@media screen and (max-width: 767px) {
화면 크기별로 내용을 바꿀 수 있다.
'프론트엔드 > html css' 카테고리의 다른 글
| 토스 홈페이지 보고 그려보기 (0) | 2023.06.27 |
|---|---|
| 당근마켓 보고 따라만들어보기 (5) | 2023.06.27 |
| 토스 페이지 그려보기 (0) | 2023.06.26 |
| 그리드 연습 사이트 (0) | 2023.06.26 |
| 그리드 (0) | 2023.06.26 |