페이드 슬라이드 관련 문의

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

작성한 질문수

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

[최종본 제작] 세로 2컬럼(C2타입) – Part1

해결된 질문

작성

313

선생님 안녕하세요^^

세로 2컬럼 최종본 제작영상 관련 질문이 있습니다.

페이드 슬라이드 부분에서

강의영상에는

.slide > div a에 opacity : 0 값을 주고

키프레임 0%일때 visibility : hidden으로 지정하였는데요.

최종본 소스 다운로드 자료에는

.slide > div a에 visibility : hidden값을 주고

키프레임에

5%, 40% 구간에 visibility값을 visible과 hidden으로 다시 지정하셨던데

혹시 어떠한 차이가 있는건가요?

HTML/CSS jquery 웹 디자인

답변 1

코딩웍스(Coding Works)

지식공유자

visibility : hidden 을 주지 않으면 이미지가 안보이지만 겹쳐 있기 때문에 3번째 a 태그만 클릭됩니다.

보이는건 완벽하게 크로스페이드가 되지만 위처럼 해주셔야 완벽한 크로스페이드 슬라이드 제작이됩니다.

섹션 7. 모듈 제작하기(슬라이드 애니메이션 - CSS 제작 방식, 제이쿼리 제작 방식)에 보시면 5. CSS 슬라이드 애니메이션(크로스페이드 슬라이드) 영상에 더 보기로 CSS 버전 크로스페이드 슬라이드 CSS 구문 오류 수정 내용이 있습니다. 영상을 찍을 때 미쳐 넣지 못한 부분을 첨부했습니다.

작성한 질문수

전체 Q&A

질문하기