display Property

Home > Document > CSS > Classification > display

페이지 목차
display Property

display Property 는 Inline Element 나 Block-Level Element 가 화면 상에 Render 되는 방식을 다루는 Property 입니다. 화면 상에 나타나는 Element 는 모두 Inline 이나 Block 입니다. Inline(Line 속에 있다... 즉, 같은 줄 속에서 줄바꿈이 없이 연속적으로 이어지는 element) Element 란 SPAN, FONT 등과 같이 줄바꿈이 없는 Element를 말하고, Block-Level Element 는 DIV, P, H1 ~ H6 등과 같이 줄바꿈이 생기는 Element를 말합니다. 하지만 이 페이지의 display Property를 사용하면 block Element를 Inline 으로, 반대로 Inline Element 를 Block Element로 화면 상에 Rendering 되게 할 수 있습니다. 또 화면 상에 나타나지 않게(none) 할 수도 있습니다. 아래 표의 값 중에 굵은 글씨로 된 Keyword 만 작동하고 나머지는 작동하지 않습니다.

  [표 보는 방법]
Property
Value inline | block | list-item | run-in | compact | marker | 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 | inline-block (*IE Only)
Initial inline
Applies to all elements
Inherited no
Percentages N/A
Media Visual
HTML Syntax { display: sDisplay }
Scripting object.style.display [ = sDisplay ]



CSS Scripting
onMouseDown="this.style.display='block';"



SPAN이 DIV를 만났을 때...

Block Element 가 줄바꿈을 한다고 했는데, 이 줄바꿈이란 다음 줄로 바뀌는 줄바꿈을 물론이고, 자신 앞에 있는 Element 와의 줄바꿈도 포함 됩니다. 즉, Block Element 의 위와 아래로 줄바꿈이 되어서 혼자 한 줄을 차지한다는 말이져. 아래의 Source code와 출력 결과 참조...

입력 
<HTML>
    <HEAD>
        <TITLE>SPAN이 DIV를 만났을 때...</TITLE>
    </HEAD>
    <BODY>
        <SPAN style="width:50px; height:50px; background-color:gold; "></SPAN>
        <DIV style="width:50px; height:50px;  background-color:tomato; "></DIV>
    </BODY>
</HTML>
출력결과

결과를 보면 알 수 있지만 줄바꿈이 없는 SPAN Element 뒤에 줄바꿈이 있는 DIV Element 가 오면 DIV Tag 위로도 줄바꿈이 생긴다는 것을 알 수 있습니다. 하지만 아래와 같이...

입력 - {display:inline} 
<HTML>
    <HEAD>
        <TITLE>SPAN이 DIV를 만났지만...</TITLE>
    </HEAD>
    <BODY>
      <SPAN style="width:50px; height:50px; background-color:gold; "></SPAN>
      <DIV style="width:50px; height:50px;  background-color:tomato; display:inline;"></DIV>
    </BODY>
</HTML>
출력결과

위와 같이 display:inline 을 지정하면 Block Element도 Inline Element 처럼 Render 됩니다. 반대로 Inline Element 를 Block Element 처럼 Render 할 수도 있습니다. 다음의 예제를 봅시다.
SPAN과 SPAN이 만나면...

이번 예제는 Inline Element 인 SPAN Element를 Block Element로 Render 하는 방법에 대해 알아 보겠습니다.

입력 - {display:block} 
<HTML>
  <HEAD>
    <TITLE>SPAN과 SPAN이 만나면...</TITLE>
  </HEAD>
  <BODY>
    <SPAN style="width:50px; height:50px; background-color:gold; "></SPAN>
    <SPAN style="width:50px; height:50px;background-color:tomato;display:block; "></SPAN>
  </BODY>
</HTML>
출력결과



문단 속에서의 display Property 사용

다음은 문장 속에서 2개의 SPAN Tag 에 display Property 를 지정하여 display:inline. display:block, display:none 의 3 가지 Keyword 를 지정했을 경우의 DHTML과 Source code 입니다.

display Property DHTML
display Property를 지정한 SPAN Tag display Property를 지정하지 않은 SPAN Tag
Inline Block None

Source code 
<HTML>
    <HEAD>
        <TITLE>문단 속에서의 display Property 사용</TITLE>
    </HEAD>
    <BODY>
    <SPAN id="span_1" style="color:tomato;background-color:#EFEFEF;">
        <B>display Property를 지정한 SPAN Tag</B>
    </SPAN>
    <SPAN style="background-color:gold;"> display Property를 지정하지 않은 SPAN Tag</SPAN>
    <table cellspacing="2" width="100%" style="table-layout:fixed;border:1px solid #333333;">
      <tr>
        <td class="td_button2" onClick="span_1.style.display='inline';">Inline</td>
        <td class="td_button2" onClick="span_1.style.display='block';">Block</td>
        <td class="td_button2" onClick="span_1.style.display='none';">None</td>
      </tr>
    </table>
    </BODY>
