[CSS] 요소를 안보이게 하고 싶을 때 적절한 스타일 넣기

로고와 함께 넣는 h1 태그를 감추고 싶을 때,
스크린리더기에는 읽히게 하고 싶은 태그를 안보이게 하고 싶을 때 등등

페이지에서 사용자에게 감추고 싶은 태그를 감추는 방법들이 있다. 각각을 비교해보고 상황에 따라 알맞은 스타일을 적용해보자!

1. display: none => 아예 없다!

• 잡히는 영역이 아예 없다. 페이지에서 사라진다고 봐도 무방.
• 영역이 없으니 당연히 클릭같은 이벤트 일어나지 않고 tab해도 포커스 되지 않는다.

2. opacity:0 => 투명한 유리창!

• 유리창같이 투명한데 만져진다.
• 영역 있기 때문에 tab 포커스도 잡힘
• 이벤트가 발생
• 유리가 있기 때문에 뒤에 있는 요소 만질 수 없다 = 뒤에 있는 요소 클릭 불가능

3. visiblity: hidden => 보이는 부분을 다 숨겨버림! 유리 없는 창문! 창틀만!

• 창틀만 있는 것처럼 통과가 가능함
• 영역이 있기 때문에 tab 포커스도 잡힘
• 이벤트 작동하지 않는다
• 유리가 없기 때문에 뒤에 있는 요소 만질 수 있다 = 뒤에 있는 요소 클릭 가능