[CSS 기초] 엘리먼트 보이고 감추기 (display, visibility, opacity)

요소를 보이고 감추는 법에 대해 알아보겠습니다.

🔷 display

요소를 어떻게 보여줄지 결정합니다.

display: none은 요소를 아예 사라지게 합니다. 보이지도 않고 해당 요소의 공간 또한 사라집니다.

🔹 display 속성 값

• none : 요소를 보이지 않게 함.
• inline : 요소를 인라인레벨로 변경.
• block : 요소를 블록레벨로 변경.
• inline-block : 인라인레벨과 블록레벨의 특성을 (가로배치, 너비높이값 가짐) 모두 가지도록 변경.

 

이 세 가지 박스 중 파란색 박스를 없애는 것으로 예시를 들어보겠습니다.

 

See the Pen display:none by k (@kjwboa) on CodePen.

 

파란색 박스가 보이지도 않고 파란색 박스가 원래 갖고있던 영역도 없어집니다.

다시 보이고 싶을 때는 dispaly: block (블록요소)을 써주면 됩니다.

---

🔷 visibility

visibility 속성은 문서의 레이아웃을 변경하지 않고 요소를 보이거나 숨깁니다.

vsibility: hidden 을 하더라도 요소는 보이지 않으나 요소의 영역은 그대로 남아있습니다.

🔹 visibility 속성 값

• hidden : 요소를 보이지 않게 함.
• visible : 요소를 보이게 함.
• collapse :   table의 행, 열, flex 아이템에 적용하면   display: none으로 설정한 것과 동일하게 요소를 숨기고 요소의 공간도 제거합니다. 다른 요소에서는 visibility: hidden과 동일합니다.

See the Pen visibility: hidden by k (@kjwboa) on CodePen.

 

파란색 박스가 보이지않으나 파란색 박스가 원래 갖고있던 영역은 남아있습니다.

---

🔷 opacity

투명도를 설정합니다. 투명도만 조절하는 것이기 때문에 보이지 않더라도 요소는 존재합니다.

🔹 opacity 속성 값

• 0 - 1 : 0과 가까워질수록 투명, 1에 가까워질수록 불투명.

See the Pen opacity: 0 by k (@kjwboa) on CodePen.

 

파란색 박스가 보이지는 않아도 투명도만 조절된 것이기 때문에 파란색 박스는 존재하고 있습니다.