Cộng đồng Hỏi & Đáp của Inflearn
câu hỏi đã được viết
visibility와 opacity
Viết
·
1K
0
ggang_lesson.section4,step3.index.html의 css에 질문이 있습니다.
motion_moon과 motion_moon.active에서
visibility와 opacity 는 동일한 특성을 나타내는것 같은데. 왜 이렇게 사용하신건지 궁금해서 질문남깁니다.
opacity만 사용할 경우 달 사진이 부드럽게 사라지지 않는 것은 확인하였는데,
visibility만 사용할 경우는 opacity와 같이 사용하는 경우와 동일한거 같습니다.
두개를 다 기입해야하는 이유가 무엇인가요?
Câu trả lời 3
0
0
0
안녕하세요 승민님 :)
질문하신 내용은 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와 같이 사용하는 경우와 동일한거 같습니다.
- 동일하지 않습니다. 다시 한번 확인해보세요 :)