디자인 모드는 PC버전을 제작하는 중 자동으로 모바일 버전도 구성됩니다. 이 과정에서 여러 연관된 위젯들을 적절하게 콘텐츠 단위로 묶어 배치하지 않는 경우, 모바일에서 알맞지 않은 모양 및 순서로 표시될 수 있습니다.
다음 그림은 디자인 모드에서 이미지 위젯과 텍스트 위젯을 사용해 제작한 페이지로 일견 문제가 없어 보입니다.
그러나 뷰포트를 모바일로 전환하면 다음처럼 순서에 맞지 않게 표시되는 걸 확인할 수 있습니다.
그 이유는 PC 뷰포트에서 위젯들을 다음 그림처럼 한 줄로 배치했기 때문입니다. 한 줄에 배치한 위젯들은 그리드 시스템에 따라 모바일 화면의 부족한 너비에 자동으로 반응하여 한줄 씩 내려가게 됩니다.
이에 따라 사용자는 PC 뷰포트에서 위젯 배치 시 다음 그림처럼 연관된 위젯들을 하나로 묶어 배치해야 합니다.참고: 연관 위젯들을 하나로 묶어 배치하는 방법은 아래 튜토리얼 7번 애니메이션을 참조해주세요.
이처럼 묶어 배치한 위젯들은 모바일 뷰포트 전환 시 다음처럼 묶음 단위로 한줄 씩 본문폭에 맞춰 나열됩니다.
다음은 PC 뷰포트에서 배치한 위젯들을 모바일에서 정상적으로 표시되도록 배치하는 방법에 대해 튜토리얼 형식으로 설명합니다.
세 개 칼럼으로 나눠진 위젯들이 모바일에서 적절하게 표시되려면 다음 그림처럼 기준이 되는 위젯의 위 또는 아래에 배치해야 합니다.
남은 이미지 위젯도 같은 방법으로 한 줄에 3개가 되도록 배치합니다. 그럼 다음 그림처럼 배치됩니다.
텍스트 위젯 하나를 마우스 클릭 후 드래그하여, 가장 왼쪽 아이콘 위젯 바로 아래로 이동시킵니다.참고: 텍스트 위젯이 아이콘 위젯 바로 아래 위치하는 경우 다음 그림처럼 텍스트 위젯 너비만큼 검정색 선이 표시됩니다. 이 때 마우스를 놓아주세요.
같은 방법으로 남은 2개의 텍스트 위젯들도, 아이콘 위젯 바로 아래 하나씩 배치합니다. 다음 애니메이션을 참조해 배치해보세요.
각 이미지 위젯의 설정을 열어 이미지를 추가합니다.참고: 이미지 크기는 각 이미지 위젯 설정에서, 높이를 똑같은 크기로 입력하므로서 모든 이미지가 같은 크기로 표시되도록 설정할 수 있습니다.
저작권이 자유로운 수십 개의 글꼴(서체)을 제공합니다. 제작하시는 사이트 디자인 콘셉트에 따라 적절한 글꼴을 선택해 적용해보세요.
본문 단락과 제목 단락에 적용할 글꼴을 선택합니다.
텍스트 위젯을 추가합니다. 이미 추가된 경우 건너뜁니다.
텍스트 편집도구에서 단락 아이콘을 클릭합니다.
제목(Heading) 또는 표준(Body) 중 하나를 선택합니다.
왼쪽 상단 검색 필드에 원하는 글꼴명을 영문으로 입력하고 Enter를 클릭해 검색합니다.참고: 아래 그림처럼 언어를 Korean 으로 선택하시면 검색이 더욱 빠릅니다.
브라우저 오른쪽 하단 펼침메뉴를 클릭합니다.
선택하신 웹 폰트 정보가 다음처럼 나타납니다.
다음 코드를 복사해 Header Code 란에 붙여넣습니다.
<style> body { font-family: 'Sunflower'!important; } </style>
관리자 메뉴 왼쪽 상단 미리보기 아이콘을 클릭해 구글 웹 폰트가 정상적으로 적용됐는지 확인합니다.
반응형 웹 제작 솔루션이기 때문에 PC/태블릿/모바일 기기 해상도에 따라 이미지 크기가 달라집니다. 따라서 명확한 이미지 크기를 명시해 드리기에 어려움이 있습니다.
다만, 디자인 모드의 그리드 기준에 따른 근접한 크기를 안내해 드릴 수는 있습니다. 아래 내용을 참조하여 적절한 크기를 찾아 보시길 바랍니다.
위젯이 차지하는 그리드 수를 변경할 수 있습니다. 이 그리드 수를 변경함에 따라 위젯의 크기는 작아지거나 커질 수 있습니다. 예를 들어 게시판 위젯이 4칸의 그리드를 차지하는 경우 너무 작을 수 있기에, 그리드 수를 늘릴 필요가 있습니다.
디자인 모드 왼쪽 상단 를 클릭합니다.
페이지의 위젯과 위젯 사이 마우스 포인터를 올리면 다음 그림처럼 위젯 추가 버튼이 생겨나면 클릭합니다.참고: 일반적으로 페이지 내 위젯이 이미 삽입된 경우 빠른 배치를 위해 사용합니다.
사이트 제작 중 변경사항을 브라우저에서 미리 보려면 미리보기 기능을 활용해보세요.
미리보기 창을 켜서 지금까지 작업한 사항들을 언제든 미리 볼 수 있습니다.
참고: 미리보기에서 보이는 사이트는 관리자만 볼 수 있습니다.
실제 방문자들이 변경된 작업사항을 볼 수 있도록 하려면 사이트를 게시해야 합니다.
실제 방문자들이 작업사항을 볼 수 있도록 웹에 반영하려면 사이트를 게시해야 합니다.
디자인 모드에서 작업한 사항들을 실제 방문자들이 볼 수 있도록 웹에 반영하려면 사이트를 게시해야 합니다.
디자인 모드 오른쪽 상단 게시하기 버튼을 클릭합니다.
사이트 디자인을 마지막 게시한 시점으로 되돌릴 수 있습니다. 사이트 게시 후 디자인 작업을 계속하다 마음에 들지 않거나, 더는 수정이 어렵다고 판단되는 경우 사용할 수 있습니다.
단, 한 번 디자인을 되돌리면 다시 현재 시점으로 되돌릴 수 없으니 주의가 필요합니다.
주의: 이 기능은 한 번 사용하면 다시는 현재 시점으로 디자인을 되돌릴 수 없습니다. 이용 전 반드시 마지막 게시한 시점을 확인하고 진행하세요.
사이트 디자인을 마지막 게시한 시점으로 되돌릴 수 있습니다.
디자인 모드 왼쪽 상단 아이콘을 클릭합니다. (진행 전 마지막 복구시점을 확인하세요.)
경고창이 나타나면 확인을 클릭합니다.주의: 다시 한 번 마지막 게시 시점을 다시 한 번 확인해 주세요. 한 번 되돌리면 다시 되돌릴 수 없습니다.
디자인 모드는 PC버전을 제작하는 중 자동으로 모바일 버전도 구성됩니다. 이 과정에서 여러 연관된 위젯들을 적절하게 콘텐츠 단위로 묶어 배치하지 않는 경우, 모바일에서 알맞지 않은 모양 및 순서로 표시될 수 있습니다.
다음 그림은 디자인 모드에서 이미지 위젯과 텍스트 위젯을 사용해 제작한 페이지로 일견 문제가 없어 보입니다.
그러나 뷰포트를 모바일로 전환하면 다음처럼 순서에 맞지 않게 표시되는 걸 확인할 수 있습니다.
그 이유는 PC 뷰포트에서 위젯들을 다음 그림처럼 한 줄로 배치했기 때문입니다. 한 줄에 배치한 위젯들은 그리드 시스템에 따라 모바일 화면의 부족한 너비에 자동으로 반응하여 한줄 씩 내려가게 됩니다.
이에 따라 사용자는 PC 뷰포트에서 위젯 배치 시 다음 그림처럼 연관된 위젯들을 하나로 묶어 배치해야 합니다.
참고: 연관 위젯들을 하나로 묶어 배치하는 방법은 아래 튜토리얼 7번 애니메이션을 참조해주세요.
이처럼 묶어 배치한 위젯들은 모바일 뷰포트 전환 시 다음처럼 묶음 단위로 한줄 씩 본문폭에 맞춰 나열됩니다.
다음은 PC 뷰포트에서 배치한 위젯들을 모바일에서 정상적으로 표시되도록 배치하는 방법에 대해 튜토리얼 형식으로 설명합니다.
배치방법 예제 따라하기
세 개 칼럼으로 나눠진 위젯들이 모바일에서 적절하게 표시되려면 다음 그림처럼 기준이 되는 위젯의 위 또는 아래에 배치해야 합니다.
남은 이미지 위젯도 같은 방법으로 한 줄에 3개가 되도록 배치합니다. 그럼 다음 그림처럼 배치됩니다.
텍스트 위젯 하나를 마우스 클릭 후 드래그하여, 가장 왼쪽 아이콘 위젯 바로 아래로 이동시킵니다.
참고: 텍스트 위젯이 아이콘 위젯 바로 아래 위치하는 경우 다음 그림처럼 텍스트 위젯 너비만큼 검정색 선이 표시됩니다. 이 때 마우스를 놓아주세요.
같은 방법으로 남은 2개의 텍스트 위젯들도, 아이콘 위젯 바로 아래 하나씩 배치합니다. 다음 애니메이션을 참조해 배치해보세요.
각 이미지 위젯의 설정을 열어 이미지를 추가합니다.
참고: 이미지 크기는 각 이미지 위젯 설정에서, 높이를 똑같은 크기로 입력하므로서 모든 이미지가 같은 크기로 표시되도록 설정할 수 있습니다.
저작권이 자유로운 수십 개의 글꼴(서체)을 제공합니다. 제작하시는 사이트 디자인 콘셉트에 따라 적절한 글꼴을 선택해 적용해보세요.
변경방법
1단계: 공통 디자인 설정 메뉴 켜기
2단계: 글꼴 변경하기
본문 단락과 제목 단락에 적용할 글꼴을 선택합니다.
3단계: 글꼴 적용하기
텍스트 위젯을 추가합니다. 이미 추가된 경우 건너뜁니다.
텍스트 편집도구에서 단락 아이콘을 클릭합니다.
제목(Heading) 또는 표준(Body) 중 하나를 선택합니다.
Google Fonts 적용방법
1단계: Google Fonts에서 글꼴 찾기
왼쪽 상단 검색 필드에 원하는 글꼴명을 영문으로 입력하고 Enter를 클릭해 검색합니다.
참고: 아래 그림처럼 언어를 Korean 으로 선택하시면 검색이 더욱 빠릅니다.
브라우저 오른쪽 하단 펼침메뉴를 클릭합니다.
선택하신 웹 폰트 정보가 다음처럼 나타납니다.
2단계: 사이트에 적용하기
다음 코드를 복사해 Header Code 란에 붙여넣습니다.
주의: 위 예시처럼 반드시 따옴표(' ') 사이의 글꼴명만 변경하고, 끝은 반드시 !important; 로 끝나야 합니다.
3단계: 적용된 글꼴 확인하기
관리자 메뉴 왼쪽 상단 미리보기 아이콘을 클릭해 구글 웹 폰트가 정상적으로 적용됐는지 확인합니다.
반응형 웹 제작 솔루션이기 때문에 PC/태블릿/모바일 기기 해상도에 따라 이미지 크기가 달라집니다. 따라서 명확한 이미지 크기를 명시해 드리기에 어려움이 있습니다.
다만, 디자인 모드의 그리드 기준에 따른 근접한 크기를 안내해 드릴 수는 있습니다. 아래 내용을 참조하여 적절한 크기를 찾아 보시길 바랍니다.
참고 크기
위젯이 차지하는 그리드 수를 변경할 수 있습니다. 이 그리드 수를 변경함에 따라 위젯의 크기는 작아지거나 커질 수 있습니다. 예를 들어 게시판 위젯이 4칸의 그리드를 차지하는 경우 너무 작을 수 있기에, 그리드 수를 늘릴 필요가 있습니다.
조절방법
참고: 위 그림에서는 이미지 위젯 3개가 사용되었습니다.
위젯 추가방법
방법1: 기본 위젯 삽입하기
디자인 모드 왼쪽 상단
를 클릭합니다.
방법2: 특정 위치에 위젯 삽입하기
페이지의 위젯과 위젯 사이 마우스 포인터를 올리면 다음 그림처럼 위젯 추가 버튼이 생겨나면 클릭합니다.
참고: 일반적으로 페이지 내 위젯이 이미 삽입된 경우 빠른 배치를 위해 사용합니다.
미리보기
사이트 제작 중 변경사항을 브라우저에서 미리 보려면 미리보기 기능을 활용해보세요.
미리보기 창을 켜서 지금까지 작업한 사항들을 언제든 미리 볼 수 있습니다.
참고: 미리보기에서 보이는 사이트는 관리자만 볼 수 있습니다.
설정방법
관련 도움말
실제 방문자들이 변경된 작업사항을 볼 수 있도록 하려면 사이트를 게시해야 합니다.
게시하기
실제 방문자들이 작업사항을 볼 수 있도록 웹에 반영하려면 사이트를 게시해야 합니다.
디자인 모드에서 작업한 사항들을 실제 방문자들이 볼 수 있도록 웹에 반영하려면 사이트를 게시해야 합니다.
게시방법
디자인 모드 오른쪽 상단 게시하기 버튼을 클릭합니다.
주의사항
마지막 게시 시점으로 되돌리기
사이트 디자인을 마지막 게시한 시점으로 되돌릴 수 있습니다. 사이트 게시 후 디자인 작업을 계속하다 마음에 들지 않거나, 더는 수정이 어렵다고 판단되는 경우 사용할 수 있습니다.
단, 한 번 디자인을 되돌리면 다시 현재 시점으로 되돌릴 수 없으니 주의가 필요합니다.
주의: 이 기능은 한 번 사용하면 다시는 현재 시점으로 디자인을 되돌릴 수 없습니다. 이용 전 반드시 마지막 게시한 시점을 확인하고 진행하세요.
사이트 디자인을 마지막 게시한 시점으로 되돌릴 수 있습니다.
사용방법
디자인 모드 왼쪽 상단
아이콘을 클릭합니다. (진행 전 마지막 복구시점을 확인하세요.)
경고창이 나타나면 확인을 클릭합니다.
주의: 다시 한 번 마지막 게시 시점을 다시 한 번 확인해 주세요. 한 번 되돌리면 다시 되돌릴 수 없습니다.