Frontend7 [Tailwind] 이미지의 정중앙에 텍스트를 넣어보자 위처럼 이미지 가운데에 텍스트를 넣는 방법이다. 흰 박스는 이미지라고 가정한다. 해결법 (tailwind) // 부모 요소에 relative // StoreImage 라는 styled-components를 만들어놨다고 가정 강남구 TOP 10 tailwind 를 이용하면 위처럼 작성하면 된다. 해결법 (css) {/* 부모 요소에 relative */} {/* StoreImage 라는 styled-components를 만들어놨다고 가정 */} 강남구 TOP 10 relative 요소를 원래 있어야 할 위치로부터 상대적으로 ~~만큼 이동한다. 반대로 이동한다고 생각하면 된다. div { position: relative; top: 20px; left: 20px; } 이 코드에선 아래로 20px, 오른쪽으로.. 2023. 9. 28. [React] 해시값을 인식하고 바로 이동하게 하기 메인 페이지에서 즐겨찾기 더보기를 눌렀을 경우 localhost:3000/mypage#favorite 로 이동하게 되는데, 가장 첫 페이지인 리뷰 탭이 보였다. useEffect(() => { const hash = window.location.hash; if (hash === '#review') setCurrentTab('리뷰 관리'); if (hash === '#order') setCurrentTab('주문 내역'); if (hash === '#favorite') setCurrentTab('즐겨찾기'); }, []); 이처럼 해시 값을 받아 브라우저 렌더링 시 해당 해시값으로 이동하도록 수정하였다. 2023. 9. 27. [Tailwind CSS] 가독성 향상을 위해 글씨에 테두리를 넣어보자 이미지에 넣은 글씨 색상이 이미지 색상과 비슷하면 잘 보이지 않는 부분을 그림자를 넣어 개선했다. className="drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,0.8)]" Before After 2023. 9. 26. 이전 1 2 다음
