Cộng đồng Hỏi & Đáp của Inflearn

câu hỏi đã được viết

Tương tác cuộn mà ngay cả người mới bắt đầu cũng có thể tạo ra. Phần 1 JavaScript

4-3 [Giải thích mã] Viết script tương tác cuộn (Parallax, chuyển đổi nền)

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

Đã giải quyết

Viết

·

294

0

마지막 섹션에서의 달 스타일이 다음과 같은데요.

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);}

javascriptHTML/CSS인터랙티브-웹jquery

Câu trả lời 2

1

ggangcoding162118

Người chia sẻ kiến thức

안녕하세요 :)

질문하신 내용은 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

Người đặt câu hỏi

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

câu hỏi đã được viết

Đặt câu hỏi