display 프로퍼티
- display 는 css에서 레이아웃을 제어하기 위한 가장 중요한 프로퍼티
프로퍼티란?!
: attribute에 대한 HTML DOM 트리안에서의 표현.
ex. attribute는 값이 ‘my-class’이며 이름이 ‘className’인 property를 가진다.
attribute란?!
: HTML 요소의 추가적인 정보를 전달하고 이름=“값” 이렇게 쌍으로 온다.
<div class=“my-class”></div>를 보면 div 태그가 class 라는 값이 ‘my-class’인 attribute를 가지고 있다.
- 대부분 엘리먼트에 대한 기본 값은 block & inline
1) block
div 는 표준 블록 엘리먼트, 좌우로 최대한 늘어난다.
자주 볼 수 있는 다른 블록 엘리먼트 >> p / form / header / footer / section
혼자 한 줄을 차지한다.
inline element 와 달리 width, height, margin, padding 등 속성이 적용된다.
2) inline
흔한 엘리먼트는 span, a, em
인라인 엘리먼트는 단락 안에서 단락에 영향없이 그 텍스트를 감쌀 수 있다.
주의 !! inline 태그의 경우 width와 height 속성을 지정해도 무시된다.
🤷♂️ 왜?!?
해당 태그가 마크업하고 있는 컨텐트의 크기 만큼만 공간을 차지하도록 되어 있기 때문
3) none
script와 같은 일부 특별한 엘리먼트에서는 none을 기본값으로 사용하기도 하며 자바스크립트에서 엘리먼트를 실제로 삭제하고 재생성하지 않고도 엘리먼트를 보이고 감추는 데 흔히 사용됨.
4) inline-block
button, selct 등이 있다.
ex.
.box2 {
display: inline-block;
width: 200px;
height: 100px;
margin: 1em;
}float 속성을 적용한 것 처럼 레이아웃 형태로 표현 가능하다.
또한, inline 처럼 줄바꿈없이 다른 엘리먼트와 나란히 배치된다.
그러나! 🤦🏻 인라인에서 불가능하던, width, height, margin, padding 등 속성 지정이 가능하다
