728x90
반응형
- 값 : inline,block,list-item,run-in,compact,marker,table,inline-table,table,table-row-group,table-header-group,table-footer-group, table-row,table-column-group,table-column,table-cell,table-caption, none
- 기본값 : inline
display: block : 그요소를 블록박스로 만든다. [줄바꿈 O, 상,하 margin과 padding속성 O, width와 height사용 O]
span1 |
span2 |
span3 |
display: inline: 그요소를 한 개 이상의 인라인박스로 만든다.
[줄바꿈 X, 상,하 margin과 padding속성 X, width와 height사용 X]
span1 | span2 | span3 |
display:inline-block : inline으로 정렬 된 것들이 block속성을 가지고 정렬된다.
(block형태로 만들지만, 자체 속성은 inline이다.) : text-align:center;
span1 | span2 | span3 |
※ display:inline은 서체의 종류 크기에 영향을 받기 때문에 메뉴 정렬에는 적절하지 않다.
display: table관련속성 : 그 요소를 테이블 관련 요소와 비슷한 형태로 만든다.
※ div코딩시 가운데 정렬하는 것이 굉장히 힘들다 이런때에 table관련 속성을 사용하면 간단하게 해결된다.
table코딩시에 vertical-align:middle이 부분을 적용해야 하는대 사용하기 위해서는 아래와 같이 사용하면 된다.
| div A의 속성을 display:table로 지정 div B의 속성을 display:table-cell로 지정하면 vertical-align이 지정, 왼쪽의 화면과 같이 나옴.
.div A {display:table} .div B {display:table-cell; vertical-align:middle} |
display: none : 그 요소의 박스를 생성하지 않고, 자식 요소에도 박스를 만들지 않는다.
따라서 그 요소는 시각적으로 표시되지 않는다.
728x90
반응형
그리드형
