반응형 디자인(반응형 웹, Responsive Wed)
화면의 크기를 조절하면 그 크기에 따라서 웹페이지의 각 요소들이 반응해서 최적화 된 모양으로 바뀌게 하는 것.
수많은 형태의 화면에서 동작해야하는 것이 초기 웹의 숙제였고 현재의 해결책이 반응형 디자인이다.
Media query 소개
반응형 웹을 만드는 문법.
화면의 크기, 특성에 따라 어떠한 조건을 만족할 때만 css내용이 동작하도록 하는 것.
<style> @media(화면너비){CSS코드 } </style>
- 최소너비 min-width:000px (screen width > 000px)
- 최대너비 max-width:000px (screen width < 000px)
- 현재 화면너비 알아보는 법 : 페이지 우클릭 - 검사(단축키 : Ctrl + Shift + I) - 화면 오른쪽 위에 크기표시
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 미디어쿼리</title>
<style>
body{
margin: 0;
}
h1{
text-align: center;
border-bottom:1px solid gray;
margin:0;
padding:20px;
}
#grid{
display: grid;
grid-template-columns: 131px 1fr;
}
#grid ul{
border-right: 1px solid gray;
width: 120px;
margin:0;
padding:11px;
}
#article{
padding-left: 25px;
}
/*screen width < 800px*/
@media(max-width:800px){
#grid{
display: block;
}
#grid ul{
border-right:none;
}
h1{
border-bottom:none;
}
}
</style>
</head>
<body>
<h1>CSS</h1>
<div id="grid">
<ul>
<li>CSS 미디어쿼리</li>
<li>@media{}</li>
<li>max/min</li>
</ul>
<div id="article">
<h2>CSS 미디어쿼리</h2>
<p>
화면의 크기를 조절하면 그 크기에 따라서 웹페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌게 하는 것.
수많은 형태의 화면에서 동작해야하는 것이 웹의 숙제였고 그 결과물이 반응형 디자인이다.
반응형 웹을 만들려면 미디어쿼리를 사용하면 된다.</p>
</div>
</div>
</body>
</html>
화면의 크기에 따라 CSS특성들이 적용된다.
'프로그래밍언어 > CSS' 카테고리의 다른 글
| [CSS]KIC campus 수강 내용 정리 (0) | 2021.09.01 |
|---|---|
| [CSS] CSS코드 파일로 빼기 (0) | 2020.12.02 |
| [CSS] Grid(그리드) (0) | 2020.12.01 |
| [CSS] 박스모델 (0) | 2020.11.25 |
| [CSS] 선택자들 (0) | 2020.11.21 |
