강의

멘토링

로드맵

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

Hình ảnh hồ sơ của imagker8221
imagker8221

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

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 설정

Viết

·

273

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;
classjavascriptHTML/CSS인터랙티브-웹

Câu trả lời 2

2

studiomeal님의 프로필 이미지
studiomeal
Người chia sẻ kiến thức

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님의 프로필 이미지
magker i
Người đặt câu hỏi

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

 

Hình ảnh hồ sơ của imagker8221
imagker8221

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

Đặt câu hỏi