inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

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

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

237

huni0149

작성한 질문수 14

1

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

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

HTML/CSS jquery

답변 1

0

코딩웍스(Coding Works)

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

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

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

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

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

0

huni0149

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

  cursorpointer;
  content'\f08a';
  font-family: fontawesome;
  color#bbb;
  positionabsolute;
  right0;
  top0;
}

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

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

0

코딩웍스(Coding Works)

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

class 값 한 번에 부여하는법

2

95

1

@media에서의 flex-direction: column으로 세로배치 관련 질문드립니다.

1

79

1

div#css-checker-widget의 해결방

1

71

2

input의 포커스되었을때 검정선이 사라지지 않아요

0

95

2

강의듣는법

1

86

1

아코디언 만들기 100%이하의 화면으로 보았을때

1

77

2

input checked 질문합니다.

0

81

1

Bracket Pair Colorizer - 비주얼 스튜디오

1

152

2

Part 1 영상 안나옵니다

1

97

1

제이쿼리 작동이 안됩니다

1

212

3

강의 내용 질문있습니다.

1

129

2

일정 부분만 주석하는 방법

1

223

2

폰트어썸

1

144

2

인접선택자에 대한 질문드립니다!

1

135

2

delay 적용 안됨

1

137

1

rotateY(360deg)가 적용이 안됩니다!

1

190

2

세로이동할때 height값

1

142

2

폰트어썸이 안되요..

1

505

2

화면 정중앙에 오게끔 할수있나요?

1

175

1

어코디언 네비게이션 중

1

127

1

라이브서버 문제

1

241

2

넷플릭스 어코디언 예제 질문

1

107

1

이번 강의에선 display flex가 무조건 적으로 필요한건가요 ?

1

163

1

active 관련 질문

1

150

2