position을 활용하여 큰 틀을 만드는 레이아웃을 정리해 보도록 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position - 레이아웃 정리</title>
<style>
*{margin:0;padding:0;box-sizing: border-box;}
#wrap{
width:800px;
height:auto;
margin:0 auto;
}
header{
width:100%;
position: relative;
color:#fff;
}
#top_menu{
width:100%;
height: 50px;
background: #192a5a;
position: relative;
}
#left{
position: absolute;
left:50px;
top:10px;
}
#right{
position: absolute;
right:50px;
top:10px;
}
#gnb{
width:100%;
padding:30px;
background: #57585a;
position: relative;
text-align: center;
}
#main_img{
width:100%;
padding:50px;
background: #fffecd;
position: relative;
text-align: center;
}
#content{
width:80%;
padding:150px 0;
margin:0 auto;
background: #c7fff6;
position: relative;
text-align: center;
}
footer{
width:100%;
padding:30px;
background: #ddd5d5;
position: relative;
text-align: center;
}
</style>
</head>
<body>
<div id="wrap">
<header>
<nav id="top_menu">
<div id="left">LOGO</div>
<div id="right">topmenu</div>
</nav>
<nav id="gnb">gnb menu</nav>
</header>
<section id="main_img">main img</section>
<section id="content">content</section>
<footer>footer</footer>
</div>
</body>
</html>
공간의 크기는 width와 height 뿐만 아니라, padding, border, margin을 활용하기도 한다.
여기에서는 height로 높이를 주는 대신 padding을 활용하여 높이가 생기도록 하였다.
위의 padding대신 height값을 부여해도 좋다. 이때, 글자가 높이의 가운데 오도록 하기 위해 line-height를 height와 같은 높이값을 부여해도 된다.
'UIUX Web Standard > COA Lab's CSS' 카테고리의 다른 글
| anchor link 1 - 문서 내 이동 (0) | 2021.01.29 |
|---|---|
| html5를 활용한 기초 레이아웃 (0) | 2021.01.29 |
| position 속성 1, z-index (0) | 2021.01.27 |
| float 속성 3 - 레이아웃 연습 1~5 (0) | 2021.01.27 |
| float 속성 2 - 박스정리 (0) | 2021.01.27 |
