• 카테고리

    질문 & 답변
  • 세부 분야

    자격증 (디자인)

  • 해결 여부

    해결됨

slide animation css 부분

21.08.27 12:12 작성 조회수 209

1

슬라이드 애니메이션 css 부분에서

가로와 세로로 만드는 부분은 

.sldie  div{ }에 설정값을 주셨고,

크로스 페이드에는 

.slide div a {}에 설정값을 주셨는데

왜 그런거죠?

가로

.slide {
    /*position: relative;*/
    width: 1200px;
    height: 300px;
    overflow: hidden;
}
.slide > div {
    width: 3600px;
    font-size: 0;
    /*position: absolute;*/
    /*top: 0;
    left: 0;*/
    animation: slide 10s linear infinite;

세로

.slide {
    /*position: relative;*/
    width: 1200px;
    height: 300px;
    overflow: hidden;
}
.slide > div {
    /*position: absolute;
    top: 0;
    left: 0;*/
    font-size: 0;
    animation: slide 10s linear infinite;
}

크로스페이드

.slide {
    position: relative;
    width: 1200px;
    height: 300px;
}
.slide div {
    font-size: 0;
}
.slide div a {
    position: absolute;
    top: 0;
    left: 0;
    animation: slide 10s linear infinite;
    /*opacity: 0;*/
    visibility: hidden;
}

 

답변 1

답변을 작성해보세요.

0

가로 세로 슬라이더의 a 태그는 한자리에 모이면 안됩니다.

가로 슬라이더는 a태그가 .slide div 안에 가로로 길게 3개 있구요.

세로 슬라이더는 a태그가 .slide div 안에 세로로 길게 3개 있구요.

그래서 .slide div가 움직이도록 한거구요.

크로스페이드는 a태그가 한자리에 모여야 하기 때문에 .slide div를 부모요소로 하고 .slide div a를 자식요소로 해서 .slide div 안에서 a가 크로스페이드 되도록 만든겁니다.

karen6님의 프로필

karen6

질문자

2021.08.27

네 명확하게 이해가 되네요.유형이 3개이다보니 조금만 달라도 단순히 외우는거로는 안되서요.감사합니다.

이해가 되면 잘 안 잊어 먹죠. 화이팅~!