📝 display속성은 웹 페이지의 레이아웃을 결정하는 CSS의 중요한 속성 중 하나입니다.
📜 display: block;
- display 속성 값이 block 인 요소는 해당 라인의 모든 너비를 차지합니다.
ex) <div>, <h1>, <p>, <ul>, <li>, <article> ...📜 display: inline;
- display 속성 값이 inline 인 요소는 해당 라인 전체가 아닌 해당 HTML 요소의 내용만큼 차지합니다.
ex) <span>, <a>, <b>, <em>, <img> ...📜 display: inline-block;
-
display 속성 값이 inline-block 인 요소는 해당 요소 자체는 inline 요소처럼 동작합니다.
-
inline 요소에서 불가능하던 width 와 height 속성 지정 및 margin 과 padding 속성 지정이 가능해집니다.
📜 display 속성의 기본값 변경
- display 속성값이 각각 block, inline 으로 지정되어 있어도 변경할 수 있습니다.
ex)
<style>
li{ display: inline; }
</style>위의 예제처럼 block요소인 <li>태그의 속성값을 inline으로 변경하게 되면 해당 라인의 모든 너비를 차지하는 block요소의 특징을 잃어버리게 됩니다. 이렇게 HTML 태그 별로 기본적으로 적용되어 있는 속성값은 원하는 값으로 css를 이용해서 변경이 가능합니다.
Frontend Developer