- display
요소를 표시하는 방법을 지정한다.
| CSS |
| p.inline {display: inline;} |
<<< 속성값 >>>
- inline : 인라인 요소처럼 표현한다.
- block : 블럭 요소처럼 표현한다.
- inline-block : 인라인의 흐름에 따르되 블록 박스처럼 마진, 테두리, 패딩, 너비, 높이 속성이 적용된다.
- flex : CSS3에 새로 생긴 값으로 블록-레벨의 flex 컨테이너처럼 요소를 표현한다.
- inline-flex : CSS3에 새로 생긴 값으로 인라인-레벨의 flex 컨테이너처럼 요소를 표현한다.
- list-item : 박스를 블록 처리하고 그 안의 아이템들을 인라인 박스 형태로 처리한다.
- run-in : 문맥에 따라 블록 또는 인라인 박스로 처리된다.
- table, inline-table, , table-caption, table-cell, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-row-group : 이 속성값들은 테이블 스타일의 요소의 동작을 정의한다.
- none : 블록이 생성되지 않는다. 이 경우 화면에서 완전히 사라져 어떠한 공간도 차지하지 않는다.
- inherit : 부모 요소로부터 값을 상속 받는다.
= 자바스크립트 문법 =
| JAVASCRIPT |
| object.style.display="block" |
- visibility
요소에 의해 생성된 박스를 렌더링할 것인지를 결정한다. 기본적으로 이 값은 상속된다. 보이지 않는 박스는 display 속성이 none으로 지정되지 않는 한 레이아웃에 영향을 미친다.
| CSS |
| h2 {visibility: hidden;} |
<<< 속성값 >>>
- visible : 박스가 보여진다.
- hidden : 박스가 보이지 않지만 공간을 확보하기 때문에 여전히 레이아웃에 영향을 미친다.
- collapse : 내부 테이블 객체(행, 행 그룹, 열 및 열 그룹)에 적용된다. hidden과 유사하다.
- inherit : 부모 요소로부터 값을 상속 받는다.
= 자바스크립트 문법 =
| JAVASCRIPT |
| object.style.visibility="hidden" |