[Part 02] like 버튼 질문입니다

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

[Part 02] 쇼핑몰 아이템 UI 호버 이펙트 - 세부 HTML 작성 및 상세 CSS 디자인

작성

211

[Part 02] 쇼핑몰 아이템 UI 호버 이펙트 - 세부 HTML 작성 및 상세 CSS 디자인

31분에서 .like에 왜 굳이 가상클래스 before을 쓴건가요?. 그냥 .like에 전부 css를 작성해도 되지 않나요?

답변 1

지식공유자

클릭했을 때 하트 버튼의 변화를 주기 위해서 :before를 사용했어요.

.like에 전부 css를 작성... 이게 어떤 말씀인지 이해가 확 되지가 않는데요.

혹시 가상클래스가 아니라 직접 i태그로 넣지 않았느냐는 질문이신지요?

만약 그런 질문이시면 클릭했을 때 html을 교체하는 것도 가능하지만 :before로 하는게 쉽고 효과적이어서 그렇게 했어요.

.like에 전부 css를 작성... 이게 어떤 의미인지 좀 풀어서 설명해주시면 답변을 좀 더 정확히 드릴 수 있을 것 같아요.

질문자

before 가상클래스를 추가하지 않고 .like {

  cursor: pointer;
  content: '\f08a';
  font-family: fontawesome;
  color: #bbb;
  position: absolute;
  right: 0;
  top: 0;
}

해도 되지 않냐는 애기였습니다.

근데 이렇게 하니깐 화면에 출력되지 않는데 content 속성은 가상클래스에서만 사용가능한 속성같은데 맞나요?

지식공유자

content는 가상클래스 중에서 :before :after에서만 사용할 수 있는 속성입니다.

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