728x90
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 를 이용해서 변경이 가능합니다.
728x90
