CSS로 헤더 스타일 지정하는 방법 완벽 정리

웹사이트에서 헤더는 방문자가 가장 먼저 접하는 요소로, 페이지의 첫인상을 좌우하는 중요한 부분입니다. CSS를 활용하면 헤더에 배경색, 여백, 글자 크기, 텍스트 정렬 등 다양한 스타일을 손쉽게 적용할 수 있습니다.

CSS 헤더 스타일링 기본 예제

아래는 .header 클래스를 사용해 헤더 영역에 스타일을 적용하는 전체 코드입니다.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        margin: 0;
    }
    .header {
        padding: 30px;
        text-align: center;
        background: #bc1a6b;
        color: white;
        font-size: 30px;
    }
    main {
        padding: 20px;
        font-size: 18px;
    }
</style>
</head>
<body>
<div class="header">
<h1>My website ⇅</h1>
</div>
<main>
<h1>Some heading</h1>
<p>Some sample content.Some sample content.</p>
<p>Some sample content.Some sample content.</p>
<p>Some sample content.Some sample content.</p>
</main>
</body>
</html>

주요 CSS 속성 설명

위 코드에서 사용된 핵심 속성은 다음과 같습니다.

padding: 30px; — 헤더 내부에 상하좌우 30px의 여백을 주어 콘텐츠가 답답하지 않도록 배치합니다.
text-align: center; — 헤더 텍스트를 가운데 정렬하여 시각적 균형을 맞춥니다.
background: #bc1a6b; — 헤더 배경에 진한 분홍색 계열의 색상을 적용해 브랜드 이미지를 강조합니다.
color: white; — 배경색 대비 텍스트를 흰색으로 지정해 가독성을 높입니다.
font-size: 30px; — 헤더 제목의 크기를 키워 존재감을 부여합니다.

또한 body의 margin: 0; 설정으로 브라우저 기본 여백을 제거하여 헤더가 화면 상단에 딱 붙게 만들었으며, font-family를 지정해 일관된 서체 환경을 유지했습니다.

실행 결과

위 코드를 실행하면 진한 분홍색 배경의 헤더가 화면 최상단에 나타나고, 그 안에 흰색의 큰 제목이 가운데 정렬되어 표시됩니다. 헤더 아래에는 본문(main) 영역의 샘플 콘텐츠가 자연스럽게 이어집니다.

이처럼 몇 줄의 CSS만으로도 단순한 HTML 구조를 세련되고 전문적인 웹페이지 헤더로 바꿀 수 있습니다. 배경색이나 폰트 크기 등 값을 조정하며 자신만의 스타일을 실험해 보시기 바랍니다.