-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
해결됨
마지막 섹션에서의 달 스타일 질문드려요.
20.11.09 23:31 작성 조회수 123
0
마지막 섹션에서의 달 스타일이 다음과 같은데요.
active상태가 아닐때, opacity 가 0이면 어차피 노출이 안되는데 visibility를 hidden으로 적용하는 이유가 있나요?
opacity이외에 visibility값을 주어야 하는 이유가 무엇일까요?
답변을 작성해보세요.
1
깡코딩
지식공유자2020.11.10
안녕하세요 :)
질문하신 내용은 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
도움이 되셨나요? 그럼 또다른 궁금증이 생길때 언젠든 문의주세요^^
0
답변 2