소개
이 단계별 랩에서는 HTML 의 <aside> 태그 사용법을 배우게 됩니다. 이 태그는 주요 내용과 관련은 있지만 필수적이지 않은 콘텐츠를 표시하는 데 사용됩니다.
참고:
index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단의 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
HTML 페이지 설정
코드 편집기를 열고 index.html이라는 새 파일을 만든 다음 다음 기본 HTML 구조를 추가합니다.
<!doctype html>
<html>
<head>
<title>HTML Aside Tag Tutorial</title>
</head>
<body></body>
</html>
메인 콘텐츠 생성
<body> 태그 안에 주요 내용을 만들어 보겠습니다. 다음 코드를 추가합니다.
<h1>Welcome to my blog!</h1>
<p>
In this article, we'll explore the benefits of using HTML5. HTML5 is a markup
language used for structuring and presenting content on the World Wide Web.
</p>
사이드 콘텐츠 추가
이제 주요 내용에 대한 추가 정보를 포함할 <aside> 태그를 추가해 보겠습니다. 2 단계의 단락 아래에 다음 코드를 추가합니다.
<aside>
<h2>About this article</h2>
<p>
This article was written by John Doe, a web developer who has been working
in the industry for more than 8 years. He is passionate about web
development and loves to share his knowledge with others.
</p>
</aside>
위의 코드를 추가하여 기사에 대한 정보를 담고 있는 <aside> 태그를 만들었습니다. 이 정보는 주요 내용과 관련이 있지만 필수적인 것은 아닙니다.
이제 <aside> 태그에 스타일을 주기 위해 다음 CSS 를 추가합니다.
<style>
aside {
width: 300px;
margin-left: 30px;
padding: 10px;
background-color: #f2f2f2;
border: 1px solid #ccc;
}
</style>
이 CSS 를 추가하여 <aside> 태그에 스타일을 지정했습니다. 너비는 300px 로 설정되었고, 마진은 30px 으로 설정되었으며, 밝은 회색 배경과 테두리가 있습니다.
article 에 추가 콘텐츠 추가
<aside> 태그가 어떻게 사용되는지 더 잘 시각화할 수 있도록 기사에 몇 가지 내용을 더 추가해 보겠습니다. <aside> 태그 아래에 다음 코드를 추가합니다.
<p>
HTML5 는 HTML 언어의 중요한 업데이트입니다. 새로운 기능과 기능을 제공하여
개발자가 웹 페이지 및 애플리케이션을 더 쉽게 만들 수 있도록 합니다. HTML5 의
새로운 기능 중 일부는 다음과 같습니다.
</p>
<ul>
<li>header, footer, article, section 과 같은 새로운 시맨틱 태그</li>
<li>video 및 audio 태그를 사용한 멀티미디어 지원 개선</li>
<li>nav 및 main 태그를 사용한 접근성 향상</li>
</ul>
위의 코드를 추가하여 주요 기사에 몇 가지 추가 내용을 추가했습니다. HTML5 에 대한 정보가 포함된 순서가 없는 목록이 포함되어 있습니다.
요약
이 단계별 랩 (lab) 에서 HTML <aside> 태그를 사용하여 웹 페이지의 주요 내용과 관련된 추가 콘텐츠를 추가하는 방법을 배웠습니다. 또한 CSS 를 사용하여 태그에 스타일을 추가하는 방법도 배웠습니다. <aside> 태그를 사용하면 검색 엔진과 웹 브라우저가 어떤 콘텐츠가 필수적이고 어떤 콘텐츠가 필수적이지 않은지 이해하는 데 도움이 됩니다.
