3. Header 구성

PreviousCSS Attribute Next4. Container 구성

Last updated 5 years ago

Was this helpful?

3. Header 구성

이번 프로젝트의 헤더 부분에는 총 3개의 블럭이 존재한다.

하지만 복잡한 구조가 아니기 때문에 쉽게 따라올 수 있을 것이다.

헤더 부분 블럭 3개의 CSS 속성값은 아래와 같다.

Width: 100%, Height: 35px, Lightblue
Width: 100%, Height: 88px, Lightyellow
Width: 100%, Height: 44px, Lightsalmon

~/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">
        <div class="block1-1">Header block1</div>
        <div class="block1-2">Header block2</div>
        <div class="block1-3">Header block3</div>
    </div>

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

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

헤더 부분의 HTML 코드는 이렇다.

div 태그 3개만 만들어주면 끝이기 때문에 설명은 생략하고 넘어가겠다.

~/Web-Practice/style.css

...

.header {
    width: 100%;
    background-color: lightcoral;
}

.block1-1 {
    height: 35px;
    background-color: lightblue;
}

.block1-2 {
    height: 88px;
    background-color: lightyellow;
}

.block1-3 {
    height: 44px;
    background-color: lightsalmon;
}

CSS 코드는 이렇다. 그런데 이 코드에서 block의 Width 속성이 빠진 것을 볼 수 있는데

부모 div의 width값을 상속받고 있기 때문에 써주지 않아도 width값이 100%가 되는 것이다.

상속이란?
CSS에서 상속이란 특정 속성들이 부모 요소로부터 자식 요소로 전달되는 개념이다.
모든 속성이 상속되면 이상한 부분이 생기기 떄문에 특성 속성만 상속된다.

이렇게 Header 부분의 코드 작성을 끝냈다.

PreviousCSS Attribute Next4. Container 구성

Last updated 5 years ago

Was this helpful?