Display Property : inline, block, inline-block

Display 

Display 속성은 각 요소들이 렌더링 되어지는 화면 표기 방법을 결정할 수 있다.

속성들 중 none, inline, inline-block, block 4가지가 주로 쓰인다.

HTML에서 기본 표시 값은 HTML 사양이나 브라우저나 유저의 기본 스타일 시트에서 가져오는데,
XML의 기본값은 SVG 요소를 포함한 inline이다.

💡 XML ? : eXtensible Markup Language로 W3C에서 개발된 다목적 마크업 언어이다. 인터넷에 연결된 시스템끼리 데이터를 쉽게 주고 받을 수 있게 HTML의 한계를 극복할 목적으로 만들어 졌다.

💡 SVG ? : Scalable Vector Graphics. XML에 기반하여 벡터 그래픽을 표현하기 위해 개발된 그래픽 파일 형식이다.

 

---

(1) none

주로 JavaScript와 함께 동적 UI를 위해 사용되며, 요소를 숨길 수 있다.

HTML의 <script> 요소는 display: none; 이 기본적으로 적용되어 있다.

 

(2) inline

한줄을 차지하지 않고, 요소의 필요한 만큼만 너비를 차지하게 해준다.

<span>, <a>, <img>

 

(3) inline-block

inline 과의 차이점은 요소의 너비와 높이를 별도로 설정할 수 있다는 것이다.

또한, inline-block의 경우 여백과 패딩이 존중되지만, inline은 그렇지 않다.

block 과의 차이점은 inline-block은 요소 뒤에 줄 바꿈을 추가하지 않으므로 다른 요소가 옆에 올 수 있다.

inline-block은 수평으로 나열되어 있는 네비게이션 바 목록을 제작할 때 많이 사용된다.

 

(4) block

항상 새 줄에서 시작하며, 사용 가능한 전체 너비를 차지한다.

<div>, <h1>~<h6>, <p>, <form>, <header>, <footer>, <section>

 

 

---

 

연관 글 : https://dinobox.tistory.com/23

display:none 과 visibility:hidden 의 차이