본문 바로가기
ETC

CSS display 속성 - inline과 block

행복안테나 2012. 5. 31. 17:32

 

CSS display 속성 - inline과 block


CSS 속성에서 display는 잘 알아두면 여러모로 유용하게 사용되지만 헤메이게 되는 속성 중 하나인거 같다.

 

 

- inline : width와 height 값을 설정할 수 없으며, margin과 padding값의 설정도 불가능하다.

               주로 [span], [img] 태그에 이용된다.

              

- block : width와 height의 설정이 가능하며, 인라인과 반대로 margin과 padding도 사용가능하다.
               주로 [div], [p], [form] 요소들이 있고 블록단위로 개행이 된다.


★ inline과 block의 차이점을 요약하자면 아래와 같습니다.

    1. inline으로 설정하면 줄바꿈이 되지 않지만, block으로 설정하면 줄바꿈 된다.

    2. inline으로 설정하면 width, height 속성을 사용할 수 없지만, block으로 설정하면 width, height 속성을 사용할 수 있다.

    3. inline으로 설정하면 상/하 margin과 padding 속성을 사용할 수 없지만, block으로 설정하면

         상/하 margin과 padding 속성을 사용할 수 있다.

 

TIP

inline 속성은 li 등에  이미지를 넣을 경우 빈 여백이 생기므로,
평소 이 태그를 자주 찾지 않지만, float 속성은 div 높이값을 인식하지 못하기 때문에 해결 방안을 적어놓습니다.

이미지에 vertical-align:top;을 주면 빈 여백이 사라지므로 ie6, ie7에서도 같은 사이즈의 결과를 얻을 수 있습니다.

 

 

------------------------------------------------------------------------------------------------------------ 

 

 

SPAN이 DIV를 만났을 때


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


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 위로도 줄바꿈이 생긴다는 것을 알 수 있습니다.

 

Source code - {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 처럼 보여지게 됩니다.
반대로 Inline Element 를 Block Element 처럼 보이게 할 수도 있습니다.

 

 

------------------------------------------------------------------------------------------------------------ 

 

 

SPAN과 SPAN이 만나면

 

Inline Element 인 SPAN Tag를 Block Element로 나타나게 하는 방법도 있습니다.

아래의 Source code와 출력 결과 참조하세요.

 

Source code - {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가지를 지정했을 경우입니다.
아래 출력 결과물은 이미지로만 나와있으므로 첨부파일과 함께 올리겠습니다.

 

 

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 : inline-block }

 

inline-block 이란? Block Element가 다른 Block Element 속에 inline으로 들어 갔을 때 Block으로

보여지게 하는 속성 입니다. 아래의 P Tag을 보면 Mouse Event를 적용했을 때 글자 뿐만 아니라

P Tag이 차지하고 있는 Line 전체에 Mouse Action이 생기게 됩니다.

출력 결과물은 첨부파일을 참고해 주세요.

 

 

display.html

 

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 

 

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

 

 

그렇기 때문에 Line 전체에 어떤 Mouse action을 줄 필요가 있을 때 바로 'inline-block' 이라는 값을 주어서
P Tag을 원래의 block 형태로 나타 낼 수 있습니다.

inline-block 이라는 값은 Internet Explorer에서만 작동합니다.

 

Source code 

 

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

 

 

 

 

------------------------------------------------------------------------------------------------------------------------ 

 

 

  

{ display : none }, { display : block }

 

HTML 메뉴에서 주로 많이 사용하는 '보이기', '감추기'. display 속성 값을 'none' 으로 하면 면적 자체가

없어지고, 속성 값을 'block'으로 주면 브라우저 창에서 면적을 다시 차지하게 됩니다. 또한 매 페이지마다 Counter 를 달아서 Page View를 알고 싶을 때도 none으로 값을 주게 되면 화면 상에는 나타나지 않지만

문서 작성자는 Source file을 열어서 Page View 를 확인 할 수 있습니다.

출력 결과물은 첨부파일을 참고해 주세요.

 

Source code 

 

<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://blog.naver.com/dmssla1211" target="_blank">Smile 블로그</A>

                    <BR>
                    <A href="http://www.naver.com" target="_blank">네이버</A>
                </DIV>
            </DIV>
        </CENTER>
    </BODY>
</HTML>

 

 

출처 : http://blog.naver.com/dmssla1211/143207156

 

저작자표시 비영리

'ETC' 카테고리의 다른 글

자바(java,jsp),자바스크립트(javascript) 에서 utf-8, euc-kr 간에 한글처리  (0) 2012.06.13
정규식  (0) 2012.06.12
MSSQL과 Oracle 함수 비교  (0) 2012.04.06
crontab 사용하기 (정기 작업) 스케줄러  (0) 2012.04.06
이클립스(eclipse)에 자바 디컴파일러 연동하는 방법  (0) 2012.02.10

'ETC' Related Articles

티스토리툴바