[CSS] Visibility

안녕하세요 동기 여러분! 오늘은 Visibility 프로퍼티에 대해 알아보도록 합시다!

 

Visibility

visibility를 영어 사전에 찾아보면 눈에 보임, 가시성 등등의 뜻을 가지고 있습니다. 흠 그럼 뭔가 보이게 하고 안 보이게 하는 프로퍼티겠군요?

 

---

생김새

p {
  visibility: hidden;
}

 

---

 

Visibility의 값들

값	설명
visible	기본 값. 요소가 보임.
hidden	요소가 숨겨짐 (하지만 공간은 차지하고 있음!)
collapse	테이블의 열 또는 행을 제거해기 위해 사용 (display: none;처럼)

 

---

 

해봅시당

visible

<!-- HTML -->
<p>안녕하세요 동기 여러분!</p>

/* CSS */
p {
  visibility: visible;
}

보입니다!

 

hidden

<!-- HTML -->
<p>안녕하세요 동기 여러분!</p>

/* CSS */
p {
  visibility: hidden;
}

안보입니다!

안 보이지만 공간은 차지하는지 알아봅시다.

<!-- HTML -->
<p>안녕하세요 동기 여러분!</p>
<h1>보이진 않지만 위에 공간을 차지하고 있네요!</h1>

/* CSS */
p {
  visibility: hidden;
}

공간을 차지합니다!

 

collapse

<!-- HTML -->
    <table border="1">
      <thead>
        <tr>
          <th>값</th>
          <th>설명</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>visible</td>
          <td>기본 값. 요소가 보임.</td>
        </tr>
        <tr>
          <td>hidden</td>
          <td>요소가 숨겨짐 (하지만 공간은 차지하고 있음!)</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>collapse</td>
          <td>테이블의 열 또는 행을 제거해기 위해 사용 (display: none;처럼)</td>
        </tr>
      </tfoot>
    </table>

• 이런 테이블을 만들었습니다. 

/* CSS */
#collapse {
  visibility: hidden;
}

위 코드를 사용해서 여러 방법으로 붕괴(collapse)해 보겠습니다

 

값, 설명 <thead>- 붕괴

 

visible, 기본 값. 요소가 보임. <tbody><tr> - 붕괴

전부 붕괴

 

---

 

오늘의 느낌

새해 복 많이 받으세요 ~~~