<div>태그, <span>태그 각각의 특성(블럭 요소와 인라인 요소)

 

레이아웃에 사용되는 <div> 태그

 

<div> 태그는 블럭(block) 요소로 다른 블럭 요소와 줄바꿈이 일어납니다.

 

 <div style="background-color:#22ff11">div1</div>
 <div style="background-color:#aaffaa">div2</div>

 

위 태그의 결과는 다음과 같이 나타납니다.

 

[div 태그의 특성을 알아보는 예]

 

한 줄을 차지하는 영역은 콘텐츠의 내용에 따라 높이가 달라집니다. 아래와 같이 텍스트를 추가형 콘텐츠의 내용을 증가시켰습니다.

 

 <div style="background-color:#22ff11">div1.. 테스트 문장..테스트 문장..테스트 문장..테스트 문장..테스트 문장..</div>
 <div style="background-color:#aaffaa">div2</div>

 

창의 영역이 충분하다면 한 줄에 모든 내용이 출력됩니다. 하지만 창의 영역이 충분하지 않다면 높을 확장에 줄을 바꿔서 출력합니다.

 

[창에 충분한 영역이 존재할 때 나타나는 방식]

 

[창의 너비가 부족하자 콘텐츠의 줄바꿈을 통해 나타냄]

 

 

 

<span> 태그

 

<span> 태그는 인라인 요소입니다. 순차적으로 나타는 인라인 요소들은 줄바꿈을 하지 않습니다.

 

<span style="background-color:#22ff11">span1.. 테스트 문장..테스트 문장..테스트 문장..테스트 문장..테스트 문장..</span>
<span style="background-color:#aaffaa">span2</span>

 

위 결과는 아래와 같습니다.

 

[창에 너비 영역이 충분할 때 표시 방법]

 

[창의 너비가 충분하지 않을 경우 표시 방법]

 

 

<div> 태그는 블럭 요소를 대표하는 태그이고, <span> 태그는 인라인 요소를 대표하는 태그입니다.

 

블록 요소는 브라우저에서 앞 뒤 줄이 바꿔여 표시되며, 인라인 요소는 앞 뒤에 줄이 바뀌어 지더라도 텍스트의 일부로 취급됩니다. 어느 요소나 포함관계를 가질 수 있지만 블록 요소 안에는 블록 요소와 인라인 요소가 함께 사용될 수 있지만 인라인 요소 안에는 인라인 요소만 사용할 수 있습니다.

 

 

 

블록 요소

 

<div>, <dl>, <form>, <h1>~<h6>, <hr>, <ol>, <p>, <ul>, <table> 등이 있습니다.

 

 

 

인라인 요소

 

<span>, <strong>, <img> 등이 있습니다.

 

 

 

블록 요소와 인라인 요소가 순차적으로 사용되었을 때 반응

 

인라인 요소와 블록 요소가 순차적으로 사용되었을 때 블록 요소를 기준으로 줄 바꿈이 일어납니다.

 

<span style="background-color:#22ff11">span1.. 테스트 문장..테스트 문장..테스트 문장..테스트 문장..테스트 문장..</span>
<div style="background-color:#22ffff">div1</div>
<span style="background-color:#aaffaa">span2</span>

 

위 결과는 다음과 같습니다.

 

[인라인 요소와 블록 요소의 혼재]