그린어게인 프로젝트 메인뷰 위에 디테일 페이지로 접근하기 위한 버튼을 적용하기 위해서
images위에 버튼을 추가하는 방법에 대해 기록하고자 한다.
우선 images를 띄우는 방법은 크게 두가지가 있는것 같다.
<img src={파일경로} />
<div style={{ backgroundImage: `url(${파일경로 네임})`}} />
img와 backroundImage를 사용하는 방법인데 나는 img만을 사용해서 개발했다.
근데 여러 사이트를 돌아다니다 이미지 파일 위에서 요소들을 마치 텍스트처럼 정렬을 해서 쓰는 것을 봤는데
img태그를 사용하면 img태그와 text는 분리되어서 위에 덮어지지 않는다.
즉, position 스타일을 변경해서 텍스트를 띄워버리는 방법을 사용해야 구현할 수 있는데
backgroundImage를 사용하면 배경이미지위에 텍스트를 단순 레이아웃으로 정렬해서 사용할 수 있었다.
https://mygumi.tistory.com/369