솔루션 꿀팁&길라잡이

위젯별 기능 설명 (디자인 요소)

탈퇴한 회원
조회수 1955

이미지 위젯

텍스트 위젯과 더불어 가장 자주 쓰이는 위젯 중 하나입니다. 페이지에 이미지 요소를 삽입하고자 할 때 사용합니다.

설정항목

  • 이미지 추가하기 : 왼쪽 상단 이미지 영역에 마우스 커서를 올려놓으면 이미지를 업로드 하거나 아임웹이 제공하는 무료 이미지를 선택할 수 있습니다.
  • 이미지 채우기 : 이미지를 그리드에 빈 공간 없이 가득 채우게 됩니다. 이 옵션이 해제되면 허용된 그리드 공간 내에서 이미지를 잘림 없이 표현합니다.
  • 라이트박스 :  이미지를 누르면 주변이 어두워지면서 큰 이미지로 확대하여 보여줍니다. 이미지 링크와 함께 사용할 경우 이 옵션이 무시됩니다.
  • 원형 이미지 : 이미지를 원형으로 만듭니다. 이미지의 원본 비율과 상관 없이 정원 형태로 만듭니다.
  • 흑백 이미지 : 이미지를 흑백으로 만듭니다.
  • 선명하게 : 이미지가 좀 더 선명하게 보입니다.  이미지 유형에 따라 부적절하게 보일 수 있으니 주의해야 합니다.
  • 높이/높이고정 : 이미지의 높이를 지정합니다. 높이고정이 활성화 되면 기기에 상관 없이 지정된 높이로 표현됩니다.
  • 설명 : 이미지와 함께 출력할 텍스트를 삽입합니다. 이미지 아래에 표시하거나 겹쳐서 표시할 수도 있습니다.
  • 음영 : 이미지 위에 입힐 색상을 지정할 수 있습니다.
  • 링크 : 이미지를 클릭하면 이동하는 메뉴의 링크를 설정할 수 있습니다.


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


이미지맵 위젯

하나의 이미지에 여러 링크 영역을 구현하고자 할 때 사용합니다.

사용방법

1단계, 이미지 맵으로 사용할 이미지를 업로드 합니다.
2단계, 이미지 맵 링크의 추가 버튼을 눌러 링크 영역을 추가하고 이동될 경로를 지정합니다.
3단계, 이미지에서 링크 영역을 적절한 크기로 배치합니다.
4단계, 이미지 맵 링크는 여러번 추가할 수 있습니다.


텍스트 위젯

텍스트 콘텐츠를 페이지에 삽입할 때 사용합니다. 더블-클릭하여 편집모드로 진입할 수 있으며 자유롭게 텍스트를 작성할 수 있습니다.

: 단락 구분(Enter) 외에도 줄바꾸기(Shift+Enter)를 통해 다음 줄에 붙여서 작성할 수 있습니다.

텍스트 위젯은 다른 위젯과 마찬가지로 마우스 오른쪽 버튼을 눌러 설정 창에 진입이 가능합니다. 

이곳에서는 텍스트 위젯의 전체적인 배경색, 간격, 테두리 등을 설정할 수 있습니다.


여백 위젯

여백 위젯은 디자인 모드에서만 흐린 점선으로 표시되며 실제로는 공간만 차지할 뿐 다른 방문자에게는 보이지 않습니다.


아임웹의 그리드 시스템 특성상 여백 위젯은 원하는 크기 조정이나 배치를 위해 필요합니다. 예를 들어 이미지 위젯을 본문폭의 절반 만큼만 표현하고 가운데로 배치하고자 할 때 여백 위젯을 이미지 위젯의 양 옆에 배치함으로써 표현이 가능합니다.

여백 위젯은 특별한 추가 설정이 없으며 폭과 높이 조정만 가능합니다. PC에서 추가된 12그리드 크기(본문 가로폭을 가득 채우는 크기)의 여백은 1/2 높이로 자동 변환되어 모바일에서 표현되며, 그렇지 않은여백은 자동으로 숨겨집니다.


동영상 위젯

페이지에 동영상을 간편하게 삽입할 수 있습니다. 유튜브(YouTube) 또는 비메오(Vimeo)에 업로드한 동영상 주소(URL)를 입력하기만 하면 자동으로 삽입됩니다.

설정항목

  • 커버 이미지 : 기본적으로 유튜브 또는 비메오에 설정된 대표 이미지를 가져오지만, 커버 이미지를 업로드하면 해당 커버 이미지가 적용됩니다.
  • 라이트 박스 : 동영상 재생 버튼을 누르면 주변부가 어두워지며 큰 화면으로 영상이 재생됩니다.
  • 반복 재생 : 동영상 재생이 끝나도 다시 처음부터 재생합니다.


가로선 위젯

문단이나 콘텐츠 묶음 사이를 명확하게 구분하기를 원할 때 가로선 위젯을 사용합니다. 가로선 위젯은 매우 단순한 구조를 가지고 있으며 길이, 정렬, 두께, 선모양, 선색을 설정할 수 있습니다.



버튼 위젯

페이지에 버튼 위젯을 삽입하여 특정한 위치로 유도할 수 있습니다.

