[CSS] - visibility VS display 애니메이션 적용 차이

[CSS] - visibility VS display 애니메이션 적용 차이

 

 

어떻게 해야 더 깔끔하게 코드를 작성할 수 있을까? 공부중

 

다른 개발자분의 드롭다운 메뉴 CSS 코드를 보게 되었다.

 

여기서 지나칠 수 있었지만 나는 드롭다운 메뉴를 구현할 때 display(block, none)를 이용해 작성하는데

왜 이분은 visibility(visible, hidden)를 사용할까? 라는 의문을 계기로 코드를 동작시켜보며 알게된 내용을 공유하고자 포스팅하게 되었다.

 

Display

우리가 흔히 사용하는 display 속성은 요소를 어떠한 형태로 나타나게 할 것인지를 말하는 속성으로 4가지가 있다.

display : block
display : inline-block
display : inline
display : none

 

Visibility

visibility 속성은 태그의 가시성을 결정한다.

visible: 보임
hidden: 숨김 (자신의 영역은 계속 차지)
collapse: 겹치도록 지정(테이블의 행과 열 요소만 지정할 수 있으며, 그 외 요소의 지정하면 hidden으로 해석)
inherit: 부모 요소의 값을 상속

 

속성 하나하나 살펴보는 포스팅이 아니기에 아래 코드펜을 보면서 적용예시를 보며 이해해보자

 

 

초기 코드 (내가 주로 사용하던 방식)

- display block, none 사용

 

See the Pen Untitled by 은동혁 (@lmztkvjn-the-looper) on CodePen.

 

 

 

위 코드에서 버튼을 클릭시 나오는 오랜지 영역이 부드럽지 않아서 저는 애니메이션을 넣고 싶어 transition: 1s; 를 넣어봤지만 아무리 버튼을 눌러도 1s를 거쳐 부드럽게 나오는 애니메이션은 적용되지 않는다.

 

 

See the Pen Untitled by 은동혁 (@lmztkvjn-the-looper) on CodePen.

 

 

 

 

 

 

 

 

결과적으로 전환효과(transition)에 적용되는 속성에 display는 없다.

 

display는 단순하게 해당 요소를 화면에 보여지는 성격을 결정하는 속성일 뿐

none일 경우 화면에 보여지는 특성이 없는거니까 단순하게 안 보여지는 것이고

block일 경우 단순히 화면에 보여지는 특성이 block 요소의 특성을 가지는 거다.

 

Opacity

그렇다면 opacity를 이용해 불투명도를 조절하면 자연스럽지 않을까? 라는 생각을 할 수 있다. (나또한..)

 

See the Pen Untitled by 은동혁 (@lmztkvjn-the-looper) on CodePen.

 

 

 

 

 

 

마찬가지로 단순히 사라지고 나오는 구조만 가지게 됩니다.

 

 

해결방법

그렇다면 원하는 애니메이션 처리를 하려면 어떻게 해야할까?

화면에 보이고 안보이고를 display로 제어하면 안되고 visibility 속성을 사용해야한다.

 

See the Pen Untitled by 은동혁 (@lmztkvjn-the-looper) on CodePen.

 

 

 

 

결과

결과적으로 원하는 전환효과를 적용할 수 있었고 visibility속성이 화면에 단순하게 요소가 보일 것인지 아닐 것인지를 결정하는게 display와 유사하지만 transition에 영향을 받을 수 있는 속성이라는 걸 배울 수 있는 계기가 되었다.

애니메이션을 적용할거면 visibility 사용하자!