[CSS] display

display : inline

• 줄 바뀜 안됨, 너비 높이 속성 지정 안됨
• margin,padding 속성은 왼쪽 오른쪽만 지정가능

#div1{
    display: inline;
}
#div2{
    display: inline;
}
#div3{
    display: inline;
}

<div id="div1">display Test 1</div>
<div id="div2">display Test 2</div>
<div id="div3">display Test 3</div>

• div는 한행을 차지하는 공간태그이지만 inline 속성으로 글자크기만큼 공간을 차지한다.

display Test 1 display Test 2 display Test 3 

display : none

• 공간을 없애고 보이지 않게함

#div1{
    display: none;
}
#div2{
    display: none;
}
#div3{
    display: none;
}

<div id="div1">display Test 1</div>
<div id="div2">display Test 2</div>
<div id="div3">display Test 3</div>

결과로는 none을 이용하면 화면에 보이지 않음

 

 

display : inline-block

• inline 과 block 중간,글자 너비 높이 지정가능
• margin,padding 속성은 상하좌우 지정가능

#div1{
    display: none;
}
#div2{
    display: none;
}
#div3{
    display: none;
}
#div1{
    display: inline-block;
}
#div2{
    display: inline-block;
}
#div3{
    display: inline-block;
}

• inline과 같이 글자크기만큼 공간을 차지 
• inline과 다르게 사용자가 공간 크기 설정 가능

display Test 1 display Test 2 display Test 3 

 

visiblility:hidden

• 공간 남기고 숨김

#div4{
    display: block;
    background-color: aqua;
}
#div5{
    display: block;
    visibility: hidden;
    background-color: beige;
}
#div6{
    display: block;
    background-color: aqua;


</style>
<div id="div4">display Test 1</div>
<div id="div5">display Test 2</div>
<div id="div6">display Test 3</div>

 

• visiblility:hidden을 사용하면 공간을 보이지만 내용은 보이지 않음

 

display Test 1

display Test 2

display Test 3