06.24(display & 화면에서 요소 감추기)

display

속성	설명
block	선택한 요소를 block 레벨 요소로 나타냄 width/height적용, align적용 X
inline	선택한 요소를 inline 레벨 요소로 나타냄 width/height 속성이 무시되고, content에 의해서 크기가 결정됨
inline-block	선택한 요소를 inline-block 레벨 요소로 나타냄
none	선택한 요소를 나타내지 않음

---

block 레벨 요소

 

항상 새로운 라인에 요소가 배치되고 화면 크기의 전체 가로폭을 영역으로 차지함

또한 width 속성 값을 부여해주면 그 너비만큼의 영역을 차지

 

inline 레벨 요소

 

 새로운 라인에서 시작하지 않으며 다른 요소들과 같은 줄에 배치 될 수 있고 content의 너비만큼의 영역을 차지

또한 width, height, margin-top, margin-bottom의 속성 값이 적용되지 않음

 

inline-block 레벨 요소

 

block 레벨 요소와 inline 레벨 요소의 특징을 모두 가지고 있는 요소

한 줄에서 inline 레벨 요소들과 같이 배치될 수 있으며 width와 height 속성으로 영역의 크기를 지정 가능

 

 

화면에서 요소 감추기

속성	값
display	none
visibility	hidden
opacity	0