[CSS] 디스플레이 속성 (display property)

이번 시간에는 HTML 요소들이 가지고 있는 디스플레이 속성에 대해 알아보겠습니다.

 

---

HTML 요소들은 디스플레이 속성을 지니고 있습니다. 이 속성에 따라 웹에 HTML 요소가 어떻게 표시되는지 결정됩니다. HTML 요소들은 두 가지로 나뉩니다. 하나는 블록 요소(block element), 두 번째는 인라인 요소(inline element)입니다.

 

1. 블록 요소(block element)

 

블록 요소는 항상 새로운 줄에서 시작하며 한 줄을 모두 그 요소가 차지합니다.

 

 

블록 속성을 가지고 있는 요소의 종류에는 <p></p> 태그, <ul></ul> 태그, <ol></ol> 태그, <div></div> 태그

등이 있습니다. (참고 - choirim.tistory.com/5 - HTML 태그(tag) )

 

블록 요소 중 태그 글에서 설명하지 못한 <div> </div> 태그는 html 요소들을 하나로 묶을 때 사용됩니다. 아무 뜻 없이 요소들을 그저 그룹으로 묶고 싶을 때 사용되는 태그입니다.

 

<div>
  <p> paragraph </p>
  <p> paragraph2 </p>
</div>

 

2. 인라인 요소(inline element)

 

인라인 요소는 새로운 줄에서 시작하지 않으며 한 줄을 모두 차지하지 않고 요소의 내용만큼만 차지합니다.

 

 

인라인 속성을 가지고 있는 요소의 종류에는 <a> 태그, <img> 태그, <span> 태그 등이 있습니다.

 

블록 요소 중 <span></span> 태그는 태그 안 텍스트의 특정 부분에 사용됩니다.

 

<p> inline <span>element</span> </p>

 

 

정리해보면, 블록 요소(block element)는 한 라인을 모두 차지하는 요소이며 인라인 요소(inline element)는 요소의 내용만큼만 차지하는 요소입니다.

---