display 속성
모든 요소에는 고유의 display 값이 있다.
display 값에 따라 블록레벨, 인라인 레벨 등 렌더링 박스의 유형이 결정된다.
display 속성으로 해당 요소의 렌더링 박스의 유형을 변경할 수 있으며 렌더링 여부도 결정할 수 있다.
div{ display: value }display 속성값
none: 요소가 렌더링 되지 않음inline: inline 레벨 요소처럼 렌더링
- 컨텐츠 내용만 포함한다.
- 대표적으로span태그block: block 레벨 요소처럼 렌더링
- 한 행을 가득 채운다.
- 대표적으로div태그inline-block: inline 레벨 요소처럼 렌더링 되지만 block 레벨의 성질을 갖는다. (height, width 등과 같은 박스모델 속성을 적용할 수 있다.)
- 배치는inline처럼 컨텐츠 내용만 포함한다.
- 성질은block처럼 박스 속성값을 다룰 수 있다.flex: 레이아웃을 보다 강력하게 배치할 수 있다. (추후에 따로 다룰 예정)grid: 레이아웃을 보다 강력하게 배치할 수 있다. (추후에 따로 다룰 예정)list-item,table,table-cell등등
요소를 안보이게 하는 대표적인 2가지 방법
display: none 요소가 렌더링 되지 않는다.(DOM에 존재하지 않음).
보이지도 않고 해당 공간도 존재하지 않게 된다.
visibility:hidden 요소가 보이지는 않지만 렌더링 되며 화면에 공간을 가지고 있다.(DOM에 존재함)
보이지만 않고 해당 공간은 존재.
width와height값을 주었다면 그 만큼 공간은 존재하게 된다.
inline, block, inline-block
이번 글에서는 inline, block, inline-block 에 대해 자세히 알아보자.
display와 박스 모델의 관계
| display | width | height | margin | padding | border |
|---|---|---|---|---|---|
block | O | O | O | O | O |
inline | x | x | 좌/우 | 좌/우 | 좌/우 |
inlin-block | O | O | O | O | O |
block레벨 요소는 박스모델의 모든 속성을 다룰 수 있다.inline레벨 요소는margin,padding,border속성만 다룰 수 있으며 좌우에만 적용되는 것을 볼 수 있다.
- 실제로는 상하에도 적용이 되지만 상하margin,padding,border은 line-box에는 영향을 미치지 않기 때문에 부모, 자식, 인접한 다른 요소끼리 컨텐츠가 겹칠수 있다. 따라서 실무에서는 좌우만 조정하여 사용한다.inline-block레벨 요소는inline레벨 요소처럼 렌더링 되지만block레벨의 성질을 갖기 때문에 박스모델의 모든 속성을 다룰 수 있다.
이렇게 외워보자!
block은 한 줄을 차지하는 박스 📦
inline은 한 줄 안에 있는 아코디언 🪗 (좌우만 조정 가능하기 때문에 아코디언악기로 비유)
inline-box는 한 줄 안에 있는 박스 📦(여러개 요소와 함께 한 줄 안에 공존 할 수 있다고 비유)
inline level요소들 사이의 공백과 개행
inline요소의 경우 공백과 개행에 대해서 하나의 여백으로 받아들인다.따라서
inline과inline-block의 경우 태그 사이의 공백이나 개행이 있을 경우 약 4px의 여백을 가지게 된다.
블록 > 인라인
블록 요소 안에는 인라인 요소 혹은 블록 요소를 포함할 수 있다.
인라인 요소는 항상 블록 요소 안에 포함되어 있으며 다른 인라인 요소를 포함할 수 있다.
인라인 요소 안에 블록 요소를 넣지 말자. (문법적 오류)
console.log(noah(🍕 , 🍺)); // true