display, visibility, opacity 속성

1. display: none;

화면에 표시를 하지 않음. 즉 렌더링 하지 않음.

2. visibility: hidden;

눈에 보이지 않게 숨김. 컨텐츠는 없으나 자리를 차지하게 됨.

3. opacity: 0;

투명하게 하여 보이지 않게 함. 투명한 컨텐츠가 자리를 차지하게 됨.

 

헷갈리는 프로퍼티 모음. 오늘은 CSS편이다.

 

세가지 속성 모두 요소를 화면에서 보이지 않게 한다는 공통점이 있다만 실제 화면에 존재하는지의 여부에서 차이가 발생한다. 

 

display: none은 렌더링을 하지 않는다는 점에서 명쾌하다. 화면에 보이지 않을 뿐 아니라 존재하지 않기 때문에 스크린리더가 내부 텍스트를 읽지 않는다. 시멘틱 텍스트를 display로 숨기지 말 것!

 

visibility: hidden는 화면에 보이지 않고 컨텐츠도 없으나 주어진 공간을 차지한다. 그러므로 레이아웃을 지키면서도 visibility가 hidden인 요소 뒤의 다른 요소와 상호작용하는 데 문제가 없다. 

 

opacity: 0는 화면에 보이지 않으나 컨텐츠는 존재한다. opacity 0인 요소 뒤에 다른 요소가 있다면 상호작용할 수 없도록 가로막게 된다. opacity가 0.5인 불투명 요소가 위를 덮고 있는 것으로 생각해도 좋다. transition이 적용된다는 게 특이점이다.

 

 

이러한 특성을 이용하여 visibility+opacity+transition를 조합해 fade in/out 효과를 줄 수 있다. 

 

See the Pen Untitled by wavy (@_wavy) on CodePen.