Frontend/Tailwind2 [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. [Tailwind CSS] 가독성 향상을 위해 글씨에 테두리를 넣어보자 이미지에 넣은 글씨 색상이 이미지 색상과 비슷하면 잘 보이지 않는 부분을 그림자를 넣어 개선했다. className="drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,0.8)]" Before After 2023. 9. 26. 이전 1 다음