사이트 소개

display는 CSS에서 레이아웃을 제어하기 위한 가장 중요한 프로퍼티입니다. 모든 엘리먼트에는 엘리먼트의 유형에 따라 기본 표시값이 있습니다. 대부분의 엘리먼트에 대한 기본값은 보통 block이나 inline입니다. 블록 엘리먼트는 블록 레벨 엘리먼트라고 부를 때도 있으며, 인라인 엘리먼트는 늘 인라인 엘리먼트라고 부릅니다.

block

<div>

div는 표준 블록 레벨 엘리먼트입니다. 블록 레벨 엘리먼트는 새 줄에서 시작해 좌우로 최대한 늘어납니다. 자주 볼 수 있는 다른 블록 레벨 엘리먼트로 pform이 있으며, HTML5에서 새로 추가된 엘리먼트로 headerfooter, section 등이 있습니다.

</div>

inline

span은 표준 인라인 엘리먼트입니다. 인라인 엘리먼트는 단락 안에서 <span> 이처럼 </span> 해당 단락의 흐름을 방해하지 않은 채로 텍스트를 감쌀 수 있습니다. 링크에 사용하는 a 엘리먼트는 가장 흔히 볼 수 있는 인라인 엘리먼트입니다.

none

흔히 볼 수 있는 또 한 가지 display 값은 none입니다. script와 같은 일부 특별한 엘리먼트에서는 none을 기본값으로 사용하기도 합니다. 이 값은 자바스크립트에서 엘리먼트를 실제로 삭제하고 재생성하지 않고도 엘리먼트를 보이고 감추는 데 흔히 사용됩니다.

이것은 visibility와 다릅니다. displaynone으로 설정하면 엘리먼트가 마치 존재하지 않는 것처럼 페이지가 렌더링됩니다. visibility: hidden;으로 설정하면 엘리먼트가 감춰질 테지만 해당 엘리먼트는 완전히 보이지 않게 되더라도 여전히 공간을 차지합니다.

You found me!

다른 display

list-itemtable 같은 다른 좀 더 특이한 display 값도 있습니다. 전체 목록은 이곳을 참고하세요. inline-blockflex에 대해서는 나중에 살펴보겠습니다.

보충 내용

앞에서 언급했듯이 모든 엘리먼트에는 기본 표시 타입이 지정돼 있습니다. 하지만 언제든지 이러한 기본값을 재정의할 수 있습니다! 인라인 div를 만드는 것은 적절하지 않겠지만 이를 이용해 특별한 시맨틱을 지닌 엘리먼트의 표시 방식을 조정할 수 있습니다. 흔히 볼 수 있는 예로 가로 메뉴를 만들기 위해 인라인 li 엘리먼트를 만드는 것이 있습니다.

  • Creative Commons License