소개
HTML 에서 <main> 태그는 문서의 주요 내용 또는 지배적인 내용을 나타내는 데 사용됩니다. HTML5 에서 새롭게 도입된 태그이며, 일반적으로 <body> 태그 내에 작성됩니다. <main> 태그의 내용은 고유해야 하며 문서의 중심 주제와 직접적으로 관련되어야 합니다. 이는 랜드마크 (landmark) 와 유사한 개념으로, 큰 문서에서 빠르게 식별하고 탐색을 용이하게 합니다.
이 Lab 에서는 HTML 에서 <main> 태그를 사용하여 주요 콘텐츠 컨테이너를 만드는 방법을 배웁니다.
참고:
index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단 모서리에 있는 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
HTML 파일 설정
새 파일을 생성하고 이름을 index.html로 지정합니다. 선호하는 코드 편집기에서 엽니다.
HTML 파일의 <head> 섹션에 다음 코드를 추가합니다.
<!doctype html>
<html>
<head>
<title>Creating a Main Content Container in HTML</title>
</head>
<body></body>
</html>
헤더 및 푸터 추가
웹 페이지를 완성하기 위해 헤더와 푸터를 추가하겠습니다.
HTML 파일의 <body> 태그 사이에 다음 코드를 추가합니다.
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
<main>
<p>Welcome to my website. This is the main content area.</p>
</main>
<footer>
<p>©2021 My Website. All rights reserved.</p>
</footer>
위 코드는 탐색 메뉴가 있는 헤더, <main> 태그 및 푸터를 정의합니다.
Main 태그에 콘텐츠 추가
이제 헤더와 푸터를 설정했으므로 main 태그에 콘텐츠를 추가할 수 있습니다.
<main> 태그 사이에 다음 코드를 추가합니다.
<main>
<h2>About Us</h2>
<p>
We are a company that specializes in web development services. Our team
consists of experienced web developers who can help you create a website
that will help your business grow.
</p>
<h2>Our Services</h2>
<ul>
<li>Web Design</li>
<li>Web Development</li>
<li>Search Engine Optimization</li>
<li>Social Media Marketing</li>
</ul>
<h2>Our Portfolio</h2>
<p>Here are some of the websites we have created:</p>
<ul>
<li><a href="#">Website 1</a></li>
<li><a href="#">Website 2</a></li>
<li><a href="#">Website 3</a></li>
</ul>
</main>
최종 HTML 코드 검토
main 콘텐츠 영역을 추가한 후, HTML 코드는 다음과 같아야 합니다.
<!doctype html>
<html>
<head>
<title>Creating a Main Content Container in HTML</title>
</head>
<body>
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
<main>
<h2>About Us</h2>
<p>
We are a company that specializes in web development services. Our team
consists of experienced web developers who can help you create a website
that will help your business grow.
</p>
<h2>Our Services</h2>
<ul>
<li>Web Design</li>
<li>Web Development</li>
<li>Search Engine Optimization</li>
<li>Social Media Marketing</li>
</ul>
<h2>Our Portfolio</h2>
<p>Here are some of the websites we have created:</p>
<ul>
<li><a href="#">Website 1</a></li>
<li><a href="#">Website 2</a></li>
<li><a href="#">Website 3</a></li>
</ul>
</main>
<footer>
<p>©2021 My Website. All rights reserved.</p>
</footer>
</body>
</html>
요약
이 랩에서는 HTML 문서에서 <main> 태그를 사용하여 메인 콘텐츠 컨테이너를 만드는 방법을 배웠습니다. 샘플 콘텐츠를 사용하여 헤더, 메인 콘텐츠 영역 및 푸터를 만들었습니다. <main> 태그의 콘텐츠는 고유해야 하며 문서의 중심 주제와 직접적으로 관련되어야 합니다. <main> 태그를 사용하면 사용자가 쉽게 탐색할 수 있도록 웹사이트의 식별 가능한 섹션을 만들 수 있습니다.
