inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

가상클래스 before after 가상클래스 활용한 실전 퍼블리싱 03(SNS 아이콘 애니메이션)

position relative absolute

해결된 질문

325

hgr1878

작성한 질문수 1

1

■ 질문 남기실 때 꼭! 참고해주세요.

- 먼저 유사한 질문이 있었는지 검색해주세요.
- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.
- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.
- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.

 

가상클래스 before after 가상클래스 활용한 실전 퍼블리싱 03(SNS 아이콘 애니메이션) 16:18 부분에서 position: relative 를 주면 아이콘이 앞으로 보이는 이유가 무엇인가요?? 강의에서 빠르게 넘어가서 이해가 잘 되지 않았습니다

HTML/CSS jquery

답변 1

1

코딩웍스(Coding Works)

.sns a .fa는 포지션 속성이 없으면 기본값이 static입니다.
.sns a:before에 absolute가 있으면 static 보다 우선합니다. 그래서 .sns a:before가 위로 올라 갔습니다.
그래서 .sns a .fa에 relative를 주면 둘 다 포지션 absolute와 relative가 있고 기본적으로 둘 다 z-index: 0를 갖습니다. 그럼 둘 중에 하나는 우선해야 합니다. z-index가 같다는 기준에 나중에 나온 html이 우선합니다.

곧 .sns a:before 보다 sns a .fa가 나중에 나왔기 때문에 우선합니다. 이 부분은 사실 글로 하기는 좀 어려운 부분입니다. 이 경우 :before :after에 따라 다릅니다. :before를 쓰면 .fa가 나중에 나온게 되고, :after를 쓰면 .fa가 먼저 나온게 됩니다.

image

image

class 값 한 번에 부여하는법

2

95

1

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

1

80

1

div#css-checker-widget의 해결방

1

71

2

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

0

96

2

강의듣는법

1

87

1

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

1

77

2

input checked 질문합니다.

0

81

1

Bracket Pair Colorizer - 비주얼 스튜디오

1

154

2

Part 1 영상 안나옵니다

1

100

1

제이쿼리 작동이 안됩니다

1

214

3

강의 내용 질문있습니다.

1

132

2

일정 부분만 주석하는 방법

1

228

2

폰트어썸

1

146

2

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

1

135

2

delay 적용 안됨

1

139

1

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

1

192

2

세로이동할때 height값

1

143

2

폰트어썸이 안되요..

1

508

2

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

1

175

1

어코디언 네비게이션 중

1

130

1

라이브서버 문제

1

246

2

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

1

108

1

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

1

165

1

active 관련 질문

1

152

2