마지막 섹션에서의 달 스타일 질문드려요.

Question

마지막 섹션에서의 달 스타일이 다음과 같은데요. active상태가 아닐때, opacity 가 0이면 어차피 노출이 안되는데 visibility를 hidden으로 적용하는 이유가 있나요? opacity이외에 visibility값을 주어야 하는 이유가 무엇일까요? .motion_area .motion_moon { visibility : hidden ; position : fixed ; right : 100px ; top : 100px ; z-index : 20 ; width : 200px ; opacity : 0 ; transform : translateY ( -100px ); -webkit-transform : translateY ( -100px ); -moz-transform : translateY ( -100px ); -o-transform : translateY ( -100px ); -ms-transform : translateY ( -100px ); transition : 1s ;} .motion_area .motion_moon.active { visibility : visible ; opacity : 1 ; transform : translateY ( 0px ); -webkit-transform : translateY ( 0px ); -moz-transform : translateY ( 0px ); -o-transform : translateY ( 0px ); -ms-transform : translateY ( 0px );}

깡코딩 · Answer

안녕하세요 :) 질문하신 내용은 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 도움이 되셨나요? 그럼 또다른 궁금증이 생길때 언젠든 문의주세요^^

imjhua · Answer

감사합니다! 궁금증이 해결 되었습니다^^ 앞으로도 접근성에  대한 부분도 함께 고려해봐야겠어요.