css-11: 요소들을 감추는 방법들

2022-10-14 최대 1 분 소요

요소들을 감추는 방법들

* 기본 html

p {
  display: inline-block;
  padding: 24px;
  background-color: beige;
  cursor: default
}	

*기본 css

p {
  display: inline-block;
  padding: 24px;
  background-color: beige;
  cursor: default
}

___

opacity : 투명도를 사용해서 요소를 감추는 것

(0으로해도, 기능적인 부분은 유효함/ 스크린리더 제품에 따라 읽기도, 읽지않을수도 있음)

div {
  padding: 24px;
  background-color: skyblue;
  cursor: pointer;
  opacity: 0.2;
}

visibility 속성을 hidden으로 하면 위 효과에 더하여
마우스 오버 효과나 포커스, 클릭 등도 무효하게 됩니다.(기능적인 부분 무효)
스크린 리더에도 읽히지 않음

div {
  padding: 24px;
  background-color: skyblue;
  cursor: pointer;
  visibility: hidden;
}

display 속성을 none으로 하면 위 효과들(기능적인 부분 무효)에 더하여
자리도 차지하지 않게 됩니다.

div {
  padding: 24px;
  background-color: skyblue;
  display: none
}