이미지 위젯

위젯 소개

페이지에 이미지를 삽입할 때 사용합니다.

위젯 설정하기

1. 이미지 위젯을 추가합니다. 위젯 추가방법
2. 이미지 설정을 열어줍니다. 위젯 설정 열기
3. 아래 설정 항목을 참고해 설정을 변경합니다.

설정 항목

1. 이미지 추가하기: [이미지를 추가해주세요] 영역을 클릭하면 이미지를 업로드하거나 아임웹이 제공하는 무료 이미지를 선택할 수 있습니다.
   
   
2. 레이아웃:
   • 스타일 없음: 이미지가 기본 스타일로 노출됩니다.
     • 높이 [기본]: 그리드에 맞는 높이로 노출됩니다.
     • 높이 [직접 지정]: 이미지 컨테이너의 높이를 직접 지정할 수 있으며, 이미지 축소 시 최대 높이로 제한됩니다.
     • 모서리 둥글기: 이미지의 모서리를 둥글게 설정할 수 있습니다.
   • 스타일 이미지 채우기: 이미지를 그리드에 빈 공간 없이 가득 채웁니다.
     • 높이 고정: 고정된 높이 내에서 이미지를 채웁니다.
     • 원본 비율 유지: 원본 비율을 유지하며 가득 채웁니다.
       
       
   • 스타일 원형 이미지: 이미지의 원본 비율과 상관 없이 정원 형태로 표현됩니다.
     • 높이 [기본]: 그리드에 맞는 높이로 노출됩니다.
     • 높이 [직접 지정]: 최대 높이 범위 내에서 정원 형태로 표시됩니다.
       

       📌 tip.

       • 이미지의 최대 너비는 (공통 디자인 설정 > 본문 폭) - (그리드 간격 × 2)입니다.
       • 이를 초과하는 크기의 이미지는 자동으로 축소되어 원본 비율을 유지하며 표시됩니다.
       • 그리드를 무시하고 높이를 자유롭게 설정하고 싶다면, 해당 이미지 위젯이 포함된 섹션을 [가로 영역 확장]으로 설정하세요.
3. 효과:
   • 흑백 이미지: 이미지를 흑백으로 표시합니다.
   • 선명하게: 이미지를 보다 선명하게 보여줍니다. 단, 이미지 종류에 따라 왜곡될 수 있어 주의가 필요합니다.
   • 음영: 이미지 위에 적용할 색상을 설정합니다.
     
     
4. 설명: 이미지 아래에 텍스트 설명을 추가하거나 이미지 위에 겹쳐서 표시할 수 있습니다.
   
   
5. SEO용 이미지 대체 텍스트: 텍스트로 표현되지 않는 이미지 정보를 시각장애인이나 검색 엔진이 인식할 수 있도록 텍스트 형태로 제공할 수 있습니다. SEO 최적화에 도움이 됩니다.
   
   
6. 클릭 시 동작:
   • 팝업으로 이미지 확대: 이미지를 클릭하면 큰 이미지로 확대되어 보여집니다.
   • 링크: 클릭 시 설정한 링크로 이동합니다.
   • 그 외 전화 걸기, 문자 발송, 이메일 발송, 파일 다운로드, 동영상, 소셜 공유, 말풍선, 코드 실행, 최신상품 연결 등의 동작이 가능합니다.

기본 이미지와 롤오버 이미지

롤오버 이미지란 마우스 커서가 이미지에 올라갔을 때 발동되는 효과 또는 이미지 전환을 말합니다.
롤오버 이미지 설정이 비어있으면 마우스를 올려도 변화가 생기지 않습니다.
예를 들어 롤오버 이미지 항목에서 '흑백 이미지'를 체크하게 되면 마우스를 올렸을 때 흑백 이미지로 표현됩니다.

관련 도움말

• 페이지에 이미지 추가하기