인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

odark님의 프로필 이미지
odark

작성한 질문수

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

[Part 02] 어코디언 콘텐츠 슬라이드 - 상세 내용 퍼블리싱

블릿아이콘 회전부분이 좀 이해가안가

작성

·

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

.title.active:before 는 독립적으로 역할을 하는게 아니라 .active라는 클래스는 제이쿼리로 클래스가 html에 들어갈 때만 작동하는 클래스입니다.

transition: 0.3s; 은  .title:before 가 변화하는 것이기 때문에  .title:before에 넣우주어야 합니다.

 

odark님의 프로필 이미지
odark

작성한 질문수

질문하기