지금까지 우리는 다양한 태그를 살펴보며 시맨틱 마크업에 대한 이해도를 쌓았습니다. 이번 챕터에서는 실전 예제를 통해 시맨틱 태그를 상황에 맞게 적용하는 연습을 해보겠습니다.

전체 사진

1. 헤더

다음은 헤더입니다. 아래 이미지를 시맨틱 마크업으로 작성해 보세요.

1.1 구역 나누기

헤더는 웹 사이트의 로고, 검색창, 탐색 메뉴 등의 내용을 포함해 웹 사이트의 제목과 주요 내용을 알려주는 기본적인 영역입니다. 우리가 구현하고자 하는 이미지에도 이 같은 내용이 포함되어 있습니다. 따라서, 가장 먼저 <header> 로 전체 구역을 감싸줍니다.

1.2 로고

<h1>
	<a href="메인화면주소">
		<img src="이미지주소" alt="이미지설명">
  </a>
</h1>

로고는 웹 사이트를 대표하는 이미지인 동시에 제목의 역할을 합니다. 로고는 사이트를 대표하는 제목이므로 <h1>을 사용하고 로고를 클릭했을 때 메인 화면으로 돌아오는 역할을 수행하기 위해 <a>를 사용합니다.