[CODECADEMY] 코드카데미 5일차 : Semantic HTML (header/nav/main/footer/section/aside/figure/video/audio/embed)

 

 

 

다른 개발자가 내 코드를 보고 파악을 쉽게 하기 위해 구조화 시키는 것이 좋다 =  Semantic

 

 

1. header

 

페이지의 머리에 해당하는 부분으로 네비게이션 링크나 <h1>~<h6>의 헤딩테그를 포함한다. 

 

사용법 :  <header></header> 또는 <div id="header"></div>

<header>
  <h1>
     Everything you need to know about pizza!
  </h1>
</header>

<div id="header">
  <h1>
    Everything you need to know about pizza!
  </h1>
</div>

 

2. nav

링크태그를 담는 태그

<header> 안에서 또는 <nav>독립적으로 사용할 수 있다. 

사용법 : <nav></nav>

<header> 
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>      
    </ul>
  </nav>
</header>

 

3. main

주된 내용을 담는 본문 태그 

<article>과 <header> 태그가 자식태그로 포함될 수 있다.

사용법 : <main></main>

<main>
  <header>
    <h1>Types of Sports</h1>
  </header>
  <article>
    <h3>Baseball</h3>
    <p>
      The first game of baseball was played in Cooperstown, New York in the summer of 1839.
    </p>
  </article>
</main>

 

4. footer

웹페이지 제일 하단에 위치하여 main 내용과 구분지음. 

연락처, 저작권약관, 회사소개, 고객센터 같은 내용을 담는다. 

사용법 : <footer></footer>

<footer>
  <p>Email me at Codey@Codecademy.com</p>
</footer>

 

5. section

글의 문단을 나누어 읽기 쉽게 / 문단별 의미하는바가 다른 것 처럼 

홈페이지 바디상에 있는 코드의 문단을 나누어 구분해 준다. 

사용법 : <section></section>

<section>
  <h2>Fun Facts About Cricket</h2> 
</section>

 

5-1. article

section으로 구분한 문단 안에 주된 내용 부분을 감싸주는 역할

 

사용법 : <section> <article></article> </section>

<section>
  <h2>Fun Facts About Cricket</h2>
  <article>
    <p>A single match of cricket can last up to 5 days.</p>
  </article>
</section>

 

6. aside

참고문헌, 주석, 인용, 사설, 추가 정보를 표시 함. 

article은 중요 정보를 담는 반면, aside는 굳이 알지 않아도 이해되는데 문제가 없는 내용을 담음. 

사용법 : <aside> </aside>

<article>
  <p>The first World Series was played between Pittsburgh and Boston in 1903 and was a nine-game series.</p>
</article>
<aside>
  <p>
   Babe Ruth once stated, “Heroes get remembered, but legends never die.” 
  </p>
</aside>

 

7. figure

이미지를 담는 태그 

사용법 : <figure> </figure>

<figure>
  <img src="overwatch.jpg"/>
</figure>

 

7-1. figcaption

해당 figure의 자막을 표시함. 

<p></p>를 이용하여 자막을 쓸 수도 있지만, <figcaption>은 어디로 이미지가 이동하던지 따라가기 때문에 쓰기 편하다. 

사용법 : <figure><figcaption> </figcaption> </figure>

<figure>
  <img src="overwatch.jpg">
  <figcaption>This picture shows characters from Overwatch.</figcaption>
</figure>

 

8. auidio

오디오 삽입

audio autoplay controls 를 이용하여 오디오 재생,정지, 일시정지버튼이 나오도록 할 수 있다. 

사용법 : <auidio> <source src="" type="audio/mp3"> </auidio> 

<audio autoplay controls>
  <source src="iAmAnAudioFile.mp3" type="audio/mp3">
</audio>

 

9. video

비디오 삽입

<video>오프닝과 클로징 태그 사이이에 글을 적으면

비디오가 나올수없는 상황일때 그 글자가 비디오 대신 나타남. 

마찬가지로 controls를 이용해 재생 및 정지버튼 나오게 하기 

controls 대신 autoplay(자동재생), loop(반복재생) 사용할 수 있음

사용법 : <video src="" type="audio/mp3" controls> </video> 

<video src="coding.mp4" controls>Video not supported</video>

 

10. embed

.gif 또는 그외 확장자 파일 삽입. 클로징태그가 따로 없다. 

사용법 : <embed src=""/>

<embed src="download.gif"/>