인프런 커뮤니티 질문&답변
작성한 질문수
class 설정
작성
·
189
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;
답변 2
2
1분코딩
지식공유자
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
