고정 헤더 영역
상세 컨텐츠
본문
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 Fullscreen Layout</title>
<style>
/* 전체 페이지를 꽉 채우는 레이아웃 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: grid;
grid-template-areas:
"header header"
"nav nav"
"aside section"
"footer footer";
grid-template-columns: 1fr 3fr;
grid-template-rows: 10vh 7vh auto 10vh;
height: 100vh;
width: 100vw;
text-align: center;
}
/* 각 영역 스타일 */
#header {
grid-area: header;
background: #444;
color: white;
padding: 1rem;
font-size: 1.5rem;
}
#navigation {
grid-area: nav;
background: #666;
color: white;
padding: 1rem;
}
#aside {
grid-area: aside;
background: #888;
color: white;
padding: 1.5rem;
}
#section {
grid-area: section;
background: #aaa;
color: black;
padding: 1.5rem;
}
#footer {
grid-area: footer;
background: #222;
color: white;
padding: 1rem;
font-size: 1.2rem;
}
</style>
</head>
<body>
<div id="header">Header</div>
<div id="navigation">Navigation</div>
<div id="aside">Aside</div>
<div id="section">Section</div>
<div id="footer">Footer</div>
</body>
</html>
'html, css' 카테고리의 다른 글
| sdu 웹표준 수업 실습중 보완 (0) | 2025.04.11 |
|---|---|
| sdu 웹표준 수업 실습중 (0) | 2025.04.11 |
| 레이아웃 만들기 (0) | 2025.04.06 |
| 사이트 생성 (0) | 2024.03.25 |
| 가운데 정렬 (0) | 2024.01.26 |
