CSS의 display는 많은 다양한 상황에서 익숙하게 사용되는 속성입니다. 그러나 익숙한 데에는 언제나 함정이 있습니다. 실제로 display 속성을 사용하다보면 잘 알려지지 않은 특징들을 만나게 되는데, 이를 미리알고 대처하지 못하여 예상치 못한 곳에서 시간과 노력을 허비하는 상황을 만나게 됩니다.

이번 포스팅에서는 display 속성에 대해 6가지 포인트로 정리하였습니다. 이 포스팅은 display 속성에 대한 중요한 내용을 발췌하여 정리한 것이지만, 모든 것을 망라하고 있지는 않습니다. 부족한 부분에 대해서는 공식표준인 CSS 2.1 Specification 가운데 9.2.4 The ‘display’ property 항목을 참조하여 주시기 바랍니다.

 

 

Point 1. display 속성에는 16가지 값을 지정할 수 있다.

가장 사용빈도가 높은 display 속성의 값으로는 block, inline, inline-block, none의 4가지 정도가 꼽힙니다. 그러나 실제로 W3C에서 정한 CSS 2.1 Specification(이하 CSS Spec)을 살펴보면 display 속성에 지정할 수 있는 값은 무려 16가지나 됩니다. 이들을 나란히 늘어놓으면 아래와 같습니다.

inline | block | list-item | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit

 

Point 2. display 속성의 16가지 값들은 크게 4가지 계열로 나뉘어져 있다.

앞서 소개한 16가지의 속성값들은 다시 4가지의 계열로 나누어볼 수 있습니다. (이 4가지 계열은 CSS Spec에서 정의한 것은 아닙니다. 단지 이해를 돕기 위해서 제가 임의로 나눈 것입니다.)

• Box-model 계열
  대부분의 태그에서 사용하는 값들로, 어떤 요소를 Block-level 요소 또는 Inline 요소로 만들 때 사용합니다. block, inline, inline-block의 3개 값이 여기에 속합니다. 대게의 태그들은 display 속성의 기본값이 block과 inline 중의 하나입니다.

• List 계열
• 태그에서는 특이하게도 list-item라는 display 속성을 사용합니다. 기본적으로는 Block-level의 요소들처럼 작동하지만, 추가적으로 list-style 계열의 CSS 속성을 이용할 수 있다는 특징이 있습니다.