여러 버튼을 한 번에 추가할 수 있으며, 각각의 버튼을 다른 스타일로 설정할 수도 있습니다.


메뉴 리스트 위젯

메이크디에서는 상단에서 풀다운 형태로 서브메뉴들을 표시하지만, 본문 영역에 서브 메뉴를표시하고자 할 때 사용합니다. 메뉴 리스트 위젯을 추가한 이후 메뉴가 수정, 삭제, 이동된 사항들을 자동으로 반영해 줍니다.

참고 : 메뉴 리스트 위젯은 모바일에서 자동 숨김 처리 됩니다. 따라서 모바일에서도 표시되게 하려면, '모바일에서 표시' 옵션을 체크해주셔야 합니다.


설정항목

  • 다른 스타일 : 위젯 설정창 중앙부에 있는 다른 스타일 버튼을 눌러 메뉴 리스트 위젯의 스타일을 선택할 수 있습니다.
  • 기준 위치 : 기본값은 현재메뉴이며 원하는대로 서브메뉴가 표시되지 않으면 기준 위치를 적절하게 변경합니다.
  • 메뉴, 텍스트, 정렬 : 선택한 스타일의 세부 디자인 요소(각종 색상, 텍스트 크기 등)를 설정합니다.


타이틀 위젯

현재 위치한 메뉴명을 출력해 줍니다. 일반적으로는 잘 사용하지 않지만 섹션 설정에서 사이드 영역의 상단에 타이틀 위젯을 배치하면 매번 페이지 제목을 입력하지 않아도 되므로 편리합니다. 단, 타이틀 위젯이 관련 모든 페이지에 자동으로 삽입되는 것은 아니기 때문에 각 페이지마다 타이틀 위젯을 복사해 붙여넣으셔야 합니다.


단일 지도 위젯

하나의 위치정보를 사용자에게 알려주고자 할 때 사용합니다. 주로 "찾아오시는 길" 또는 Contact 메뉴 등에서 많이 활용합니다.

설정항목

  • 주소 : 주소의 전체 또는 일부만 입력하고 엔터(Enter)를 누르면 검색된 주소 목록이 표시됩니다. 예를 들어 '연희동 413-16'을 입력한 후 엔터를 누르면 아래에 주소 목록이 표시되고, 이를 누르면 위치 정보가 반영됩니다. 건물 층수나 호수 등 추가 주소 정보는 상세 주소 항목에 입력합니다.
  • 지도 핀 이동 : 주소를 입력하면 자동으로 해당 주소의 위치로 지도가 이동되며 핀이 생성됩니다. 핀의 위치를 변경하려면 지도에서 해당 위치에 더블클릭하고 적용 버튼을 누릅니다.
  • 정보 : 핀에 말풍선으로 표시될 정보를 입력합니다.


코드 위젯

코드 위젯은 고급 사용자를 위한 기능입니다. 외부 모듈 및 사용자 정의 스타일시트 및 스크립트 등을 내 사이트에 삽입하고 싶은 경우 사용할 수 있습니다. 코드 위젯에는 클라이언트 사이드에서 동작하는 모든 요소(HTML, CSS, JavaScript 등)를 삽입할수 있습니다.

*단, 서버 사이드에서 사용하는 언어(JSP, PHP 등) 및 데이터베이스(MySQL,MariaDB, MS-SQL 등)는 사용할 수 없습니다.

주의사항

  • 코드 위젯은 다른 위젯과 달리 확인 버튼을 눌러야 저장됩니다.
  • 디자인 모드의 오동작을 방지하기 위해 코드 위젯은 미리보기에서만 실행됩니다.


아이콘 위젯

아이콘 위젯은 그래픽툴이나 이미지를 사용하지 않고 폰트 아이콘을 이용해 사이트에 아이콘을 삽입할 수 있게 해줍니다. 수백가지의 아이콘을 삽입할 수 있으며, 자유롭게 크기와 색상을 조정할 수 있습니다.

메이크디는 당신과 함께할 준비가 되었습니다.
홈페이지제작 ! 어렵지 않습니다. 

메이크디가 고객님의 든든한 파트너가

되어드리겠습니다.


메이크디는 당신과 함께할 준비가 되었습니다.

홈페이지제작 ! 어렵지 않습니다. 

메이크디가 고객님의 든든한 파트너가 되어드리겠습니다.



최고의 파트너


메이크디와 파트너쉽을 맺은 고객사에

끊임없는 유지보수와 서버관리, 개발을 

하여 처음부터 끝까지

정성을 다하여 함께합니다.

솔루션 제공서비스


코딩을 몰라도, 포토샵을 몰라도!

클릭과 드래그만으로 

손쉽게 디자인을 

수정할수 있습니다.

실시간알림 서비스 앱


새로운 소식 및 정보가 있을때 

스마트폰으로 알림이 즉시 발송됩니다.

실시간으로 쌍방향소통이 가능하여 

스마트한 관리가 가능합니다.

자동업그레이드


메이크디의 솔루션은 지속적인 연구개발로

시스템의 오류를 처리하고, 앱환경에

최적화하기 위해 자동 업그레이드를 

지원합니다.

공식제휴사
Buisiness results