001 header | Notion

코딩을 들어가기 전에 body 태그가 아닌 가장 큰 container를 만드는 것이 좋습니다. 먼저 section 태그를 이용하여 가장 큰 container를 만들어 보겠습니다. 따라서 container라는 id를 가진 section을 생성한 뒤 header 태그를 추가하였습니다.

코드에서 강조된 부분이 새롭게 추가되었다고 보시면 됩니다. 앞으로도 이렇게 표시하도록 하겠습니다.

파일명 : index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/main.js"></script>
</head>
<body>
    **<section id="container">**
        **<header id="header">**
            **<section class="inner">**
            **</section>**
        **</header>
    </section>**
</body>
</html>

파일명 : css/style.css

body{
    background: #fafafa;
}

#header{
    width: 100%; /* 공중에 뜨기 위함 */
    position: absolute; /* 가장 위에 올라가 있어야 하기 위함 */
    z-index: 999; /* absolute의 경우 최소 x축에서 1개 y축에서 1개의 값을 주어야 함 */
    left: 0; top: 0;
    background: white;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

높이 값은 header가 아닌 header 안의 자식들에게 주는 것이 좋습니다.

파일명 : css/style.css

body{
    background: #fafafa;
}

#header{
    width: 100%; /* 공중에 뜨기 위함 */
    position: absolute; /* 가장 위에 올라가 있어야 하기 위함 */
    z-index: 999; /* absolute의 경우 최소 x축에서 1개 y축에서 1개의 값을 주어야 함 */
    left: 0; top: 0;
    background: white;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

**#header .inner{ /* inner 안에 컨텐츠를 넣으면 안에 값이 들어옴 */
    width: 975px;
    height: 77px;
    margin: 0 auto; /* 가운데 정렬 */
}**

결과를 보시면 아래처럼 header와 inner가 생긴 것을 볼 수 있습니다.