가장 흔한 반응형 홈페이지 기본 코드 소스 [kiss]
가장 흔한 반응형 홈페이지 기본 코드 소스
<index.html 부분>
[code]
<!DOCTYPE html>
<html lang="kr">
<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>반응형 기본 코드</h1>
<div id="main">
<div id="contents">본문 영역입니다.</div>
<div id="sidebar">사이드바 영역입니다.</div>
</div>
<div id="footer">푸터 영역입니다.</div>
</body>
</html>
[/code]
원본 링크 : https://bskyvision.com/786
<style.css 부분>
[code]
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;
}
}
[/code]
참고로, @media를 저렇게 굳이 따로 쓰지 않아도 됩니다. 필요한 곳마다 그때그때 넣어도 됨.
예를 들어,
[code]
#main { display: grid; grid-template-columns: 3fr 1fr; }
@media (max-width:600px) {
#main { display: block; }
}
[/code]
이렇게 해 놓으면, 600px 이하에서는 두 번째 #main의 코드가 실행됨.
댓글 1개
오우.. HTML5 하고, CSS 공부하고 있는데,
반응형까지는 갈길이 머네요..
브라우저 크기를 줄이니 사이드바가 뚝 떨어지는게 참 신기합니다.
도움이 되었습니다. 추천하나 박습니다.ㅋ
... 엇.. 추천 안먹는다..
＼（〇_ｏ）／