display:none, visibility:hidden, opacity:0 의 차이점은?

Question

display:none, visibility:hidden, opacity:0 의 차이점은?

Answer

display:none

• 영역 사라짐
• 이벤트(ex.클릭) 작동 안함
• tab focus 안됨

visibility:hidden

• 영역 있음
• 이벤트(ex.클릭) 작동 안함
• tab focus 안됨
• 뒤에 있는 요소 클릭 가능

opacity:0

• 영역 있음
• 이벤트(ex.클릭) 작동 함
• tab focus 됨
• 뒤에 있는 요소 클릭 불가능

💭 활용 Tip

요소에 fadeIn 효과를 주고 싶을 때 display를 사용하면
영역 자체가 없어졌다가 보여지기 때문에 transition 효과가 보이지 않는다.

.box {
	tansition: 0.3s;
    display: none;
    
    &.fadeIn {
    	display: block;
	}
}

그래서 아래와 같이 opacity와 visibiliy를 사용하면
요소에 있는 클릭 이벤트의 작동도 방지하면서 transition 효과를 줄 수 있다.

.box {
	tansition: 0.3s;
    opacity: 0;
    visibility: hidden;
    
    &.fadeIn {
      opacity: 1;
      visibility: visible;
	}
}