Html_semantic

• before

: div 로만 페이지의 구조를 설계 했을 때

<div style="height: 50px; background-color: pink">Header (헤더)</div>
    <div style="height: 1000px; background-color: skyblue; display: flex">
      <div style="background: orange; width: 80%">
        Section
        <div style="background: lime; height: 100px">Article1</div>
        <div style="background: darkgray; height: 100px">Article2</div>
        <div style="background: lime; height: 100px">Article3</div>
        <div style="background: darkgray; height: 100px">Article4</div>
      </div>
      <div style="background: royalblue; width: 20%">Aside</div>
    </div>
    <div style="height: 80px; background: palegreen">Footer(푸터)</div> 

after: semantic 태그

div 태그와 역할은 다른게 없으나, "의미가 있는 태그"를 적절하게 활용해서 구조를 작성할 때.

Header (헤더) Section Article1 Article2 Article3 Article4 Aside Footer (푸터)

<header style="height: 50px; background-color: pink">Header (헤더)</header>
<main style="height: 1000px; background-color: skyblue; display: flex">
<section style="background: orange; width: 80%">
Section
<article style="background: lime; height: 100px">Article1</article>
<article style="background: darkgray; height: 100px">Article2</article>
<article style="background: lime; height: 100px">Article3</article>
<article style="background: darkgray; height: 100px">Article4</article>
</section>
<aside style="background: royalblue; width: 20%">Aside</aside>
</main>
<footer style="height: 80px; background: palegreen">Footer (푸터)</footer>