반응형
media query 란?
오직 CSS 만을 이용해서 스크린의 사이즈를 알 수 있는 방법이다.
<!DOCTYPE html>
<html lang="kr">
<head>
<title>The Nick Times</title>
<style>
body {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
}
div {
background-color: teal;
width: 200px;
height: 200px;
}
@media screen and (max-width: 600px;) {
div {
background-color: tomato;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
해석: 스크린이 600px 보다 작으면
div의 백그라운드 컬러가 토마토색으로 변한다.
결과
반응형
'2. CSS' 카테고리의 다른 글
| git / github 사용 방법 (0) | 2024.12.23 |
|---|---|
| git / github 의 차이점 (0) | 2024.12.23 |
| CSS animation(애니메이션) 예시 종류 (0) | 2024.12.09 |
| CSS animations (애니메이션) 단계 나눠서 세분화하기 (0) | 2024.12.09 |
| CSS Animations (애니메이션) 사용하기 (0) | 2024.12.09 |