</HTML>



{ display : list-item } (추가 부분)

list-item은 마치 UL(Unordered List) 이나 OL(Ordered List) 와 같이 화면에 display 시켜줍니다. 따라서 SPAN 과 같은 Inline Element에 사용해도 LI 와 같이 block 형태로 화면에 render 됩니다. 글머리 기호의 형태는 list-style-type 의 default 형태인 disc 이고, 필요에 따라 list-style-type CSS Property로 지정할 수 있습니다. 이 때 upper-alpha 등의 OL 형식을 사용하면 내용 없어도 Enter로 줄이 바뀔 때 마다 번호가 1 씩 증가합니다. 아래의 예제에서의 <br /> 이 2개 씩 들어간 것 까지 Count 한다는 뜻입니다.

display : list-item 예제 
<html>
<head>
<title>display : list-item</title>
    <style type="text/css">
    <!-- 
    span.symbol{display:list-item; list-style-type:square;}
    span.deca{display:list-item; list-style-type:decimal;}
    span.roman_U{display:list-item; list-style-type:upper-roman;}
    span.alpah_U{display:list-item; list-style-type:upper-alpha;}
    -->
    </style>
</head>
<body>
    <div style="padding-left:50px;">
        <span class="symbol">Square 1</span>
        <span class="symbol">Square 2</span>
        <span class="symbol">Square 3</span>
        <br /><br />
        <span class="deca">Number 1</span>
        <span class="deca">Number 2</span>
        <span class="deca">Number 3</span>
        <br /><br />
        <span class="roman_U">Roman 1</span>
        <span class="roman_U">Roman 2</span>
        <span class="roman_U">Roman 3</span>
        <br /><br />
        <span class="alpah_U">Alphabet 1</span>
        <span class="alpah_U">Alphabet 2</span>
        <span class="alpah_U">Alphabet 3</span>
    </div>
</body>
</html>
코드 실행 하기
{ display : table-header-group }, { display : table-footer-group }

table-header-group과 table-footer-group 은 각각 HTML Element인 THEAD와 TFOOT Element 에서 작동 합니다. 이 두 가지 Property는 컴퓨터 모니터 상에서 출력 할 목적으로 만든 Property가 아니고, 한 페이지가 넘는 여러 페이지 분량의 Table을 Printer로 출력할 때, 매 페이지마다 테이블 머리말(THEAD)과 꼬리말(TFOOT)을 넣어주기 위해 사용하는 Keyword 가 되시겠습니다.

사용 방법은 아래와 같이 table-head-group은 THEAD Tag 에 지정하고, table-footer-group은 TFOOT Tag에 지정합니다.

입력 
<HTML>
    <HEAD>
        <TITLE>Table HEADER와 FOOTER를 매 페이지마다 프린트 하기</TITLE>
    </HEAD>
    <BODY>
        <TABLE border="1" cellpadding="0" cellspacing="0" width="100%">		
                <THEAD align="center" style="display:table-header-group;">
                    <TR>
                        <TD colspan="5">Table Header</td>
                    </TR>
                </THEAD>
                <TBODY bgcolor="gold" align="center">
                <TR>
                    <TD>Cell</TD>
                    <TD>Cell</TD>
                    <TD>Cell</TD>
                    <TD>Cell</TD>
                    <TD>Cell</TD>
                </TR>
                .
                .
                <TR>에서 </TR>을 엄청시레 많이 복사 할 것. 대략 100개 정도?...
                .
                .
                <TR>
                    <TD>Cell</TD>
                    <TD>Cell</TD>
                    <TD>Cell</TD>
                    <TD>Cell</TD>
                    <TD>Cell</TD>
                </TR>
            <TFOOT style="display:table-footer-group;">
                <TR>
                    <TD colspan="5">Table Footer</TD>
                </TR>
            </TFOOT>
        </TABLE>
    </BODY>
</HTML>

이 결과를 보여 준다는 것이 참으로 난감하군요. 직접 프린트를 해 봐야 눈에 보이기 때문이죠. 하지만 반드시 종이에 프린트를 해 봐야 되는 것은 아닙니다. 위의 Code를 브라우저로 실행 한 다음 메인메뉴 파일 / 인쇄 미리보기(V)... 를 하고 다음 페이지를 보면 각 페이지 마다 Table header와 Table footer가 붙어 있는 것을 확인 할 수 있습니다.
{ display : inline-block }

