이미지 요소를 교체하거나 스타일을 변경하여 고객의 브랜드에 맞게 이미지를 손쉽게 편집할 수 있습니다.
1. 이미지 적용 (img src)
이미지를 직접 삽입할 때 img 태그의 src 속성을 사용합니다. 다음 예시에서 이미지를 원하는 URL로 교체하여 원하는 이미지를 적용하세요.
<img src="https://cdn.startupful.io/img/app_logo/no_img2.png" alt="Business Dashboard" class="rounded-xl shadow-lg mb-6">
수정 방법
-
이미지 URL:
src 속성에 있는 URL을 새로운 이미지 URL로 교체합니다.
-
이미지 설명:
alt 속성에 적절한 대체 텍스트를 입력해 접근성을 높입니다.
-
스타일링 클래스:
-
rounded-xl: 이미지의 모서리를 둥글게 설정합니다.
-
shadow-lg: 이미지에 그림자 효과를 추가하여 입체감을 줍니다.
2. 배경 이미지 적용 (style=background-image:url)
이미지를 배경으로 적용할 때는 div 요소와 style 속성을 통해 background-image로 설정할 수 있습니다.
<div class="absolute left-1/2 -translate-x-1/2 w-[calc(100vw_-_16px)] w-full inset-0 bg-cover bg-center" style="background-image: url('https://cdn.startupful.io/img/bg/black_blue1.jpg')"></div>
수정 방법
-
배경 이미지 URL:
style 속성의 background-image 값에 URL을 입력하여 배경 이미지를 변경합니다.
-
스타일링 클래스:
-
bg-cover: 배경 이미지를 요소 크기에 맞춰 자동으로 확대하거나 축소합니다.
-
bg-center: 배경 이미지를 중앙에 배치하여 화면 크기에 따라 잘리지 않도록 설정합니다.
3. 이미지 편집 팁
-
크기 조절: 필요에 따라 클래스 속성에서 이미지 크기를 조정할 수 있습니다.
-
이미지 해상도: 고해상도 이미지를 사용하여 화면에서 선명하게 보이도록 설정하세요.
-
반응형 디자인: 다양한 기기에서 최적화된 배경 이미지와 크기 조정을 위해
bg-cover, bg-center 등의 클래스를 활용하세요.
이 가이드를 통해 고객님께서 원하는 이미지를 자유롭게 추가하고 스타일링할 수 있습니다.