[CSS] display, visibility, opacity

🟦 Display

: display 속성을 어떻게 보여줄지를 결정하는 기능으로, 많은 기능들이 존재

• none : 보이지 않음, 존재 자체를 삭제하여 인식할 수 없도록 처리
• block : 크기를 가지는 형태
• inline : 크기를 가지지는 않으며, 옆으로 나열되는 형태
• inline-block : 크기를 가지면서, 옆으로 나열되는 block과 inline의 중간형태

---

🟦 Visibility

: 태그의 가시성을 결정하는 속성으로, 기본은 ‘inherit(부모의 기능을 따라 처리)’을 가짐

• visible : 보이는 형태
• hidden : 숨김 형태 ( display : none과는 다르게 위치는 존재)

---

🟦 Opacity

: 태그의 투명도를 결정하는 속성 — Opacity 0일 경우에도 선택 가능, 위치 존재

: 0%~100%의 값을 0~1로 처리 (55%일 경우 0.55의 값을 적용)

: 박스와 내용에 모두 동일하게 적용됨

cf) 박스의 배경색 투명도만 적용하고 싶을 때

: background-color : transparent ⇒ 투명도 0

: background-color : #adf4 = #aaddff40 (cmyk)

: background-color : rgba(255, 50, 60, 0.5) (rgb)

: background-color : hsla(90, 50%, 30%, 0.5) (hsl)

---

🟦 Overflow

: 태그의 지정영역의 범위를 벗어날 경우에 처리하는 속성 (기본은 visible)

: overflow-x, overflow-y 속성으로 가로와 세로에 별개로 적용 가능

• visible : 넘치더라도 내용을 보이게 처리
• hidden : 넘치는 영역을 숨김 처리
• scroll : 넘치는 영역을 스크롤바를 생성하여 스크롤 이동으로 확인하도록 처리
• auto : 내용이 넘칠 경우에는 스크롤바, 넘치지 않은 경우에는 기본형으로 처리