오늘은 반응형 웹페이지의 기본 틀을 만들어보겠습니다. 동기부여를 위해 우선 결과물을 보여드리고 시작하겠습니다. 화면의 크기를 줄이다보면 어느 순간 사이드바 영역이 본문 영역 아래로 내려가는 형태의 반응형 웹페이지입니다.
위와 같은 웹페이지를 만드려면 html 코드와 css 코드가 필요합니다. 이 둘은 같은 폴더 내에 있어야 합니다. 먼저 html 코드는 다음과 같습니다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<h1>bskyvision</h1>
<div id="main">
<div id="contents">본문 영역입니다.</div>
<div id="sidebar">사이드바 영역입니다.</div>
</div>
<div id="footer">푸터 영역입니다.</div>
</body>
</html>
여기서 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 이 부분이 없으면 모바일 환경에서 제대로 작동하지 않을 수 있으니 유의하세요.
또한 css 코드는 다음과 같습니다.
style.css
h1 {
text-align:center;
}
div {
font-size: 30px;
text-align: center;
}
#main {
display: grid;
grid-template-columns: 3fr 1fr;
}
#main #contents {
min-height: 500px;
background-color:#00ffff;
margin-right: 10px;
}
#main #sidebar {
min-height: 500px;
background-color: #00bfff;
}
#footer {
margin-top: 10px;
background-color: #00bfff;
}
@media (max-width:600px){ /*가로 너비가 600px 이하일 때 아래 스타일 적용*/
#main {
display: block;
}
#main #contents {
margin-bottom: 10px;
margin-right: 0px;
}
#main #sidebar {
min-height: 0;
}
}
여기서 핵심은 미디어 쿼리라는 것을 사용하는 점입니다. 미디어 쿼리는 보통 반응형 웹을 만들 때 사용하는 기술입니다. 위 css 코드에서 @media 로 시작하는 부분을 의미합니다. 미디어 쿼리를 사용함을 통해서 "가로 너비가 600px 이하일 때 사이드바가 본문 아래로 내려오게 한다"와 같은 기능을 실현시킬 수 있습니다. 즉, 반응하는 웹을 만들 수 있는 것이죠.
이것을 기본틀로 해서 나름대로 유용한 웹사이트를 만들 수도 있겠죠? 웹페이지 만드는 것 독학해가는 재미가 쏠쏠하네요. ㅎㅎ
<참고자료>
[1] https://aboooks.tistory.com/368?category=516604, 지구별 안내서, "CSS로 반응형 웹사이트 (소스) 만들기: 사이드바가 본문 아래로 떨어지게"
[2] https://ccuram.tistory.com/30, yucalip, "[HTML/CSS] 화면의 크기와 환경을 감지하는 기술, 미디어 쿼리 (Media Queries)"
'Dev > HTML, CSS' 카테고리의 다른 글
| div 요소 테두리 그리기(css) (0) | 2020.07.04 |
|---|---|
| 태그(tag)와 요소(element) 용어 정리 (0) | 2020.07.03 |
| html 문서 내 의 의미는? (0) | 2020.06.19 |
| css로 이미지 가운데 정렬하는 두 가지 방법 (0) | 2020.06.18 |
| 그라데이션 효과 주기(css) (1) | 2020.06.02 |
| sticky header와 sticky footer 만들기(css) (8) | 2020.06.01 |
| php 변수값을 javascript 변수에 대입하려면? (0) | 2020.05.20 |
| HTML, CSS, JAVASCRIPT, PHP 주석 처리 (0) | 2020.05.13 |