inline-block 이란 Block Element가 다른 Block Element 속에 inline으로 들어 갔을 때 Block으로 Render 되게 하는 Keyword 입니다. 아래의 P Tag을 보면 Mouse Event를 적용했을 때 글자 뿐만 아니라 P Tag이 차지하고 있는 Line 전체에 Mouse Action이 생기게 됩니다. Mouse를 아래의 회색줄 아무 곳에나 올려 보시져...

   Line 전체에 Mouse action이 생긴다.

Source code
.
.
<BODY>
<P onmouseover="this.style.color='tomato';" onMouseOut="this.style.color='';"
style="background-color:#DEDEDE;">
   Line 전체에 Mouse action이 생긴다.
</P>
</BODY>
.
.


하지만 P Tag이 같은 Block Element인 DIV 같은 Tag 속에 들어가면 얘기가 달라지게 됩니다. 아래의 Source code와 출력 결과를 보시져.

Source code
.
.
<BODY>
<DIV style="background-color:gold;">
<P onmouseover="this.style.color='tomato';" onMouseOut="this.style.color='';"
style="background-color:#DEDEDE;">
   Line 전체에 Mouse action이 생긴다.
</P>
</DIV>
</BODY>
.
.


출력결과

Mouse가 글자 위에 올라 갔을 때만 Mouse action이 생긴다.

그렇기 때문에 Line 전체에 어떤 Mouse action을 줄 필요가 있을 때 바로 'inline-block' 이라는 값을 주어서 P Tag을 원래의 block 형태로 나타 낼 수 있습니다. inline-block 이라는 값은 Internet Explorer에서만 작동합니다. 아래와 같이 Coding하고 출력 결과를 보시져.

Source code
.
.
<BODY>
<DIV style="background-color:gold;">
<P onmouseover="this.style.color='tomato';" onMouseOut="this.style.color='';"
style="background-color:#DEDEDE;display:inline-block;">
   P Tag이 본연의 자세로 돌아가다.
</P>
</DIV>
</BODY>
.
.


출력결과

P Tag이 본연의 자세로 돌아가다.




{ display : none }, { display : block }

아주 재미있는 Property 입니다. HTML 메뉴에서 주로 많이 보여줬던 '보이기', '감추기' Button에 사용된 CSS Property죠. display Property 의 값을 'none' 으로 하면 면적 자체가 없어지고, 값을 'block'으로 주면 브라우저 창에서 면적을 다시 차지하게 됩니다. 또한 매 페이지마다 Counter 를 달아서 Page View를 알고 싶을 때도 none으로 값을 주게 되면 화면 상에는 나타나지 않지만 문서 작성자는 Source file을 열어서 Page View 를 확인 할 수 있습니다. Mouse Action에 의해서 필요할 때만 화면 상에 display시켜서 link를 선택할 수 있게 한 아래의 예제를 참고 하시져...

입력 
<HTML>
    <HEAD>
        <TITLE>{ display : none }, { display : block }</TITLE>
    <STYLE type="text/css">
    <!-- 
    .menuTitle{ 
    width:300px; 
    height:30px; 
    border:1px solid #808080; 
    cursor:hand;
    }
    
    .blk { 
    display:inline-block; 
    width:300px; 
    height:300px; 
    border:1px solid tomato; 
    background-color:#c0c0c0;
    padding:10px;
    }
    
    .non { 
    display:none; 
    position:relative; 
    top:-19px; 
    left:0px;
    }
    -->
    </STYLE>
    </HEAD>
    <BODY>
        <CENTER>
            <DIV>
                <DIV class="menuTitle" onMouseOver="div_1.className='blk';" 
                onMouseout="div_1.className='non';">
                    Mouse를 올리면 아래에 링크가 나옵니다.
                </DIV>
                <DIV id="div_1" class="non" onClick="div_1.className='non';" 
                onMouseOver="div_1.className='blk';" onMouseout="div_1.className='non';">
                    <A href="http://kr.yahoo.com" target="_blank">야후 코리아</A><BR>
                    <A href="http://www.naver.com" target="_blank">네이버 코리아</A>
                </DIV>
            </DIV>
        </CENTER>
    </BODY>
</HTML>
출력결과
Mouse를 올리면 아래에 링크가 나옵니다.

관련 링크




이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색