각 홈페이지마다 가로범위를 줄이면 다르게 표현되는 홈페이지들이 있다.
이런 홈페이지들이 MediaQuery를 썼다고 할 수 있는데
<!DOCTYPE html>
<html lang="ko">
<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>media query</title>
<style>
.container {
background-color: tomato;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>한 상자를 만들어서 색은 토마토색 , 200 x 200 으로 만들었다.
@media (max-width: 900px) {
.container {
background-color: dodgerblue;
width: 100px;
height: 100px;
}
}
@media (max-width: 700px) {
.container {
background-color: violet;
width: 300px;
height: 300px;
}
}만약 브라우저 크기가 900px 아래라면 ,
색을 블루로 바꾸고 크기를 100 x 100으로 바꾸어지게 된다.
또 , 700px 아래라면,
색을 violet으로 바꾸고 크기를 300 x 300으로 바꾸어진다.
이렇게 홈페이지 창에 맞춰 반응하는 요소가
@media 라고 할 수 있다.
'Visual Studio Code > Visual Studio Code icia 33일차' 카테고리의 다른 글
| Visual Studio Code form에 대해서 - 2 (0) | 2023.04.07 |
|---|---|
| Visual Studio Code Form에 대해서 (0) | 2023.04.07 |
| Visual Studio Code Buttons에 대해서 (0) | 2023.04.07 |
| Visual Studio Code Grid에 대해서 (0) | 2023.04.07 |
| Visual Studio Code float로 layout 지정하기 (0) | 2023.04.07 |
