Programming/html5 & css3

Html5_8/ 공간분할 태그 - div, span 태그

mungee 2019. 8. 17. 19:59

Html에서 공간을 분할하는 이유 : 공간을 분할해야 CSS를 사용해 원하는 레이아웃을 구성할 수 있다.

공간분할하는 형식은 Block형식과 Inline 형식으로 나뉜다.

block은 빌딩처럼 층층이 분할

inline은 가로로 길게 한 층을 칸칸이 분할

 

*공간분할 태그

<div></div> - block 형식으로 공간분할

<span></span> - inline 형식으로 공간분할

 

 

<body>

   <div>Block</div>

   <div>Block</div>

   <div>Block</div>

   <div>Block</div>

   <div>Block</div>

 

   <span>Inline</span>

   <span>Inline</span>

   <span>Inline</span>

   <span>Inline</span>

   <span>Inline</span>

 

   <div><span>Inline</span><span>Inline</span><span>Inline</span></div>

 

   <!--Block 형식--> h1~6 / div / p / ul / ol / li / table / form

   <h1>글자</h1>

   <p>글자</p>

 

   <!--Inline형식--> span / a / input / 글자형식태그(b/i/del/sub/sup...)

   <a href="">글자</a>

   <b>글자</b>

   <i>글자</i>

   <input type="">

    /*참고로 <img src="">는 inline처럼 보이는 inline-block*/

 

   <!--html5 시멘틱 태그 (=div와 같은 기능. div대체. 웹페이지 구조를 쉽게 이해하게 하는데 의미가 있다.)-->

   <header></header> - body밑에 h1태그를 감싸는 헤더태그   header>h1

   <nav></nav> - 네비게이션 (카테고리 그룹)   nav>ul>li<a href>

   <aside></aside> - 사이드에 위치하는 공간

   <section></section> - 여러 중심내용을 감싸는 공간  section>article>h1>p

   <article></article> - 글자가 많이 들어가는 부분

   <footer></footer>

    ...

</body>