inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

만들면서 배우는 리액트 : 기초

css 질문

172

sonyo

작성한 질문수 6

1

css 기능 넣어보다가 질문이 있어 여쭤봅니다!

favorites에 있는 각 li에 마우스 hover가 되면 확대하는 기능을 구현하였는데, 확대했더니 이렇게 옆 사진에 가립니다ㅠ 근데 오른쪽 이미지는 확대하면 왼쪽 이미지에 가려지지 않는 것을 보니, 먼저 저장된 이미지가 나중에 저장된 이미지에 가려지는 것 같습니다. 왜 그런 것인가요?? 어떤걸 수정해야할지 몰라 여쭤보고싶습니다!

react javascript

답변 2

1

sonyo

아하 li태그 전체가 덮어버리는 거였군요! 변경 성공했습니다 서치해봐도 안나와서 답답했는데 답변 감사드립니다!

0

진유림

먼저 저장된 이미지가 나중에 저장된 이미지에 가려진다기보단,

이미지들이 

<li>고양이1</li>

<li>고양이2</li>

이렇게 쌓이고, 고양이2가 1 이후에 추가된거니 2가 그 위로 덮어써보이는거예요~

 

hover로 확대하면 고양이 위치에 상관 없이 맨앞으로 튀어나와서 확대되길 원하시나요?

그렇다면 

hover했을때 스타일링에 z-index: 2 를 추가해주시면 될것같네요~

요소의 레이어 위치를 조정하는 속성입니다.

 

안되시면 코드 첨부해주세요 같이 봐드릴게요 ㅎㅎ

API 적용 안되는 코드 수정 방법입니다.

0

85

1

고양이 이미지가 엑박이 뜨네요

0

65

1

npx 명령어 사용 불가

1

86

1

const 변수와 컴포넌트의 차이

0

94

1

강의노트

0

146

1

vite로 리액트 빌드한 후 깃허브에 배포하는 방법

0

340

1

빌드할때 dist 폴더가 만들어지는데요,

0

797

1

js파일 업로드 요청

0

139

1

변경된 api 사용시 text 안나오는 문제

0

151

1

메인글자수정...

1

283

3

디렉터리 구조 관련하여 참고할 만한 예시가 있을까요?

1

315

1

https://cataas.com/undefined 로 나오는데 왜그런건가요?

1

609

4

고양이 사진이 깨져요.ㅜㅜ

2

363

3

강의 노트 위치를 모르겠습니다

1

347

1

깃 강의노트 어디서 볼 수 있나요?

1

382

2

이해가 안되는 부분이 있어요

1

366

1

api가 안불러와지네요...

1

671

4

진유림 선생님 너무 궁금해서 질문드립니다 ㅜ

1

338

2

react에서 컴포넌트 만들 때 대문자를 쓰는 이유

2

1162

2

https://cataas.com/ 여기 도메인이 죽어서 이미지가 보이지 않습니다 ㅠ

1

336

2

index.js 내용이 바꼈네용

1

321

2

프로젝트에 사용할 상태와 로직 관리 라이브러리 훅 사용 질문입니다.

1

263

2

html 코드 오류

1

464

2

고양이 이미지 깨져요

1

343

2