[HTML] 영역관련태그

수직 분할

• <div></div>
• block 요소로 공간을 수직으로 분할할 때 사용하는 태그

 

<코드>

<h3> div 태그 </h3>
<div> 첫 번째 영역 </div>
<div> 두 번째 영역 </div>
<div> 세 번째 영역 </div>

 

<결과>

 

수평분할

• <span></span>
• inline 요소로 공간을 수평으로 분할할 때 사용하는 태그

 

<코드>

<h3> span 태그 </h3>
<span> 첫 번째 영역 </span>
<span> 두 번째 영역 </span>
<span> 세 번째 영역 </span>

 

<결과>

 

div 태그 영역과 span 태그 영역

<코드>

<h3> div태그와 span태그의 영역</h3>
<b> div 영역 </b>
<div style="background: yellow;"> 
		새가 봄바람을 인생을 듣기만 우리 힘있다. 같이, 지혜는 우리는 속에 것은 가슴에 오아이스도 끓는 피어나는 약동하다. 위하여 그들은 일월과 인도하겠다는 방지하는 주며, 
        쓸쓸한 사막이다. 살았으며, 위하여 싶이 천지는 피어나기 끓는 있는 지혜는 뿐이다. 이것을 인생에 어디 품었기 철환하였는가? 꽃 미인을 가지에 쓸쓸한 것이다. 거친 방황하여도, 있는 위하여, 
        철환하였는가? 작고 우리 우리 원대하고, 어디 위하여서. 청춘의 황금시대를 오아이스도 끝까지 장식하는 두손을 철환하였는가? 동력은 현저하게 따뜻한 사랑의 이것은 듣는다. 새가 하였으며, 끓는 되는 철환하였는가? 
</div>

<br>
    
<b> span 영역 </b><br>
<span style="background: cyan;"> 
		새가 봄바람을 인생을 듣기만 우리 힘있다. 같이, 지혜는 우리는 속에 것은 가슴에 오아이스도 끓는 피어나는 약동하다. 위하여 그들은 일월과 인도하겠다는 방지하는 주며, 
        쓸쓸한 사막이다. 살았으며, 위하여 싶이 천지는 피어나기 끓는 있는 지혜는 뿐이다. 이것을 인생에 어디 품었기 철환하였는가? 꽃 미인을 가지에 쓸쓸한 것이다. 거친 방황하여도, 있는 위하여, 
        철환하였는가? 작고 우리 우리 원대하고, 어디 위하여서. 청춘의 황금시대를 오아이스도 끝까지 장식하는 두손을 철환하였는가? 동력은 현저하게 따뜻한 사랑의 이것은 듣는다. 새가 하였으며, 끓는 되는 철환하였는가?
</span>

 

<결과>

• div 영역은 block 요소로 텍스트 전체 영역에 배경색이 지정됨.
• span 영역은 inline 요소로 각 문장마다 배경색이 지정됨.

* <p>태그와 <pre> 또한 block 요소로 텍스트 전체 영역에 배경색이 지정된다.