Header 부분 코드 작성

Header 부분의 결과물은 이렇다.

width, height, background-color 값만 지정하면 쉽게 만들 수 있다.

저 Header 부분의 CSS 속성값은 width: 100%, height: 60px, background-color: lightblue 이다.

~/Web-Practice/index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Web-Practice</title>

    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="header">
        Header
    </div>

    <div class="container"></div>

    <div class="footer"></div>
</body>
</html>

일단 class명이 header인 div 태그 내에 'Header'란 텍스트를 입력해보자.

파일을 저장하고 실행시켜보면 브라우저에서는 단순히 Header란 텍스트만 내보낼 것이다.

여기서 CSS 속성을 입혀 위의 결과물대로 만들어보자.

필요한 CSS 속성값은 위에 나와있다.

~/Web-Practice/style.css

* {
    margin: 0;
    padding: 0;
}

.header {
    width: 100%;
    height: 60px;
    background-color: lightblue;
}

전체 CSS 코드는 이렇다.

Header 부분을 만들기 위해 class명이 header인 곳에 width, height, background-color값을 설정했다.

이로써 Header 부분이 완성되었다.

Previous3. Header 구성 Next4. Container 구성

Last updated 5 years ago