visibility와 opacity

안녕하세요 승민님 :)

질문하신 내용은 opacity와 visibility, display none 속성에 대해 검색해보면 조금 더 자세히 아실 수 있을겁니다 :D

그럼 간략하게 질문하신 내용에 대해 알려드릴께요 :)

- opacity의 특징 -

1.요소의 투명도 조절할 수 있습니다.

2.opacity:0 으로 투명도 조절을해 요소를 숨겼을때 눈에 보이지는 않지만 해당 요소의 아래에 있는 요소의 제어를 방해할 수 있습니다.

3.transition 전이 속성에 반응하며 부드러운 fadein과 fadeout 효과를 처리할 수 있습니다.

- visibility 특징 -

1.visibility: hidden 으로 요소를 숨길 경우 눈에 보이지 않지만 해당 위치에 그대로 자리잡고 있기 때문에 hidden으로 숨긴 요소의 다음 요소는 hidden으로 숨긴 요소의 영역 아래에 위치하게 됩니다.

2.visibility: hidden 으로 요소를 숨겼을때 hidden으로 숨긴 요소의 아래에 있는 요소의 제어를 방해하지 않습니다.

3.visibility 속성은 transition 전이 속성에 반응합니다.

- display none 특징 -

1.display:none 으로 요소를 숨길수 있고 none으로 숨긴 요소는 해당 위치에 자리잡고 있지 않기 때문에 none으로 숨긴 다음 요소는 숨긴 요소의 영역을 차지하게 됩니다.

2.display 속성은 transition 전이에 반응하지 않습니다.

위 3가지 특징을 이해한다면 opacity와 visibility를 왜 같이 사용했는지 정확히 이해가 가실겁니다 :D 그리고 display:none과 opacity:0 으로 fadein효과를 구현할 수 없다는것도 알게 되실거구요 :)

마지막으로 간략하게 정리 하자면 opacity로 부드러운 등장 처리를 하고 visibility로 요소를 숨겨두어 버튼이라던지 사용자가 제어 해야하는 요소들을 가리지 않도록 한겁니다 :D

도움이 되셨나요? 그럼 또다른 궁금증이 생길때 언젠든 문의주세요^^

--------------------------------

한가지 답변이 빠졌네요

질문. opacity만 사용할 경우 달 사진이 부드럽게 사라지지 않는 것은 확인하였는데

- opacity만 사용해도 부드럽게 사라지고 등장하도록 처리 가능합니다. 다시 한번 확인해보세요 :)

질문. visibility만 사용할 경우는 opacity와 같이 사용하는 경우와 동일한거 같습니다.

- 동일하지 않습니다. 다시 한번 확인해보세요 :)

인프런 커뮤니티 질문&답변