
[React] 배경 이미지 위에 텍스트 배치하기 (Styled Components 사용하여 map을 통해 props를 넘겨주는 방법)
·
프론트엔드/React
Slick을 사용하여 환경이슈 컴포넌트 완성을 하고, 뒤이어 구현할 산 추천 컴포넌트는 비슷하니까 스타일이랑 내용물만 살짝 바꿔주면 금방 하겠다 싶었는데, 이미지 넣어주고 산 추천 관련한 더미데이터 추가해서 내용물 넣어주니까 이상하게 슬라이더 안에 이미지만 보이고 텍스트가 하나도 안보였었다. 개발자 도구 켜서 요소들을 확인해보니 텍스트들이 모두 이미지 밑으로 들어갔다는 사실을 알게 되었고, 생각해보니 이미지 넣고 텍스트 넣고 할게 아니라 이미지 위에 텍스트를 넣어야했음을 깨달았다. 그래서 그냥 아예 div 안에 이미지를 넣지 말고, div 배경을 이미지로 깔고 그 안에 텍스트를 넣어서 글씨가 배경 이미지 위에 오도록 하였다. 먼저, 배경으로 쓸 이미지 데이터를 map을 사용하여 props로 받아올 것이기..