[HTML] 공간 분할 태그

웹 문서에서 공간을 분할하는 방법은 <div>와 <span> 태그를 이용하면 된다.

 

<div>와 <span> 태그

공간을 분할하기 위해 사용하는 태그로 공간을 전체적으로 분할하여 사용할 것인지, 일부 영역만 분할하여 사용할 것인지에 따라 다르게 사용된다. 간단하게 말하면 블록 형식과 인라인 형식으로 나뉜다고 생각하면 된다.

 

<div> 태그

웹 브라우저 전체 공간에 대해 분할한다. 이를 '블록 형식'이라고 한다.

 

<span> 태그

웹 브라우저의 일부 영역만 분할한다. 이를 '인라인 형식'이라고 한다.

 

인라인 형식 (Inline)

• 특징: 요소가 한 줄 내에서 다른 요소들과 함께 나란히 배치된다.
• 사용 용도: 주로 텍스트 내에서 작은 단위의 요소에 적용됩니다. 예를 들어, 굵은 글씨, 기울임 글씨, 하이퍼링크 같은 것들이 인라인 형식이다.
• 크기: 인라인 요소는 자신이 포함된 텍스트의 높이에 맞춰 자동으로 조정되며, 블록을 차지하지 않는다.
• 예시: HTML에서 <span>, <a>, <em>, <strong> 등이 인라인 요소이다.
• 특징 요약: 새로운 줄로 넘어가지 않고 텍스트와 함께 흐르며 한 줄을 나란히 사용한다.

블록 형식 (Block)

• 특징: 요소가 독립된 블록으로 처리되어, 항상 새로운 줄에서 시작하고 전체 너비를 차지한다.
• 사용 용도: 문단, 제목, 리스트 등의 큰 단위 요소에 사용된다.
• 크기: 블록 요소는 기본적으로 부모 요소의 전체 너비를 차지하며, 크기를 조정할 수 있다.
• 예시: HTML에서 <div>, <p>, <h1>, <ul>, <li> 등이 블록 요소이다.
• 특징 요약: 요소가 독립적인 영역을 차지하고, 다른 요소들 위나 아래에 위치하게 된다.

 

<h3>div 공간 분할</h3>
    <div style="background-color: #ffff00;">div 첫 번째 영역</div>
    <div style="background-color: #00ff00;">div 두 번째 영역</div>
    <div style="background-color: #ff00ff;">div 세 번째 영역</div>
<h3>span 공간 분할</h3>
    <span style="background-color: #ffff00;">span 첫 번째 영역</span>
    <span style="background-color: #00ff00;">span 두 번째 영역</span>
    <span style="background-color: #ff00ff;">span 세 번째 영역</span>

 

출력 결과