HTML

HTML / (43) Semantic 요소

Mr.sheep 2023. 2. 25. 17:01

■ HTML의 Semantic 요소

▶ <article> : 독립적이고 독립적인 콘텐츠를 정의한다.

▶ <aside> : 페이지 콘텐츠 이외의 콘텐츠를 정의한다

▶ <details> : 사용자가 보거나 숨길 수 있는 추가 세부 정보를 정의한다.

▶ <figcaption> : <figure> 요소에 대한 표제를 정의한다.

▶ <figure> : 일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자체 포함 내용을 정의한다.

▶ <footer> : 문서 혹은 세셕의 바닥글을 정의한다.

▶ <header> : 문서 혹은 섹션의 머리글을 정의한다.

▶ <main> : 문서의 주 내용을 정의한다.

▶ <nav> : 탐색 링크를 정의한다.

▶ <section> : 문서의 섹션을 정의한다.

▶ <summary> : <details> 요소에 대한 보이는 제목을 정의한다.

▶ <time> : 날짜/시간을 정의한다.

 

▶ Semantic 요소 = 의미를 가진 요소

 

■ Semantic 요소는 무엇인가?

▶ Semantic 요소는 Browser와 개발자에게 의미를 명확하게 설명한다.

▶ non-semantic 요소 : <div>, <span> - 내용에 대해 아무 말도 하지 않는다.

▶ semantic 요소 : <form>, <table>, <article> - 내용을 명확하게 정의한다.

 

■ HTML의 Semantic 요소

▶ 많은 웹 사이트는 탐색, 머리글 및 바닥글을 나타내는 <div id="nav">, <div class="header">, <div id="footer"> 같은

HTML 코드를 포함한다.

▶ HTML에는 웹 페이지의 다른 부분을 정의하는데 사용할 수 있는 일부 semantic 요소가 있다.

▷ <article>

▷ <aside>

▷ <figcaption>

▷ <figure>

▷ <footer>

▷ <header>

▷ <main>

▷< mark>

▷ <nav>

▷ <summary>

▷ <time>

 

■ <section> 요소

▶ <section> 요소는 문서의 섹션을 정의한다.

▶ W3C HTML 문서에 따르면 한 섹션은 일반적으로 제목이 있는 콘텐츠의 주제별 그룹이다.

▶ <section> 요소에 사용할 수 있는 예시는 아래와 같다.

▷ 챕터

▷ 소개

▷ 뉴스 항목

▷ 연락처 정보

▶ 웹 페이지는 일반적으로 소개, 콘텐츠 및 연락처 정보를 위한 섹션으로 분할될 수 있다.

<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>

<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_section

 

■ <article> 요소

▶ <article> 요소는 독립적이고 자체 포함된 콘텐츠를 지정한다.

▶ <article>은 그 자체로 의미가 있어야하며, 웹 사이트의 나머지 부분과 독립적으로 배포할 수 있어야 한다.

▶ <article> 요소에 사용할 수 있는 예시는 아래와 같다.

<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>

<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>

<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_article 

 

▶ CSS 사용하여 <article> 요소를 설정한다.

<html>
<head>
<style>
.all-browsers {
  margin: 0;
  padding: 5px;
  background-color: lightgray;
}

.all-browsers > h1, .browser {
  margin: 10px;
  padding: 5px;
}

.browser {
  background: white;
}

.browser > h2, p {
  margin: 4px;
  font-size: 90%;
}
</style>
</head>
<body>

<article class="all-browsers">
  <h1>Most Popular Browsers</h1>
  <article class="browser">
    <h2>Google Chrome</h2>
    <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
  </article>
  <article class="browser">
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
  </article>
  <article class="browser">
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
  </article>
</article>

</body>
</html>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_article2 

 

■ <header> 요소

▶ <header> 요소는 소개 콘텐츠 또는 일련의 탐색 링크에 대한 컨테이너를 나타낸다.

▶ <header> 요소는 일반적으로 아래에 항목을 포함한다.

▷ 하나 이상의 헤딩 요소 : <h1> ~ <h6>

▷ 로고 혹은 아이콘

▷ 저자 정보

 

※ 한 HTML 문서 안에 여러 <header> 요소를 가질 수 있다.

※ 그러나, <header>는 <footer>, <address> 혹은 다른 <header> 요소를 안에 배치할 수 는 없다.

<article>
  <header>
    <h1>What Does WWF Do?</h1>
    <p>WWF's mission:</p>
  </header>
  <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_header 

 

■ <footer> 요소

▶ <footer> 요소는 문서 혹은 섹션에 바닥글을 정의한다.

▶ <footer> 요소는 일반적으로 아래에 항목을 포함한다.

▷ 저자 정보

▷ 저작권 정보

▷ 연락처 정보

▷ 사이트맵

▷ 상위 링크로 돌아가기

▷ 관련 문서

▶ 한 문서 안에 여러 <footer> 요소를 가질 수 있다.

<footer>
  <p>Author: Hege Refsnes</p>
  <p><a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_footer 

 

■ <nav> 요소

▶ <nav> 요소는 탐색 링크 집합을 정의한다.

※ 문서의 모든 링크가 <nav> 요소 안에 있어야 하는 것은 아니다.

※ <nav> 요소는 탐색 링크의 주요 블록에만 사용된다.

※ 비활성화된 사용자를 위한 스크린 리더와 같은 Browse는 이 요소를 사용하여 이 콘텐츠의 초기 렌더링을

생략할지 여부를 결정할 수 있다.

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_nav 

 

■ <aside> 요소

▶ <aside> 요소는 배치된 콘텐츠 이외의 일부 콘텐츠를 정의한다.

▶ 콘텐츠는 주변 콘텐츠와 간접적으로 관련되어야 한다.

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_aside 

 

▶ CSS 사용하여 <aside> 요소를 지정한다.

<html>
<head>
<style>
aside {
  width: 30%;
  padding-left: 15px;
  margin-left: 15px;
  float: right;
  font-style: italic;
  background-color: lightgray;
}
</style>
</head>
<body>

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

<aside>
<p>The Epcot center is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

</body>
</html>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_aside2 

 

■ <figure>와 <figcaption> 요소

▶ <figure> 태그는 일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자체 포함 콘텐츠를 지정한다.

▶ <figcaption> 태그는 <figure> 요소에 대한 표제를 정의한다.

▶ <figcaption>는 <figure> 요소 첫 번째 도는 마지막 자식으로 배치될 수 있다.

▶ <img> 요소는 실제 이미지/그림을 정의한다.

<figure>
  <img src="pic_trulli.jpg" alt="Trulli">
  <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>

▶실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_figcaption

 

■ 왜 Semantic 요소인가?

▶ W3C 에 따르면 semantic 웹을 통해 애플리케이션, 기업 및 커뮤니티에서 데이터를 공유하고 재사용할 수 있다.