• 목록

1) display

display는 요소를 표시하는 방법을 결정하며, 요소를 보이지 않게 하는 값으로 none을 사용한다.

display: none 일 경우 해당 요소는 보이지 않으며 Layout에 영향을 미치지 않는다.

속성값

     - inline : 인라인 요소로 표현한다.

     - block : 블럭 요소처럼 표현한다.

     - inline-block : 인라인의 흐름에 따르되 블록 박스처럼 마진, 테두리, 패딩, 너비, 높이 속성이 적용된다.

     - flex : 블록-레벨의 flex 컨테이너처럼 요소를 표현한다.

     - inline-flex : 인라인-레벨의 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 : 부모 요소로부터 값을 상속 받는다.

2) visibility

visibility는 생성된 요소의 렌더링 방법을 결정하며, 요소를 보이지 않게 하는 값으로 hidden을 사용한다.

visibility: hidden 일 경우 해당 요소는 보이지 않지만 Layout에 영향을 미치게 된다.

속성값

     - visible : 박스가 보여진다.

     - hidden : 박스가 보이지 않지만 공간을 확보하기 때문에 여전히 레이아웃에 영향을 미친다.

     - collapse : 내부 테이블 객체(행, 행 그룹, 열 및 열 그룹)에 적용된다. hidden과 유사하다.

     - inherit : 부모 요소로부터 값을 상속 받는다. 

추천 0 비추천 0