13 Nov 2018
p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}
CSS :display
display속성은 요소의 표시 비헤이비어 (렌더링 상자 유형)를 지정합니다.
“flex”및 “inline-flex”값에는 Safari에서 작동하는 -webkit- 접두사가 필요합니다.
Edge / Internet Explorer에서는 “display : contents”가 작동하지 않습니다.
속성
display: value;
- inline :요소를 인라인 요소 (예 : )로 표시합니다. 모든 높이 및 너비 속성은 아무 효과가 없습니다.
- block :요소를 블록 요소 (예 : <p>)로 표시합니다. 새 줄에서 시작하여 전체 너비를 차지합니다.
- contents :컨테이너를 사라지게하여 DOM 요소에서 자식 요소의 자식을 DOM의 다음 레벨로 만듭니다.
- flex : 요소를 블록 레벨 플렉스 컨테이너로 표시합니다.
- grid :요소를 블럭 레벨 그리드 컨테이너로 표시합니다.
- inline-block :요소를 인라인 수준 블록 컨테이너로 표시합니다. 요소 자체는 인라인 요소로 형식화되지만 높이 및 너비 값을 적용 할 수 있습니다
- inline-flex :요소를 인라인 레벨 플렉스 컨테이너로 표시합니다.
- inline-grid :요소를 인라인 수준 그리드 컨테이너로 표시합니다.
- inline-table :요소가 인라인 수준 테이블로 표시됩니다.
- list-item :요소가 <li> 요소처럼 동작하도록합니다.
- run-in :문맥에 따라 요소를 블록 또는 인라인으로 표시합니다.
- table :요소가 <table> 요소처럼 동작하도록합니다.
- table-caption :요소가 <caption> 요소처럼 동작하도록합니다.
- table-column-group :요소가 <colgroup> 요소처럼 동작하도록합니다.
- table-header-group :요소가 <thead> 요소처럼 동작하도록합니다.
- table-footer-group :요소가 <tfoot> 요소처럼 동작하도록합니다.
- table-row-group :요소가 <tbody> 요소처럼 동작하도록합니다.
- table-cell :요소가 <td> 요소처럼 동작하도록합니다.
- table-column :요소가 <col> 요소처럼 동작하도록합니다.
- table-row :요소가 <tr> 요소처럼 동작하도록합니다.
- none :요소가 완전히 제거되었습니다.
- initial :이 속성을 기본값으로 설정합니다.
- inherit :부모 요소에서이 속성을 상속받습니다.
Facebook Google+ 