CSS) display 관련 (inline을 block으로, block을 inline으로, inline-block, 요소 숨기기-display, visibility, opacity)

안녕하세요, 코린이의 코딩 학습기 채니 입니다.

 

개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다.

---

HTML 코드

<div class="wrapper">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
</div>

 

CSS 코드

<style>
    .wrapper {
        margin: 10px 0;
    }
    .box {
        width: 150px;
        height: 150px;
        border: 1px solid #000;
        background-color: slateblue;
        color: white;
    }
</style>

<div>는 block 요소이기 때문에 같은 줄에 오지 못하는 것을 확인할 수 있습니다.

 

이러한 block 요소를 inline요소로 변경할 수 있습니다.

display: inline

.box {
    width: 150px;
    height: 150px;
    border: 1px solid #000;
    background-color: slateblue;
    color: white;
}
.display-inline {
    display: inline;
}

content의 크기만큼 박스 사이즈가 줄어들고 같은 줄에 온 것을 확인할 수 있습니다.

(inline 요소는 width, height의 크기가 무시됨)

 

inline 요소를 block 요소로 변경도 가능합니다.

display: block

<div class="wrapper">
    <span class="box display-block">1</span>
    <span class="box display-block">2</span>
    <span class="box display-block">3</span>
    <span class="box display-block">4</span>
    <span class="box display-block">5</span>
</div>

 

.box {
    width: 150px;
    height: 150px;
    border: 1px solid #000;
    background-color: slateblue;
    color: white;
}
.display-block {
    display: block;
}

<span> 태그는 inline 요소 이지만, display 속성을 통해 block 요소처럼 처리하였습니다.

 

display: inline-block

<div class="wrapper">
    <div class="box display-inline-block">1</div>
    <div class="box display-inline-block">2</div>
    <div class="box display-inline-block">3</div>
    <div class="box display-inline-block">4</div>
    <div class="box display-inline-block">5</div>
</div>

 

.box {
    width: 150px;
    height: 150px;
    border: 1px solid #000;
    background-color: slateblue;
    color: white;
}
.display-inline-block {
    display: inline-block;
}

block 요소처럼 width, height 크기가 적용되지만, inline 요소처럼 같은 줄에 위치할 수 있게 하였습니다.

 

※ margin이 0이지만 서로 떨어져있는 것을 확인할 수 있는데, 관련하여 정리된 포스팅

https://didqk.tistory.com/entry/div-%EB%A5%BC-inline-block-%EC%9C%BC%EB%A1%9C-%ED%96%88%EC%9D%84-%EB%95%8C-%EC%83%9D%EA%B8%B0%EB%8A%94-%EA%B0%84%EA%B2%A9-%EC%97%AC%EB%B0%B1%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC

div 를 inline-block 으로 했을 때 생기는 간격, 여백에 대하여

 

 

---

요소 숨기기

HTML 코드

<div class="box display-none"></div>
<hr>
<div class="box visibility-hidden"></div>
<hr>
<div class="box opacity-0"></div>
<hr>

 

CSS 코드

display: none

<style>
    .display-none {
        display: none;
    }
</style>

아예 기존 차지하던 자리까지 사라진 것을 확인할 수 있습니다.

 

visibility: hidden

.visibility-hidden {
    visibility: hidden;
}

요소는 숨겨졌지만, display:none과 달리 기존 차지하던 자리는 사라지지 않고 텅 비어있는 것을 확인할 수 있습니다.

 

opacity: 0

- 0 ~ 1까지의 수를 입력하여 불투명도를 결정

.opacity-0 {
    opacity: 0;
}

visibility: hidden 처럼 요소는 숨겨졌지만, 차지하던 자리는 사라지지 않고 텅 비어있는 것을 확인할 수 있습니다.

 

0 ~ 1까지의 수에 따라 불투명도를 결정하는 것이므로 :hover 시 다시 요소를 보여줄 수도 있습니다.

.opacity-0 {
    opacity: 0;
}
.opacity-0:hover {
    opacity: 1;
}

hover 시

 

※ 다만, visibility: hidden은 정말 요소를 숨긴 것이기 때문에 :hover 시 visibility: visiable로 요소를 다시 보여줄 수는 없습니다.