인프런 커뮤니티 질문&답변
작성한 질문수
블릿아이콘 회전부분이 좀 이해가안가
작성
·
261
1
.title:before {
position: absolute;
content:'\f105';
font-family: fontawesome;
right:10px;
top:7px;
transition: 0.3s;
}
.title.active:before {
transform: rotate(90deg);
color: orange;
}
저는 before가상클래스에 넣었는데요
그 가상클래스에 속하는 content를 90도 회전시킨다는 의미라는건 알겠는데
.title:before 가상클래스와
.title.active:before 가상클래스는 content부분을 따로 선언해주지 않고도
기준이 되는 content가 .title:before가 기준이면서 .active라는 클래스가 추가됐을경우를 의미하는건가요?
잘 작동되는거 보면 의미는 받아들이겠지만.... .active 가 없는 클래스의 가상클래스가 기준이 되고 거기에 transition을 넣는게 헷갈리긴 합니다.^^;;;
답변 1
0
코딩웍스(Coding Works)
지식공유자
.title.active:before 는 독립적으로 역할을 하는게 아니라 .active라는 클래스는 제이쿼리로 클래스가 html에 들어갈 때만 작동하는 클래스입니다.
transition: 0.3s; 은 .title:before 가 변화하는 것이기 때문에 .title:before에 넣우주어야 합니다.