• Table 계열
  이 계열에 속한 값들은 태그와 그 부속태그에서 사용되는 값들입니다. display 속성 값의 무려 2/3을 차지하는데, 워낙에 비중이 커서 CSS Spec에서도 The CSS table model라는 별도의 항목을 마련해서 설명하고 있습니다. 이 항목을 살펴보면 과 그 부속태그에는 저마다의 display 속성값이 정해져 있음을 알 수 있습니다.
  • 기타
    이제 남은 것은 none과 inherit 뿐입니다. display 속성을 none으로 지정한 요소가 있다면, 해당 요소와 그 자식요소들은 화면에서는 물론이요 레이아웃 자체에서 완전히 사라지게 됩니다. 한편 display 속성을 inherit로 지정된 요소는, 부모 요소의 display 속성을 그대로 따르게 됩니다.

  이 외에도 CSS Specification에는 전후의 맥락을 파악해서 display 값을 결정하는 run-in 값이 있습니다. 그러나 개발자의 의도와 다르게 작동할 가능성이 있어, 일반적으로는 사용하지 않는 것을 권장합니다.

   

  Point 3. display 속성의 기본값은 inline이지만, 웹 브라우저의 기본 스타일 시트에 별도로 지정된 기본값이 있는 경우 이를 따른다.

  CSS Spec에 따르면, display 속성의 기본값은 본래 inline입니다. 그러나 이 기본값은 웹 브라우저마다 가지고 있는 기본 스타일 시트에서 덮어쓸 수 있게 되어 있습니다. 이를테면

  나

   

  태그는 거의 모든 브라우저에서 display 속성의 기본값이 block으로 지정되어 있고,

  • 태그의 경우에는 list-item로 지정되어 있지요.

     

    HTML의 공식 표준인 HTML 4.01 Specification에는 Default style sheet for HTML 4라는 부록이 있습니다. 이 부록에서는 일반적으로 브라우저들이 따르고 있는 기본 스타일 시트를 담고 있습니다. 물론 표준 규정은 아니고 단순히 참고용으로 수록되어 있는 것이기는 하지만, 대부분의 브라우저들은 이 부록의 내용을 따르고 있습니다.

    내용을 살펴보면 대부분의 태그에는 display 속성이 지정되어 있지 않지만, 몇몇 태그에는 특별히 block이나 list-item 및 Table 계열 값이 지정되어 있는 것을 알 수 있습니다. 이렇게 지정된 태그 외의 모든 요소는 inline이 기본값이 될 것입니다.

     

    Point 4. display가 list-item가 아닌 경우에는 list-style 계열의 CSS 속성이 작동하지 않는다.

    주로

  • 태그에 사용되는 CSS 속성들로 list-style 계열의 속성들이 있습니다. 텍스트의 시작 부분에 강조점이나 마크를 표시하는 용도로 사용하지요. 강조점의 유형을 정하는 list-style-type, Box의 안과 밖 중에서 어디에 강조점을 표시할지를 정하는 list-style-position, 강조점 대신 사용할 이미지를 정하는 list-style-image 속성 등이 여기에 속합니다.

     

    이들 list-style 계열의 속성들은 원칙적으로 display 속성값이 list-item으로 지정되어 있는 경우에만 작동합니다. 이것은 곧

  • 태그라 하더라도 display 속성을 block 등, 다른 값으로 지정한 경우에는 강조점을 사용할 수 없다는 의미이기도 합니다. 이 점은 CSS Spec의 Lists 항목의 도입부에서도 밝혀 적고 있습니다.

     

    이 사실이 널리 알려지지 않은 이유는, 바로 Internet Explorer 7 이하에서는 (표준과는 다르게) display가 list-item이 아니더라도 list-style 계열의 속성이 작동하였기 때문입니다. 그라니 최근의 브라우저들은 모두 표준을 따르고 있으므로, 표준을 준수하여 강조점이 필요한 요소에 display 속성으로 list-item 값을 사용하면 IE7 이하의 브라우저도 대응할 수 있습니다.

     

    Point 5. inline-block과 Table 계열 값은 크로스 브라우저 문제를 야기한다.

    그럼 이제 안심하고 16개의 값을 사용할 수 있겠다고 생각할 수 있지만, 이것은 어디까지나 웹표준을 잘 준수한 브라우저에 한한 생각입니다. 위의 16개 값중 inline-block과 Table 계열에 속하는 값은 Internet Explorer 7.0과 그 하위 버전에서는 작동하지 않는다고 알려져 있습니다.

    그러나 실제로 테스트를 해보면 Table 계열의 값들은 OS에 따라 결과가 다릅니다. Windows XP에서는 IE8에서도 작동하지 않고,  반대로 Windows 7에서는 IE에서 개발자 도구로 브라우저 모드를 IE7에 맞추어도 잘 작동합니다.

    이것이 가장 문제가 되는 경우는

  의 부속태그를 화면에 수시로 숨기고 보이기 위해 자바스크립트를 이용할 때입니다. 숨길 때는 display 속성을 none으로 지정하면 문제가 없지만, 보일 때에는 브라우저마다 지원여부가 다르기 때문에 난관에 봉착하기 마련입니다. 이 난관의 해법은 바로 display 속성을 빈 문자열로 설정하는 것입니다. 사용자가 CSS 속성값을 지정하지 않으면, 해당 속성값은 브라우저마다 가지고 있는 기본값으로 지정되기 때문입니다.

   

  이를테면 아래의 예제코드처럼

  태그를 보이고 숨기는 스크립트가 있을 때, 8행처럼 의 display를 table-row로 설정한다면 문제가 될 소지가 있습니다. 이 때는 9행처럼 display를 빈 문자열로 설정하면, table-row값을 지원하는 브라우저는 table-row값으로, 그렇지 않은 브라우저에서는 또한 이 행을 정상적으로 보이게 하는 display 값으로 을 세팅할 것입니다.

   

  1 2 3 4 5 6 7 8 9 10

  function hide(tr) {     tr.style.display = 'none'; }   function show(tr) {     //tr.style.display = 'table-row';  // 위험!     tr.style.display = ''; }

   

  Point 6. display:none는 레이아웃에 영향을 미치지 않지만, visibility:hidden는 레이아웃에 영향을 미친다.

  display 속성에 대한 이야기에서 꼭 빠지지 않는 것이 바로 이 주제입니다. display:none은 해당 요소 자체를 문서상에서 완전히 들어내는 것을 의미합니다. 이것은 곧 레이아웃 상에서도 완전히 사라지는 것을 의미합니다. 레이아웃에 영향을 줄 수가 없겠지요.

  한편 visibility:hidden은 문서상에 존재는 하되, 화면에 렌더링만 하지 않게 하는 것을 의미합니다. 따라서 너비와 높이는 물론 여백도 그대로 가지고 있는 상태에서, 단지 화면에 렌더링만 되지 않는 결과를 낳게 됩니다. 레이아웃 상에서 자리도 그대로 차지하고 있게 되겠지요.