반응형
컴퓨터 화면에 맞추어 제작된 웹사이트를 작은 화면으로 본다면 화면의 모든 요소들이 작아지거나 깨지는 현상으로 인해 가독성이 현저히 떨어지게 된다.
이 문제를 해결하기 위해서는 디바이스 별로 별도의 웹 페이지를 제작할 수도 있지만(Adaptive web design)
화면 크기에 맞추어 자동으로 웹 페이지의 구성이나 배치가 변하도록 할 수도 있다.
이것을 반응형 웹 디자인(Responsive web design)이라고 한다.
responsive.css
/* media queries
화면이 600px 미만으로 작아지면 배경색을 빨강으로 바꾼다.
*/
@media (min-width: 600px) {
body{
background-color: pink;
}
}
@media (max-width: 599px) {
body{
background-color: red;
}
}
/* flexbox
화면이 작아지면 container의 각 항목들이 아래로 내려가 배치된다.
*/
#container {
display: flex;
flex-wrap: wrap;
}
#container > div {
background-color: springgreen;
margin: 20px;
padding: 20px;
width: 200px;
}
/* grid
격자무늬로 요소를 표시하며,
각 column의 크기는 가변적(auto)이다.
*/
#grid {
background-color: green;
display: grid;
padding: 20px;
grid-column-gap: 20px;
grid-row-gap: 10px;
grid-template-columns: auto auto auto;
}
.grid-item {
background-color:white;
}
responsive.html
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Hello</title>
<!-- bootstrap 라이브러리를 이용-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<link rel="stylesheet" href="responsive.css">
</head>
<body>
<!-- bootstrap의 grid system-->
<div class="row">
<div class="col-lg-3 col-sm-6">
This is a section.
</div>
<div class="col-lg-3 col-sm-6">
This is b section.
</div>
<div class="col-lg-3 col-sm-6">
This is c section.
</div>
<div class="col-lg-3 col-sm-6">
This is d section.
</div>
</div>
<div id="container">
<div> this is sample text container 1 </div>
<div> this is sample text container 2 </div>
<div> this is sample text container 3 </div>
<div> this is sample text container 4 </div>
<div> this is sample text container 5 </div>
<div> this is sample text container 6 </div>
<div> this is sample text container 7 </div>
<div> this is sample text container 8 </div>
</div>
<div id="grid">
<div class="grid-item"> this is sample text container 1 </div>
<div class="grid-item"> this is sample text container 2 </div>
<div class="grid-item"> this is sample text container 3 </div>
<div class="grid-item"> this is sample text container 4 </div>
<div class="grid-item"> this is sample text container 5 </div>
<div class="grid-item"> this is sample text container 6 </div>
<div class="grid-item"> this is sample text container 7 </div>
<div class="grid-item"> this is sample text container 8 </div>
<div class="grid-item"> this is sample text container 9 </div>
</div>
</body>
</html>
실행결과
반응형
'Front-end' 카테고리의 다른 글
| HTML 기본 구조와 태그(tag), 요소(element), 속성(attribute) (0) | 2023.01.19 |
|---|---|
| submit 버튼 쓰지 않고 submit하기 (0) | 2023.01.12 |
| CSS / 애니메이션과 트랜지션 animation & transition (0) | 2022.05.23 |
| SASS (0) | 2021.05.13 |
| CSS (0) | 2021.05.12 |
댓글