웹 프론트엔드 | css 정리

display 속성

• none : 요소를 렌더링하지 않음. 영역도 차지하지 않는다.
• block :
• inline
• inline-block
• flex
• grid

none

요소를 랜더링 하지 않는다

block

div, p, h li 태그 등이 해당

가로 영역을 모두 채우며 block 요소 다음 요소는 줄 바꿈된다.

width, height 속성을 지정할 수 있다.

inline

span, b, i, a 태그 등이 해당

줄 바꿈 되지 않는다.

width, height 속성을 지정할 수 없으며, 속성이 지정되었다면 무시된다.

inline-block

줄 바꿈 되지 않으나, width, height를 지정할 수 있다.

---

display: flex

visibility 속성

• visible : 박스가 보여진다
• hidden : 박스가 보이지 않지만, 공간은 차지한다
• collapse
• inherit : 부모 요소로부터 값을 상속받는다

---