display Property

  • inline(default) : inline element와 같이 옆으로 줄 세운다.
  • block : block element 처럼 표시하기 때문에 줄을 바꿔서 일렬로 정렬한다.
  • inline-block : inline 성격이지만 container는 block의 속성을 가진다. 따라서, 상자 모양이 inline처럼 늘어선다.
  • none : 아무런 효과가 없다. 왜냐하면 공간을 차지하지 않기 때문이다.

display: inline;

display_inline

<div class="square-inline">
    <style>
        #a{
            background-color: red;
        }
        #c{
            background-color: blue;
        }
        .square-inline div{
            width: 100px;
            height: 100px;
            display: inline;
            background-color: black;
            color: white;
        }
    </style>
    <div id="a">
        FIRST
    </div>
    <div id="b">
        SECOND
    </div>
    <div id="c">
        THIRD
    </div>
</div>

display: block;

display_block

<div class="square-block">
    <style>
        #a{
            background-color: red;
        }
        #c{
            background-color: blue;
        }
        .square-block div{
            width: 100px;
            height: 100px;
            display: block;
            background-color: black;
            color: white;
        }
    </style>
    <div id="a">
        FIRST
    </div>
    <div id="b">
        SECOND
    </div>
    <div id="c">
        THIRD
    </div>
</div>

display: inline-block;

display_inline_block

<div class="square-inline-block">
    <style>
        #a{
            background-color: red;
        }
        #c{
            background-color: blue;
        }
        .square-inline-block div{
            width: 100px;
            height: 100px;
            display: inline-block;
            background-color: black;
            color: white;
        }
    </style>
    <div id="a">
        FIRST
    </div>
    <div id="b">
        SECOND
    </div>
    <div id="c">
        THIRD
    </div>
</div>

display: none;

display_none

<div class="square-none">
    <style>
        #a{
            background-color: red;
        }
        #c{
            background-color: blue;
        }
        .square-none div {
            width: 100px;
            height: 100px;
            display: none;
            background-color: black;
            color: white;
        }
    </style>
    <div id="a">
        FIRST
    </div>
    <div id="b">
        SECOND
    </div>
    <div id="c">
        THIRD
    </div>
    아무것도 보이지 않습니다.
</div>

COMMENTS:

1. inline이 무슨 뜻일까 생각하다가 inline skate를 떠올리니 이해가 좀 되는 것 같았다(의미적으로). 비슷한 의미 인 것 같다.
2.inline-block은 block이 inline처럼 정렬하는 것

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s