<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>반응형 웹</title>
<!-- [반응형 웹 디자인 RWD : ]화면크기에 따라 css를 다르게 적용하는 디자인 -->
<!-- 반응형 웹을 구현하는 CSS의 문법: 미디어 쿼리 -->
<!-- 방법1. @media 키워드 이용 -->
<style>
/* 화면이 가장 작을 때의 CSS */
#aa{
width: 320px;
height: 100px;
background-color: green;
}
/* 너비가 560px 이상이면 .. 마치 if()문 같은 문법*/
@media(min-width: 560px){
#aa{
width: 560px;
height: 200px;
background-color: yellow;
}
}
</style>
<!-- 방법2. media 속성 이용 -->
<link rel="stylesheet" href="./01_rwd.css" media="(min-width:680px) and (max-width:800px)">
<!-- 내부스타일시트에서 media속성사용가능 -->
<style media="(min-width:800px)">
#aa{
width: 800px;
height: 400px;
background-color: aqua;
}
</style>
</head>
<body>
<div id="aa"></div>
</body>
</html>
#aa{
width: 680px;
height: 300px;
background-color: orange;
}
'CSS' 카테고리의 다른 글
| Web App: 반응형웹03 (0) | 2023.10.30 |
|---|---|
| Web App: 반응형웹02 (1) | 2023.10.30 |
| 웹사이트 만들어보기 (0) | 2023.10.30 |
| CSS-D5 (0) | 2023.10.30 |
| CSS-D04 (0) | 2023.10.27 |