Layout

1. 웹페이지의 레이아웃을 구성하기 위해서 공간을 분할할 필요가 있다.
   
   공간을 분할할 수 있는 태그는 div, sapn, table 등이 있는데, 과거에는 table 태그를 사용하여 레이아웃을 구성하기도 하였으나 모던 웹에서는 주로 div 를 사용하여 레이아웃을 구성한다.
   
   

   Tag	Description
   header	헤더를 의미.
   nav	내비게이션을 의미.
   aside	사이드에 위치하는 공간을 의미.
   section	본문의 여러 내용(atticle)을 포함하는 공간을 의미.
   article	본문의 주내용이 들어가는 공간을 의미.
   footer	푸터를 의미한다.

   이와 같은 공간 분할 태그는 일반적으로 다른 요소를 포함하는 컨테이너 역할을 하게 된다.
   div와 span의 차이는 block레벨 요소와 inline레벨 요소를 이해해야 한다.
   
   

블록타입 요소

 display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지한다.

<p style="border: 3px solid red">
    p요소는 display 속성값이 블록인 요소입니다.
</p>

<p>, <div> , <h> , <ul> , <ol> , <form> 요소는 display 속성값이 블록인 대표적인 요소이다.

 

<div>요소

<div>요소는 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록요소이다.

 <div>요소는 주로 여러 요소들의 스타일을 한 번에 적용하기 위해 사용된다.

<div style="background-color:lightgrey; color:green; text-align:center">
    <h1>div요소를 이용한 스타일 적용</h1>
    <p>이렇게 div요소로 여러 요소들을 묶은 다음에 style 속성과 클래스 등을 이용하여
    한 번에 스타일을 적용할 수 있습니다.</p>
</div>

 

인라인 타입의 요소

 display 속성값이 인라인(inline) 인 요소는 새로운 라인(line)에서 시작하지 않는다.

또한, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지한다.

<p>
    <span style="background-color:grey; color:orange">span태그</span>는 display 속성값이 인라인인 요소입니다.
</p>

<span>, <a>, <img> 요소는 display 속성값이 인라인(inline)인 대표적인 요소이다.

 

<span> 요소

 <span> 요소는 텍스트(text)의 특정 부분을 묶는 데 자주 사용되는 인라인(inline)요소이다.

<span>요소는 주로 텍스트의 특정 부분에 따로 스타일을 적용하기 위해 사용된다.

<p>이렇게
<span style="border: 3px solid red">span요소로 텍스트의 일부분</span>
만을 따로 묶은 후에 스타일을 적용할 수 있습니다.</p>