가장 흔한 반응형 홈페이지 기본 코드 소스
<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개
게시글 목록
| 번호 | 제목 |
|---|---|
| 301 | |
| 297 | |
| 292 | |
| 291 | |
| 290 | |
| 288 | |
| 284 | |
| 282 |
반응형화
부트스트랩 4 알파
1
|
| 281 |
반응형화
플레스박스_1
|
| 276 |
반응형화
테마 지원 후엔
4
|
| 264 |
반응형화
반응형 디자인
11
|
| 251 |
반응형화
여러분들은 반응형 작업하실 때!
12
|
| 239 | |
| 237 | |
| 234 |
반응형화
의무와 재미 사이
2
|
| 226 |
반응형화
부트스트랩 초보 질문~!
7
|
| 224 |
반응형화
플렉스박스 어렵네요..
1
|
| 223 |
반응형화
[하루한글] 반응형 이미지
|
| 220 |
반응형화
[하루한글] 엘리먼트 쿼리
2
|
| 216 |
반응형화
[하루한글] 웹 컴포넌트
3
|
| 211 | |
| 203 |
반응형화
Polymer에서의 반응형 웹
7
|
| 194 | |
| 190 | |
| 179 | |
| 168 | |
| 157 |
반응형화
부트스트랩 vs 파운데이션
10
|
| 154 |
반응형화
스타일 가이드, 패턴 라이브러리
2
|
| 148 |
반응형화
반응형 웹 in 2015
5
|
| 142 |
반응형화
안녕하세요
5
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기