display

display란?

 

html 요소들을 시각적으로 어떤 형식으로 보여줄지 결정하는 속성

---

display: none;

: 화면에서 보여지지 않음

 

display: inline;

: span, a, img, strong

: 기본적으로 텍스트처럼 옆으로 쭉 나열되다가 공간이 모자르면 다음 줄로 넘어가는 특징

: width height 설정 불가

 

display: block;

: div, p, h

: 블록 요소가 있는 한줄을 전부 차지하고 높이는 컨텐츠의 높이만큼 차지하는 특징

: 옆에 공간이 남더라도 다음 줄로 줄바꿈을 함

: width height 설정이 가능

 

display: inline-block;

: 컨텐츠가 차지하는 공간만큼을 차지함

: 옆에 공간이 남으면 inline 속성처럼 옆으로 정렬됨

: inline-block 사이에는 약간의 틈이 생김

  틈을 없애려면 부모요소에 font-size: 0;을 주는 방법이 있음, 하지만 그렇게 하면 자식 요소에 텍스트 크가가 전부 0이 되어버리기 때문에 자식 요소에 각각 font-size를 따로 줘야함

: width height 설정이 가능