소개
이 랩에서는 <header> 태그를 사용하여 HTML 페이지의 헤더 섹션을 만드는 방법을 배웁니다. 웹 페이지의 헤더 섹션은 일반적으로 웹사이트 로고, 탐색 메뉴, 검색창 등을 포함합니다. <header> 태그는 웹 페이지의 헤더 섹션을 만들기 위해 다른 HTML 요소를 함께 그룹화하는 데 사용되는 블록 레벨 요소입니다.
참고:
index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 을 작성하는 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단의 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
HTML 문서 설정
index.html이라는 새 HTML 파일을 생성하는 것으로 시작합니다. index.html에서 다음 코드를 사용하여 기본 HTML 문서 구조를 추가합니다.
<!doctype html>
<html>
<head>
<title>HTML Header Tutorial</title>
</head>
<body></body>
</html>
헤더 섹션 생성
<header> 태그를 사용하여 HTML 페이지의 헤더 섹션을 생성합니다. <body> 태그 안에 다음 코드를 추가합니다.
<header>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
위 코드에서는 헤더 섹션 제목을 정의하기 위해 <h1> 태그를 추가하고, 탐색 메뉴를 정의하기 위해 <nav> 태그를 추가했습니다. <nav> 태그 안에는 순서가 없는 목록 <ul>과 세 개의 목록 항목 <li>를 해당 앵커 <a> 태그와 함께 추가하여 탐색 메뉴를 만들었습니다.
헤더 섹션에 스타일 추가
헤더 섹션에 스타일을 추가하기 위해 style.css라는 CSS 파일을 생성합니다. style.css에 다음 코드를 작성합니다.
header {
background-color: #333;
color: #fff;
padding: 1rem;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
}
nav li a {
color: #fff;
display: block;
padding: 0.5em;
text-decoration: none;
}
위 코드에서는 배경색, 텍스트 색상 및 패딩을 설정하기 위해 <header> 태그에 스타일을 추가했습니다. 또한 탐색 메뉴의 스타일을 설정하기 위해 <nav> 태그와 해당 자식 요소에 스타일을 추가했습니다.
CSS 파일 연결
CSS 파일을 HTML 파일에 연결하려면 <head> 태그 안에 다음 코드를 추가합니다.
<link rel="stylesheet" href="style.css" />
index.html에 변경 사항을 저장하고 웹 브라우저에서 엽니다. 다음과 같은 출력이 표시됩니다.
요약
축하합니다! <header> 태그를 사용하여 기본적인 HTML 헤더 섹션을 성공적으로 만들었습니다. 이 랩에서는 HTML 페이지의 헤더 섹션을 만들고, 스타일을 추가하고, CSS 파일을 HTML 문서에 연결하는 방법을 배웠습니다. 헤더 섹션은 방문자에게 소개 콘텐츠와 탐색 메뉴를 제공하므로 모든 웹 페이지의 필수적인 부분입니다.
