[HTML] 공간분할

<!--공간분할-->

    <h1>공간분할</h1>

    <h2>1. 블록</h2>

    <h3>[물리적 공간 분할]</h3>

    <p style="background-color: chartreuse;">p는 블록입니다.</p>

    <div style="background-color: coral;">div도 블록입니다.</div>

 

 

<!--의미적 분할 - 시멘틱틀-->

<div style="text-align: center; width: 240px;">

    <header style="background-color: deeppink;">헤더입니다.</header>

    <nav style="background-color: forestgreen;">내비게이션</nav>

    <section style="background-color: yellow; float: left;">

        <article>섹션 내부 아티클1</article>

    </section>

    <aside style="background-color: violet; " >사이드</aside>

    <footer style="background-color: orange;">Footer</footer>

   </div>

[결과]

aside 아티클이 아닌 애들인데 꼭 옆에 있어야하는 것이 아니라 옆에 치우친거

 

float : 공간을 정해주는 것

 

clear : 어떤 영역에서는 영향을 받지 않게 하는 것

 

가장 자주 쓰이는 시맨틱 요소는 div와 span