728x90
반응형
display 속성에는 5가지가 있습니다.
display: none; /* 해당 요소를 보여주지 않음 */
display: block; /* 해당 요소를 블록 요소로 보여줌 */
display: inline; /* 해당 요소를 인라인 요소로 보여줌 */
display: inline-block /* 블록 요소와 인라인 요소의 특성을 동시에 가진 형태 */
display: inherit /* 부모의 속성을 상속 받음 */
블록 요소와 인라인 요소에 대해 알고 싶다면 아래 링크를 참조하세요.
[HTML] 블록 요소와 인라인 요소
블록 요소(Block-level Elements) 블록 요소는 항상 새로운 줄에서 시작하여 가로 너비의 100%를 차지하므로, 블록 요소 다음에는 항상 줄 바꿈이 됩니다. 블록 요소는 vertical-align 과 text-align 속성을.
webdee.tistory.com
display의 5가지 속성 중 inline-block 은 블록 요소와 인라인 요소, 둘의 특성을 동시에 가진 독특한 형태입니다.
display: inline-block;
블록 요소처럼 width , height , margin 값을 적용할 수 있으며,
인라인 요소처럼 가로 너비를 100% 차지하지 않아 줄 바꿈이 없으므로 바로 옆에 다른 요소를 추가할 수도 있습니다.
적절한 용도로 잘 사용한다면 유용한 속성이지만, IE8 이상의 브라우저에서만 지원되므로 그 이하의 브라우저에 대응할 수 있게 아래와 같은 핵을 사용해야 합니다.
div { display: inline-block; *display: inline; *zoom: 1; }
728x90
반응형
