지금 보시는 블로그 창의 크기를 축소하시면 화면의 색이 바뀝니다.
Lorem ipsum dolor sit amet
안녕하세요 홍길동입니다.
html 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>반응형 웹코딩: 미디어 쿼리</title>
<link rel="stylesheet" href="./css/06_media.css">
</head>
<body>
<!-- 반응형 웹 : 핸드폰, 테블릿, pc 모니터 크기에 따라 변하는 웹 -->
<h1>Lorem ipsum dolor sit amet</h1>
<p>안녕하세요 홍길동입니다.</p>
</body>
</html>css 코드
/* 반응형 웹 css */
/* 사용법 : @media (max-width: 최대크기) { 선택자 { 속성:값; }} */
/* 모니터 최대 크기가 699px 이하일때 빨간색 : 테블릿 */
@media (max-width: 699px) {
body {
background-color: red;
}
}
/* 사용법 : @media (min-width: 최소크기) { 선택자 { 속성:값; }} */
/* 모니터 최소 크기가 900px 이상일때 파란색 : pc */
@media (min-width: 900px) {
body {
background-color: blue;
}
}
/* 사용법 : @media (min-width:최소크기) and (max-width:최대크기) { 선택자 { 속성:값; }} */
/* 모니터 최소 크기가 700px 이상이고 최대크기가 899px 사이일때 녹색 */
@media (min-width: 700px) and (max-width: 899px) {
body {
background-color: green;
}
}'[HTML & CSS] > [CSS]' 카테고리의 다른 글
| [CSS] CSS의 개요와 기본 문법 (0) | 2023.07.29 |
|---|