[CSS] display, visibility, opacity

1. display

- HTML 요소를 어떻게 표시할지를 결정한다.

- 블록(block)인 요소의 속성값을 인라인(inline)으로, 인라인의 속성값을 블록으로 바꿀 수 있다.

inline
inline-block

1-1 인라인(inline)

<style>
    li {display: inline;}
</style>
<body>
    <h1>inline</h1>
    <ol>
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ol>
</body>

- 블록 요소인 <li> 요소를 display 속성을 통하여 inline으로 바꿔줌으로써 <li> 요소는 블록 요소의 특징을 잃어버리게 된다.

1-2 인라인-블록(inline-block)

<style>
    div {width: 100px; height: 100px;}
    
    .a { background-color: red;}
    .b {background-color: blue;}
    .c {background-color: orange;}

    .inline{display: inline;}
    .inline-block
    {
        display: inline-block;
        width: 50px;
        height: 50px;
        margin: 13px;
    }
</style>
<body>
    <h1>block</h1>
   <div class="a">a</div>
   <div class="b">b</div> 
   <div class="c">c</div>

   <h1>inline</h1>
   <div class="a inline">a</div>
   <div class="b inline">b</div>
   <div class="c inline">c</div>

   <h1>inline-block</h1>
   <div class="a inline-block">a</div>
   <div class="b inline-block">b</div>
   <div class="c inline-block">c</div>    
</body>

- 인라인-블록(inline-block)으로 지정한 해당 요소는 인라인(inline) 요소처럼 동작하지만 내부에서는 블록(block) 요소처럼 동작한다.

- 내부에서 블록 요소처럼 동작하기 때문에 width, height 그리고 margin을 이용하여 여백까지 지정할 수 있다.

1-3 display: none

<style>
    div {width: 100px; height: 100px;}
    
    .a { background-color: red;}
    .b {background-color: blue;}
    .c {background-color: orange;}

    .none {display: none;}
</style>
<body>
   <h1>none</h1>
   <div class="a">a</div>
   <div class="b none">b</div>
   <div class="c">c</div>    
</body>

- display 속성값을 none으로 표시하면 해당 요소는 웹 페이지에 더 이상 나타나지 않으며, 웹 페이지의 레이아웃에도 영향을 미치지 않는다.

2. visibility

<style>
    div {width: 100px; height: 100px;}
    
    .a { background-color: red;}
    .b {background-color: blue; visibility: hidden;}
    .c {background-color: orange; }

    .inline-block
    {
        display: inline-block;
        width: 50px;
        height: 50px;
        margin: 13px;
    }
</style>
<body>
   <h1>inline-block</h1>
   <div class="a inline-block">a</div>
   <div class="b inline-block">b</div>
   <div class="c inline-block">c</div>    
</body>

- visibility 속성은 HTML 요소가 웹 페이지에 표현 여부를 결정한다.

- visibility: visible -> 해당 웹 페이지에 표시한다.

hidden -> 해당 웹 페이지에 표시하지 않으나 여전히 레이아웃에는 존재한다.

3. opacity

<style>
    div {width: 100px; height: 100px;}    
    .a { background-color: red; opacity: 0.6;}
</style>
<body>
   <div class="a">a</div>
</body>

- HTML 요소의 투명도를 조절할 수 있다.

- 1.0을 기준으로 0에 가까울수록 투명한 상태가 된다.

저작자표시 비영리

'FrontEnd > Css' 카테고리의 다른 글

[CSS] float (0)	2021.07.30
[CSS] position, z-index (0)	2021.07.29
[CSS] 아웃라인(outline) (0)	2021.07.27
[CSS] 마진(margin) (0)	2021.07.27
[CSS] 테두리(border) (0)	2021.07.27

PteroSaurs