[CSS] display, visibility, opacity

---

1.display

Layout 정의에 사용되는 프로퍼티

1-1.block

새로운라인에서 시작하고 width가 100%다.
width, height, margin-top, margin-bottom지정가능
div,h1~h6,p,ol,ul,li,hr,table,form은 기본적으로 bolck 을 가진다.

<style>
    .mydisplay{
        display: block;
        background-color: antiquewhite;
    }
</style>
<a style="background-color: antiquewhite;">asdas</a>
<a class="mydisplay">asdas</a>

asdas asdas

 

 

 

1-2.inline

문장의 중간에 들어갈수있음(줄을 안바꿈)
content의 너비만큼 가로폭 차지
width, height, margin-top, margin-bottom지정불가능
span,a,strong,img,br,input,select,textarea,button은 기본적으로 inline

<style>
    .myinline{
        display: inline;
        background-color: red;
    }

</style>

<a>안녕<a class="myinline">하</a>세요</a>

안녕하세요

 

 

 

 

1-3.inline-block 

줄을 바꾸지않고 다른요소와 함께 한행에 위치가능
width, height, margin-top, margin-bottom지정가능

<style>
    .myinline_block{
        display: inline-block;
        background-color: yellow;
        width: 60px;
    }

</style>
<a>반가워<a class="myinline_block">요반</a>가워요</a>

반가워요반가워요

 

 

 

2.visibility 

프로퍼티 요소의 렌더링 여부결정
visible:기본값
hidden:안보이게함(공간은 남아있음)
display:none:안보이게 하고 공간까지없앰

<p>안녕하세요</p>
<p style="visibility: visible;">안녕하세요</p>
<p style="visibility: hidden;">안녕하세요</p>
<p style="display: none;">안녕하세요</p>

<table>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
</table>
<table style="visibility: collapse;">
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
</table>

 

안녕하세요

안녕하세요

안녕하세요

안녕하세요

1

2

1

2

 

 

 

 

 

 

3.opacity

투명도 0:투명 ~ 1:불투명

<a style="opacity: 0.2;">반갑습니다~</a>

반갑습니다~

 

 

 

 

 

 

 

---

🎈참고자료

https://poiemaweb.com/css3-display