visibility : hidden; ※ 보이지 않게 하기, 공간은 그대로 남아있고, 보이지만 않함
display: none; ※ 공간 자체가 사라져 공간적으로 원래 없던거와 동일 (레이아웃 자체가 없음)
| 속성값 | 내용 |
|---|---|
| visible | 기본값, 눈에 보임 |
| hidden | 보이지않음, 레이아웃(영역)이 보이지 않을때와 동일하게 영향을 준다. ※ 자손은 영향을 안받음 (자손은 보여짐) 보여지지 않을때는 탭탐색, 포커스를 받을 수 없다. |
| collapse | 겹쳐보임 (테이블의 행열에 지정시) table의 행,열,행그룹,열그룹에 적용하면 display:none; 과 동일하게 요소도 숨기고, 공간도 제거된다. ※ 그러나 다른 행(열)의 크기는 collapse를 적용한 행(열)이 보이는 것 처럼 취급해 계산 ※ 크롬에서는 행의경우 영역도 없어진다.(IE에서는 공간은 남음) ※ width 와 padding 값은 유지되나, height값은 무시된다. 플렉스 아이템에 적용하면 요소를 숨기고 공간도 제거 다른 요소는 hidden 과 동일 |
태그가 화면에 어떻게 표현되어질지를 결정
| 요소값 | 내용 |
|---|---|
| none | 보이지 않음(영역도 없어짐) 요소자체를 렌더링하지 않는다. |
| block | div, p, h, ul, li, dl, dt, dd, form |
| 가로영역을 모두 채운다.(width:100%), 줄바꿈이 된 것처럼 보인다. width,height속성을 지정할 수 있으나 다음에 오는 태그는 block 오른쪽에 올수 있지만 줄바꿈 한다음 우측에 표시된다. width : 별도로 지정하지 않으면 폭이 100% 폭 지정시 아웃라인 표시는 지정폭이지만, 공간은 100%를 차지한다.(즉, 옆에 요소가 올수 없다. 개행됨) height : 높이를 지정하지 않으면 자동으로 유지 | |
| inline | span, b, i, a, img, input, mark, strong, em, abbr |
| width, height 를 지정할 수 없다. 줄바꿈도 일어나지 않는다. (가로로 순서대로 배열된다.) 감싸서 스타일 적용시 사용가능 width,height 에대해 css 룰을 허용하지 않는다 (폭,높이를 설정해도 무시한다.) padding : 모든 내부요소에 대해 padding을 적용가능하다. margin : 수평으로 적용되나, 수직으로는 설정해도 무시된다. | |
| inline-block | block과 inline의 중간 (IE7 이하 사용불가) 줄바꿈은 없지만 width, height를 지정할 수 있다.(영역지정) IE6/7에서 동일효과 style="display:inline; zoom:1; } width,height 설정 padding, margin 설정 충분한 공간이 있으면 옆에 다른요소가 올수 있다. |
| flex | 요소들을 블럭박스 단위로 쌓아서 정렬( 한쪽방향으로만 정렬) |
| grid | 요소들을 블럭박스 단위인 격자모양으로 정렬 |
| table | 요소를 <table> 처럼 처리 |