CSS를 이용해서 Element를 숨기는 방법

Element 숨기기 

Element를 숨기는 방법은 여러 방법이 있지만 그중에서 비용이 적게 들고 쉽게 할 수 있는 방법으로 CSS를 이용하는 방법이 있다.

기본적인 형태는 아래와 같다. 

See the Pen Untitled by JJJ (@JJJ-the-animator) on CodePen.

여기서 2번을 숨길 것이다. 

 

CSS를 이용해서 Element를 숨기는 대표적인 방법 3가지는 아래와 같다.

1. display 속성

display : none 을 이용한다.

 

See the Pen Untitled by JJJ (@JJJ-the-animator) on CodePen.

2. visibility 속성

visibility : hidden 을 이용한다. ( 2번 자리에 마우스를 올려보세요. )

 

See the Pen Untitled by JJJ (@JJJ-the-animator) on CodePen.

3. opacity 속성

opacity: 0 을 이용한다. ( 2번 자리에 마우스를 올려보세요. )

 

See the Pen Untitled by JJJ (@JJJ-the-animator) on CodePen.

 

 

hidden을 제외한 아무것도 설정하지 않았다.

예시를 보면 특징이 보이는데, 각 속성을 이용했을 때의 특징은 아래와 같다.

 

1. display 속성

웹 페이지에서 요소를 아예 제거한다. 그래서 해당 요소가 차지하는 공간도 없어지므로 옆에 있던 3번이 1번 옆으로 붙게 된다.

2. visibility 속성

웹 페이지에서 요소가 제거되는 것은 아니지만 보이지 않는다. 마우스 이벤트가 작동하지 않는다.

3. opacity 속성

웹 페이지에서 요소가 제거되는 것은 아니지만 보이지 않는다. 2번 visibility와 비슷하지만 투명도만 0이 된 것이기 때문에 마우스 이벤트가 적용이 된다.