> For the complete documentation index, see [llms.txt](https://ji5485.gitbook.io/web-practice-1/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ji5485.gitbook.io/web-practice-1/header-ad6c-c131/header-bd80-bd84-cf54-b4dc-c791-c131.md).

# Header 부분 코드 작성

![](/files/-LerAEWUZRjH8Lob5vEu)

![](https://github.com/ji5485/web-practice-1/tree/c48626d33b3a6093a0b9745249f7bd99a27509de/assets/캡처.PNG)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 부분이 완성되었다.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ji5485.gitbook.io/web-practice-1/header-ad6c-c131/header-bd80-bd84-cf54-b4dc-c791-c131.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
