Front-End-Web/html+css

제11강_Html Semantic & Layout

jsBae 2022. 10. 8. 00:18

HTML Semantic

HTML5에서는 웹 페이지의 레이아웃만을 위한 별도의 새로운 의미론적 Tag들을 제공합니다. 

시맨틱 요소란?

  • 의미론적 요소는 브라우저와 개발자 모두에게 의미를 명확하게 설명합니다.

HTML의 시맨틱 요소

  • 많은 웹 사이트에는 탐색, 머리글 및 바닥글을 나타내는 <div id="nav"> <div class="header"> <div id="footer"> 와 같은 HTML 코드가 포함되어 있습니다.
  • HTML에는 웹 페이지의 다른 부분을 정의하는데 사용할 수 있는 몇 가지 의미론적 요소가 있습니다.

HTML5에서 추가된 의미(Semantic) Tag

 

  • <header> : HTML 헤더나 section에 헤더를 정의함.
  • <nav> HTML 메뉴바를 정의함.
  • <main> : HTML 전체 Content를 정의함.
  • <section> : HTML Section을 정의함.
  • <article> HTML 하나의 글(aricle)을 정의함.
  • <aside> 웹 페이지에서 배너나 추가적인 문구 등을 정의함.
  • <footer> : HTML Footer를 정의함.

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
<header>
<h2>header 부분입니다.</h2>
</header>
<nav>
<h2>nav 부분입니다.</h2>
</nav>
<main>
<section>
<p>section1 부분입니다</p>
<article>
<p>article1 부분입니다</p>
</article>
</section>
<section>
<p>section2 부분입니다</p>
<article>
<p>article2 부분입니다</p>
</article>
</section>
<aside>
<p>aside 부분입니다.</p>
</aside>
</main>
<footer>
<h2>footer 부분입니다.</h2>
</footer>
</body>
</html>

주의 : style을 통해서 레이아웃을 정리해야 한다.

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Style the header */
header {
  background-color: #666;
  padding: 30px;
  text-align: center;
  font-size: 35px;
  color: white;
}

/* Create two columns/boxes that floats next to each other */
nav {
  float: left;
  width: 30%;
  height: 300px; /* only for demonstration, should be removed */
  background: #ccc;
  padding: 20px;
}

/* Style the list inside the menu */
nav ul {
  list-style-type: none;
  padding: 0;
}

article {
  float: left;
  padding: 20px;
  width: 70%;
  background-color: #f1f1f1;
  height: 300px; /* only for demonstration, should be removed */
}

/* Clear floats after the columns */
section::after {
  content: "";
  display: table;
  clear: both;
}

/* Style the footer */
footer {
  background-color: #777;
  padding: 10px;
  text-align: center;
  color: white;
}

/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {
  nav, article {
    width: 100%;
    height: auto;
  }
}
</style>
</head>
<body>

<h2>CSS Layout Float</h2>
<p>In this example, we have created a header, two columns/boxes and a footer. On smaller screens, the columns will stack on top of each other.</p>
<p>Resize the browser window to see the responsive effect (you will learn more about this in our next chapter - HTML Responsive.)</p>

<header>
  <h2>Cities</h2>
</header>

<section>
  <nav>
    <ul>
      <li><a href="#">London</a></li>
      <li><a href="#">Paris</a></li>
      <li><a href="#">Tokyo</a></li>
    </ul>
  </nav>
  
  <article>
    <h1>London</h1>
    <p>London is the capital city of England. It is the most populous city in the  United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
    <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
  </article>
</section>

<footer>
  <p>Footer</p>
</footer>

</body>
</html>

HTML <섹션> 요소

  • 요소는 문서 의 <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>

HTML <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>

HTML <헤더> 요소

  • 요소 는 <header>소개 콘텐츠 또는 탐색 링크 집합의 컨테이너를 나타냅니다.
  • 요소 에는 <header>일반적으로 다음이 포함됩니다.
    • 하나 이상의 제목 요소(<h1> - <h6>)
    • 로고 또는 아이콘
    • 저작권 정보

참고:<header> 하나의 HTML 문서에 여러 요소가 있을 수 있습니다. 그러나 , 또는 다른 요소 <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>

HTML <바닥글> 요소

  • <footer>요소는 문서 또는 섹션의 바닥글을 정의합니다 .
  • 요소 에는 <footer>일반적으로 다음이 포함됩니다.
    • 저작권 정보
    • 저작권 정보
    • 연락처 정보
    • 사이트맵
    • 맨 위로 링크로 돌아가기
    • 관련된 문서
  • 하나의 문서에 여러 <footer>요소가 있을 수 있습니다.
<footer>
  <p>Author: Hege Refsnes</p>
  <p><a href="mailto:hege@example.com">hege@example.com</a></p>
</footer

HTML <nav> 요소

  • <nav>탐색 링크 세트를 정의합니다.
<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

HTML <aside> 요소

  • 요소는 ( <aside>사이드바와 같이) 배치된 콘텐츠 외에 일부 콘텐츠를 정의합니다.
  • 콘텐츠 는 <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>

HTML <Figure> 및 <figcaption> 요소

  • 태그 는 <figure>일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자체 포함된 콘텐츠를 지정합니다.
  • <figcaption>캡션을 정의합니다 <figure>. 요소 는 <figcaption>요소의 첫 번째 또는 마지막 자식으로 배치할 수 있습니다
  • <img>실제 이미지/그림을 정의합니다. 
<figure>
  <img src="pic_trulli.jpg" alt="Trulli">
  <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>

 

728x90
반응형
저작자표시 비영리 동일조건 (새창열림)