inflearn logo
강의

Khóa học
Chia sẻ kiến thức

Bắt đầu phát triển web tương tác đúng cách

Tìm hiểu về các sự kiện nhấp chuột với các ví dụ về ký tự chuyển động

class 설정

283

magker i

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

0

작성하신 코드에서 .ilbuni 라는 클래스가 어떻게 각각의 ilbuni a, ilbuni b, ilbuni c라는 클래스에 적용되는지가 궁금합니다..

.ilbuni {
            position: absolute;
            width: 100px;
            height: 100px;
            background-repeat: no-repeat;
            background-position: 50% 50%;
            background-size: contain;
            animation: moving infinite alternate;
        }
        .ilbuni.a {
            left: 5%;
            bottom: 5%;
            background-image: url('images/ilbuni_0.png');
            animation-duration: 2s;
        }
        .ilbuni.b {
            left: 10%;
            bottom: 3%;
            background-image: url('images/ilbuni_1.png');
            animation-duration: 3s;
        }
        .ilbuni.c {
            left: 7%;
            bottom: 10%;
            background-image: url('images/ilbuni_2.png');
            animation-duration: 4s;

class javascript HTML/CSS 인터랙티브-웹

Câu trả lời 2

2

studiomeal

CSS 선언 규칙인데요,
한 요소에 여러개의 class가 적용되어 있는 경우, 붙여서 써주시면 됩니다.
예를들어

<div class="ilbuni  a"></div>
<div class="ilbuni  b"></div>
<div class="ilbuni  c"></div>

이런 식으로 되어있다면,
세 요소가 공통으로 ilbuni 클래스를 갖고 있으니
.ilbuni { } 의 내용이 적용될테고요,
각각 a, b, c 클래스를 갖고 있으니

.a {  }
.b {  }
.c {  }

이렇게만 해주면 각각 적용이 될텐데,
혹시 a, b, c 같은 클래스 이름이 다른 곳에도 사용될 것을 대비해서

.ilbuni.a {  }
.ilbuni.b {  }
.ilbuni.c {  }

이런 식으로 써 준 것이랍니다.
.ilbuni  .a 라고 띄어쓰기를 하면 .ilbuni 안에 있는 자식 요소인 .a를 가리키지만,
<div class="ilbuni">
    <div class="a"></div>
</div>

.ilbuni.a 이렇게 붙여서 써주면 같은 요소입니다.
<div class="ilbuni  a"></div>

0

magker i

이해됬습니다 ! 감사합니다 !

 

왼쪽/오른쪽 동작시 딜레이 문제

0

109

1

변수 범위 관련 질문

0

120

1

perspective 문의

0

114

1

생성자 함수를 클래스 함수로 변경 하고 this 오류 관련

0

167

1

스크롤이 중간 위치에 있을 때 창의 크기를 변환하면 생기는 문제

0

132

1

animation이벤트 질문이요!

0

81

1

resize handler에서 질문이 있습니다.

0

120

1

카드 뒤집힐 때 F가 보인 이유

0

159

1

3d 뒤집기 추가효과

0

225

1

전진! 3D 스크롤 21 강의 질문

1

179

1

eventlistener 질문

0

159

1

zMove 를 1000으로 설정하는 이유에 대하여.

0

178

1

[정보-23강] ES6 class 문법으로 공부하시는 분들!! 화살표 함수로도 시도해보셔요!

1

203

1

동적으로 html 생성 후 이벤트 위임 질문 있습니다.

0

280

1

rotateY()에서 deg에 따른 차이

0

205

1

코드 작성 순서

0

284

1

이미지가 없는데 첨부파일을 다운 받는 방법이 있나요??

1

403

1

'이벤트 위임 보강 영상'에 있는 예제 html이 안 보입니다

0

284

2

섹션5 자바스크립트 이벤트 다루기 질문

1

263

1

[#전진! 3D 스크롤 11] mousePos 공식 질문 있습니다!

0

432

2

css 는 직접 작성을 해야하는걸까용?

0

331

1

translateZ 에 px 이 아닌 vw 로 값을 주신 이유가 있을가요?

0

366

2

house 부분에도 width , height 부분을 꽉 차게 주신 부분이 제가 이해한게 맞는지 궁금합니다.

0

312

2

left:-400vw 가 아닌 translateZ(100vw); 을 입력하신 이유가 궁금합니다.

0

313

2