How To – 헤더 스타일 지정

w3.css

헤더 스타일 지정

헤더 스타일을 지정하는 방법을 알아보자.

헤더를 지정하여 포스트의 컨텐츠가 아니라 제목을 눈에 띄게 표현할 수 있다.
보통 헤더에 메뉴를 많이 넣어놓는 편이나 이 포스트에서는 헤더 지정하는 방법까지만 알아보자.

헤더 만들기

1단계) HTML 추가

<div class="header">
<h1>Header</h1>
<p>My supercool header</p>
</div>

2단계) CSS 추가

헤더 스타일을 큰 내부 여백, 가운데 정렬된 텍스트, 특정 배경색 및 큰 크기의 텍스트로 지정한다.

.header {
padding: 60px;
text-align: center;
background: #1abc9c;
color: white;
font-size: 30px;
}

코드 실행