10. 요소 블럭 다루기
- 요소 블럭 살펴보기
- 요소 블럭 ID 확인하기
- 이미지 블럭 다루기
- 텍스트 블럭 다루기
- 구분선 블럭 다루기
- 동영상 블럭 다루기
- 동영상 주소 확인하기
- 소셜링크 블럭 다루기
- 표 블럭 다루기
- 지도 블럭 다루기
- 도형 블럭 다루기
- 아이콘 블럭 다루기
- 아이콘박스 블럭 다루기
- 버튼 블럭 다루기
- 여백 블럭 다루기
- 인용구 블럭 다루기
- 마우스오버 블럭 다루기
- 페이지경로 블럭 다루기
- 요소 코드 블럭 다루기
요소 블럭 살펴보기
요소 블럭이란 프레임 블럭안에 추가하여 사용할 수 있는 블럭입니다.
닷홈빌더는 이미지, 텍스트, 구분선, 동영상, 소셜링크, 표, 지도, 도형, 아이콘, 아이콘 박스, 버튼, 여백, 인용구, 마우스오버, 페이지 경로, 요소 코드, 아이콘 버튼, 더보기 등의 요소 블럭을 제공하고 있습니다.
요소 블럭의 자세한 종류는 아래 안내를 참고해 주시기 바랍니다.
https://docs.dothome.co.kr/books/10/page/b73ce
요소 블럭의 종류
| 요소 블럭명 | 설명 |
| 이미지 블럭 | 이미지를 넣을 수 있는 블럭입니다. |
| 텍스트 블럭 | 텍스트를 넣을 수 있는 블럭입니다. |
| 구분선 블럭 | 선, 점선, 지그재그 구분선을 사용할 수 있는 블럭입니다. |
| 동영상 블럭 | 유튜브, 비메오, 틱톡 동영상을 넣을 수 있는 블럭입니다. |
| 소셜 링크 블럭 | 페이스북, 인스타그램, 트위터 등 소셜 아이콘과 링크를 사용할 수 있는 블럭입니다. |
| 표 블럭 | 표를 편집할 수 있는 블럭입니다. |
| 지도 블럭 | 구글, 네이버, 다음 카카오 지도를 사용할 수 있는 블럭입니다. |
| 도형 블럭 | 원형, 사각형 등 도형 안에 텍스트를 입력할 수 있는 블럭입니다. |
| 아이콘 블럭 | 아이콘을 넣을 수 있는 블럭입니다. |
| 아이콘 박스 블럭 | 아이콘과 텍스트를 편집할 수 있는 블럭입니다. |
| 버튼 블럭 | 버튼을 넣을 수 있는 블럭입니다. |
| 인용구 블럭 | 말풍선, 따옴표 등 인용구를 편집할 수 있는 블럭입니다. |
| 여백 블럭 | 빈 여백을 설정할 수 있는 블럭입니다. |
| 마우스오버 블럭 | 블럭 위에 마우스를 올리면 다른 내용을 보여주는 블럭입니다. |
| 페이지 경로 블럭 |
현재 페이지의 경로를 표시해주는 블럭입니다. |
| 요소 코드 블럭 | HTML, CSS, 스크립트 코드를 입력할 수 있는 코드 블럭입니다. |
| 아이콘 버튼 블럭 | 아이콘이 포함된 버튼 블럭입니다. |
| 더보기 블럭 | 더보기 디자인을 제공하는 블럭입니다. |
요소 블럭 편집하기
[요소 블럭 편집 버튼 화면]
요소 블럭 위에 마우스를 올리면 보이는 편집 버튼으로 요소를 수정할 수 있습니다.
위아래로 요소를 이동하거나 상세 설정, 복제, 삭제가 가능합니다.
요소 블럭 상세 설정 방법은 각 요소 블럭 다루기에서 확인 할 수 있습니다.
요소 블럭 ID 확인하기
일반 블럭과 마찬가지로 요소 블럭에도 ID 값이 부여되어 있습니다.
ID 값을 통해 앵커 설정, css, script 작성시 활용할 수 있습니다.
요소 블럭의 ID 값 역시 요소 블럭의 상세설정 창에서 확인이 가능합니다.
자세한 ID 확인 방법은 아래 안내를 참고해 주시기 바랍니다.
https://docs.dothome.co.kr/books/10/page/id
[요소 블럭 설정 버튼 화면]
요소 블럭 위에 마우스를 올려 블럭 상세 [설정(톱니바퀴)] 버튼을 눌러줍니다.
요소 블럭의 [설정(톱니바퀴)] 버튼은 좌측(보라색)에 있습니다.
[요소 블럭 상세설정 화면]
요소 블럭 상세 설정창 우측 하단에서 요소 블럭 ID를 확인하실 수 있습니다.
이 요소 블럭 ID를 활용하여 버튼 또는 메뉴 클릭시 해당 블럭 위치로 페이지를 이동시킬 수 있습니다.
이미지 블럭 다루기
이미지 요소 블럭은 프레임 안에 이미지를 추가할 수 있는 블럭입니다
[요소블럭 추가] - [이미지] 버튼으로 추가가 가능합니다.
자세한 내용은 아래 안내를 참고해 주시기 바랍니다.
https://docs.dothome.co.kr/books/10/page/efe93
[이미지 요소블럭 선택 화면]
프레임 박스 안에 있는 추가버튼을 누르면 요소 블럭 선택창이 열립니다.
이미지 블럭을 추가해 주세요.
[이미지 요소블럭 설정 버튼 화면]
추가된 이미지 블럭 위에 마우스를 올리면 좌측 상단에 블럭 편집 메뉴가 표시됩니다.
가운데에 있는 [설정(톱니 바퀴)]버튼을 클릭하여 상세 설정창을 열어줍니다.
[이미지 요소블럭 상세설정창 화면]
이미지 블럭의 상세 설정창은 내용, 레이아웃, 배경, 애니메이션 네개의 탭메뉴로 구성되어 있습니다.
각 설정 항목에 대해 알아보겠습니다.
[내용]
[이미지 요소블럭 상세설정 - 내용]
| 항목 | 설명 |
| 이미지 |
이미지 변경 버튼을 통해 이미지를 변경할 수 있습니다.
이미지는 파일 관리를 통해 업로드하신 이미지 중에서 선택하여 적용할 수 있습니다.
|
| 높이 |
이미지 높이를 설정합니다.
이미지 원본 비율 : 이미지 원본 사이즈로 나오도록 합니다. 원본 사이즈 크기가 본문 영역보다 클 경우 본문 영역에 맞춰서 보여집니다. 직접 입력 : 입력한 높이값대로 설정합니다. 이미지보다 직접 입력한 높이값이 더 클 경우 빈 공간은 여백으로 보여집니다. |
| 이미지 채우기 효과 | 이미지의 너비를 본문 영역에 채워서 보여줍니다. |
| 원형 이미지 효과 | 이미지를 원형으로 보여줍니다. |
| 링크 | 이미지를 클릭하면 입력한 URL로 이동하도록 링크를 설정할 수 있습니다. |
[레이아웃]
[이미지 요소블럭 상세설정 - 레이아웃]
| 항목 | 설명 |
| 좌우 여백 | 블럭의 좌우 여백을 설정합니다. |
| 상단 여백 | 블럭 상단의 여백을 설정합니다. |
| 하단 여백 | 블럭 하단의 여백을 설정합니다. |
| 정렬 | 이미지의 정렬을 설정합니다. |
[배경]
[이미지 요소블럭 상세설정 - 배경]
| 항목 | 설명 |
| 배경 | 블럭에 대한 배경을 설정합니다. |
| 테두리 | 블럭 테두리 종류, 두께, 색상 등을 설정합니다. |
[애니메이션]
[이미지 요소블럭 상세설정 - 애니메이션]
화면에 해당 요소 블럭이 위치한 영역이 보일 때 동작하는 애니메이션을 설정합니다.
| 항목 |
설명 |
| 효과 |
애니메이션 효과를 설정합니다.
|
| 방향 |
해당 블럭이 나오고 움직이는 방향을 설정합니다. |
| 지속 시간 | 애니메이션이 동작되는 시간을 설정합니다. |
| 지연 시간 | 요소 블럭이 위치한 영역이 화면에 표시되고 몇 초 뒤에 애니메이션이 동작할 지 설정합니다. |
텍스트 블럭 다루기
텍스트 블럭은 프레임 안에 텍스트를 추가할 수 있는 블럭입니다
[요소블럭 추가] - [텍스트] 버튼으로 추가가 가능합니다.
자세한 내용은 아래 안내를 참고해 주시기 바랍니다.
https://docs.dothome.co.kr/books/10/page/55a7c
[텍스트 요소블럭 선택 화면]
프레임 박스 안에 있는 추가버튼을 누르면 요소 블럭 선택창이 열립니다.
텍스트 블럭을 추가해 주세요.
● 텍스트 내용 편집하기
[텍스트 요소블럭 편집 화면]
텍스트 위를 클릭하면 하단에 텍스트 편집 메뉴가 나옵니다.
텍스트를 드래그하여 글꼴, 사이즈, 색상 등을 변경할 수 있습니다.
● 텍스트 블럭 상세 설정하기
[텍스트 요소블럭 설정 버튼 화면]
텍스트 블럭 위에 마우스를 올리면 좌측 상단에 블럭 편집 메뉴가 표시됩니다.
가운데에 있는 [설정(톱니 바퀴)]버튼을 클릭하여 상세 설정창을 열어줍니다.
[텍스트 요소블럭 상세설정창 화면]
텍스트 블럭의 상세 설정창은 레이아웃, 배경, 애니메이션 세 개의 탭메뉴로 구성되어 있습니다.
각 설정 항목에 대해 알아보겠습니다.
[레이아웃]
[텍스트 요소블럭 상세설정 - 레이아웃]
| 항목 | 설명 |
| 좌우 여백 | 블럭의 좌우 여백을 설정합니다. |
| 상단 여백 | 블럭 상단의 여백을 설정합니다. |
| 하단 여백 | 블럭 하단의 여백을 설정합니다. |
[배경]
[텍스트 요소블럭 상세설정 - 배경]
| 항목 | 설명 |
| 배경 | 블럭에 대한 배경을 설정합니다. |
| 테두리 | 블럭 테두리 종류, 두께, 색상 등을 설정합니다. |
[애니메이션]
[텍스트 요소블럭 상세설정 - 애니메이션]
화면에 해당 요소 블럭이 위치한 영역이 보일 때 동작하는 애니메이션을 설정합니다.
| 항목 |
설명 |
| 효과 |
애니메이션 효과를 설정합니다.
|
| 방향 |
해당 블럭이 나오고 움직이는 방향을 설정합니다. |
| 지속 시간 | 애니메이션이 동작되는 시간을 설정합니다. |
| 지연 시간 | 요소 블럭이 위치한 영역이 화면에 표시되고 몇 초 뒤에 애니메이션이 동작할 지 설정합니다. |
구분선 블럭 다루기
구분선 요소 블럭은 프레임 안에 구분선을 추가할 수 있는 블럭입니다
[요소블럭 추가] - [구분선] 버튼으로 추가가 가능합니다.
자세한 내용은 아래 안내를 참고해 주시기 바랍니다.
https://docs.dothome.co.kr/books/10/page/86139
[구분선 요소블럭 선택 화면]
프레임 박스 안에 있는 추가버튼을 누르면 요소 블럭 선택창이 열립니다.
구분선 블럭을 추가해 주세요.
[구분선 요소블럭 설정 버튼 화면]
구분선 블럭 위에 마우스를 올리면 좌측 상단에 블럭 편집 메뉴가 표시됩니다.
가운데에 있는 [설정(톱니 바퀴)] 버튼을 클릭하여 상세 설정창을 열어줍니다.
[구분선 요소블럭 상세설정창 화면]
구분선 블럭의 상세 설정창은 내용, 레이아웃, 배경, 애니메이션 네개의 탭메뉴로 구성되어 있습니다.
각 설정 항목에 대해 알아보겠습니다.
[내용]
[구분선 요소블럭 상세설정 - 내용]
| 항목 | 설명 |
| 색상 | 구분선의 색상을 설정합니다. |
| 길이 | 구분선의 가로 길이를 설정합니다. %와 px 단위로 설정할 수 있습니다. |
[레이아웃]
[구분선 요소블럭 상세설정 - 레이아웃]
| 항목 | 설명 |
| 좌우 여백 | 블럭의 좌우 여백을 설정합니다. |
| 상단 여백 | 블럭 상단의 여백을 설정합니다. |
| 하단 여백 | 블럭 하단의 여백을 설정합니다. |
| 정렬 | 구분선의 정렬을 설정합니다. |
[배경]
[구분선 요소블럭 상세설정 - 배경]
| 항목 | 설명 |
| 배경 | 블럭에 대한 배경을 설정합니다. |
| 테두리 | 블럭의 테두리 종류, 두께, 색상 등을 설정합니다. |
[애니메이션]
[구분선 요소블럭 상세설정 - 애니메이션]
화면에 해당 요소 블럭이 위치한 영역이 보일 때 동작하는 애니메이션을 설정합니다.
| 항목 |
설명 |
| 효과 |
애니메이션 효과를 설정합니다.
|
| 방향 |
해당 블럭이 나오고 움직이는 방향을 설정합니다. |
| 지속 시간 | 애니메이션이 동작되는 시간을 설정합니다. |
| 지연 시간 | 요소 블럭이 위치한 영역이 화면에 표시되고 몇 초 뒤에 애니메이션이 동작할 지 설정합니다. |
동영상 블럭 다루기
동영상 요소 블럭은 프레임 안에 동영상을 추가할 수 있는 블럭입니다
[요소블럭 추가] - [동영상] 버튼으로 추가가 가능합니다.
자세한 내용은 아래 안내를 참고해 주시기 바랍니다.
https://docs.dothome.co.kr/books/10/page/140f6
[동영상 요소블럭 선택 화면]
프레임 박스 안에 있는 추가버튼을 누르면 요소 블럭 선택창이 열립니다.
동영상 블럭을 추가해 주세요.
[동영상 요소블럭 설정 버튼 화면]
동영상 블럭 위에 마우스를 올리면 좌측 상단에 블럭 편집 메뉴가 표시됩니다.
가운데에 있는 [설정(톱니 바퀴)] 버튼을 클릭하여 상세 설정창을 열어줍니다.
[동영상 요소블럭 상세설정창 화면]
동영상 블럭의 상세 설정창은 내용, 레이아웃, 배경, 애니메이션 네개의 탭메뉴로 구성되어 있습니다.
각 설정 항목에 대해 알아보겠습니다.
[내용]
[동영상 요소블럭 상세설정 - 내용]
| 항목 | 설명 |
| 동영상 주소 |
유튜브, 비메오 중 선택한 뒤 동영상의 주소를 입력합니다.
|
| 재생 설정 |
자동 재생 : 재생 버튼을 클릭하지 않아도 페이지 진입시 자동으로 재생되도록 합니다. 반복 재생 : 동영상을 종료하지 않고 반복적으로 재생합니다. |
[레이아웃]
[동영상 요소블럭 상세설정 - 레이아웃]
| 항목 | 설명 |
| 좌우 여백 | 블럭의 좌우 여백을 설정합니다. |
| 상단 여백 | 블럭 상단의 여백을 설정합니다. |
| 하단 여백 | 블럭 하단의 여백을 설정합니다. |
[배경]
[동영상 요소블럭 상세설정 - 배경]
| 항목 | 설명 |
| 배경 | 블럭에 대한 배경을 설정합니다. |
| 테두리 | 블럭의 테두리 종류, 두께, 색상 등을 설정합니다. |
[애니메이션]
[동영상 요소블럭 상세설정 - 애니메이션]
화면에 해당 요소 블럭이 위치한 영역이 보일 때 동작하는 애니메이션을 설정합니다.
| 항목 |
설명 |
| 효과 |
애니메이션 효과를 설정합니다.
|
| 방향 |
해당 블럭이 나오고 움직이는 방향을 설정합니다. |
| 지속 시간 | 애니메이션이 동작되는 시간을 설정합니다. |
| 지연 시간 | 요소 블럭이 위치한 영역이 화면에 표시되고 몇 초 뒤에 애니메이션이 동작할 지 설정합니다. |
동영상 주소 확인하기
동영상 블럭에 넣을 동영상 주소를 유튜브와 비메오 동영상 플랫폼에서
확인하는 방법입니다.
동영상 블럭에 대해서는 <동영상 블럭 다루기> 에서 확인하실 수 있습니다.
자세한 내용은 아래 안내를 참고해 주시기 바랍니다.
https://docs.dothome.co.kr/books/10/page/6f492
● 유튜브 동영상 주소 확인하기
① 유튜브로 이동하여 동영상의 [공유] 버튼을 클릭합니다.
② 동영상 주소의 https://youtube.be/ 다음에 들어오는 동영상 코드를 복사하여 동영상 블럭의 주소 입력란에 입력해주세요
● 비메오 동영상 주소 확인하기
① 비메오로 이동하여 동영상의 [공유(종이 비행기)] 버튼을 클릭합니다.
② 동영상 주소의 https://vimeo.com/ 다음에 들어오는 동영상 코드를 복사하여 동영상 블럭의 주소 입력란에 입력해주세요
소셜링크 블럭 다루기
소셜링크 요소 블럭은 프레임 안에 소셜링크를 추가할 수 있는 블럭입니다
[요소블럭 추가] - [소셜링크] 버튼으로 추가가 가능합니다.
자세한 내용은 아래 안내를 참고해 주시기 바랍니다.
https://docs.dothome.co.kr/books/10/page/d2dde
[소셜링크 요소블럭 선택 화면]
프레임 박스 안에 있는 추가버튼을 누르면 요소 블럭 선택창이 열립니다.
이미지 블럭을 추가해 주세요.
[소셜링크 요소블럭 설정 버튼 화면]
소셜 링크 블럭 위에 마우스를 올리면 좌측 상단에 블럭 편집 메뉴가 표시됩니다.
가운데에 있는 [설정(톱니 바퀴)]버튼을 클릭하여 상세 설정창을 열어줍니다.
[소셜링크 요소블럭 상세설정창 화면]
소셜 링크 블럭의 상세 설정창은 내용, 레이아웃, 배경, 애니메이션 네개의 탭메뉴로 구성되어 있습니다.
각 설정 항목에 대해 알아보겠습니다.
[내용]
{소셜링크 요소블럭 상세설정 - 내용]
| 항목 | 설명 |
| 소셜 링크 |
소셜 링크를 추가, 수정, 삭제할 수 있습니다. 최대 10개까지 사용할 수 있습니다. |
| 아이콘 크기 | 소셜 아이콘의 크기를 설정할 수 있습니다. |
[레이아웃]
[소셜링크 요소블럭 상세설정 - 레이아웃]
| 항목 | 설명 |
| 좌우 여백 | 블럭의 좌우 여백을 설정합니다. |
| 상단 여백 | 블럭 상단의 여백을 설정합니다. |
| 하단 여백 | 블럭 하단의 여백을 설정합니다. |
| 정렬 | 소셜 링크 아이콘의 정렬을 설정합니다. |
[배경]
[소셜링크 요소블럭 상세설정 - 배경]
| 항목 | 설명 |
| 배경 | 블럭에 대한 배경을 설정합니다. |
| 테두리 | 블럭의 테두리 종류, 두께, 색상 등을 설정합니다. |
[애니메이션]
[소셜링크 요소블럭 상세설정 - 애니메이션]
화면에 해당 요소 블럭이 위치한 영역이 보일 때 동작하는 애니메이션을 설정합니다.
| 항목 |
설명 |
| 효과 |
애니메이션 효과를 설정합니다.
|
| 방향 |
해당 블럭이 나오고 움직이는 방향을 설정합니다. |
| 지속 시간 | 애니메이션이 동작되는 시간을 설정합니다. |
| 지연 시간 | 요소 블럭이 위치한 영역이 화면에 표시되고 몇 초 뒤에 애니메이션이 동작할 지 설정합니다. |
표 블럭 다루기
표 요소 블럭은 프레임 안에 표를 추가할 수 있는 블럭입니다
[요소블럭 추가] - [표] 버튼으로 추가가 가능합니다.
자세한 내용은 아래 안내를 참고해 주시기 바랍니다.
https://docs.dothome.co.kr/books/10/page/13fe9
[표 요소블럭 선택 화면]
프레임 박스 안에 있는 추가버튼을 누르면 요소 블럭 선택창이 열립니다.
표 블럭을 추가해 주세요.
● 표 내용 편집하기
[표 요소블럭 편집 화면]
표를 클릭하시면 표 편집메뉴가 나옵니다. 현재 클릭된 곳을 기준으로 행 또는 열을 추가하거나 삭제할 수 있습니다. 또한 텍스트 수정은 텍스트 블럭과 같이 텍스트 부분을 클릭하면 하단에 나오는 편집 메뉴로 수정할 수 있습니다.
표를 클릭하시면 표 편집메뉴가 나옵니다.
현재 클릭된 곳을 기준으로 행 또는 열을 추가하거나 삭제할 수 있습니다.
또한 텍스트 수정은 텍스트 블럭과 같이 텍스트 부분을 클릭하면 하단에 나오는 편집 메뉴로 수정할 수 있습니다.
● 표 블럭 상세 설정하기
[표 요소블럭 설정 버튼 화면]
표 블럭 위에 마우스를 올리면 좌측 상단에 블럭 편집 메뉴가 표시됩니다.
가운데에 있는 [설정(톱니 바퀴)]버튼을 클릭하여 상세 설정창을 열어줍니다.
[표 요소블럭 상세설정창 화면]
표 블럭의 상세 설정창은 내용, 레이아웃, 배경, 애니메이션 네 개의 탭메뉴로 구성되어 있습니다.
각 설정 항목에 대해 알아보겠습니다.
[내용]
[표 요소블럭 상세설정 - 내용]
| 항목 | 설명 |
| 디자인 변경 | 디자인 변경 창에서 원하는 표 디자인을 선택하여 적용할 수 있습니다. |
| 헤더 사용 | 표 제목줄 사용을 설정할 수 있습니다. |
| 본문 배경 색상 | 선택한 표 디자인에 따라 행 또는 열의 배경색을 설정할 수 있습니다. |
| 선 색상 | 표 구분선 색상을 설정할 수 있습니다. |
[레이아웃]
[표 요소블럭 상세설정 - 레이아웃]
| 항목 | 설명 |
| 좌우 여백 | 블럭의 좌우 여백을 설정합니다. |
| 상단 여백 | 블럭 상단의 여백을 설정합니다. |
| 하단 여백 | 블럭 하단의 여백을 설정합니다. |
| 정렬 | 텍스트의 정렬을 설정합니다. |
[배경]
[표 요소블럭 상세설정 - 배경]
| 항목 | 썰명 |
| 배경 | 블럭에 대한 배경을 설정합니다. |
| 테두리 | 블럭의 테두리 종류, 두께, 색상 등을 설정합니다. |
[애니메이션]
[표 요소블럭 상세설정 - 애니메이션]
화면에 해당 요소 블럭이 위치한 영역이 보일 때 동작하는 애니메이션을 설정합니다.
| 설명 |
항목 |
| 효과 |
애니메이션 효과를 설정합니다.
|
| 방향 |
해당 블럭이 나오고 움직이는 방향을 설정합니다. |
| 지속 시간 | 애니메이션이 동작되는 시간을 설정합니다. |
| 지연 시간 | 요소 블럭이 위치한 영역이 화면에 표시되고 몇 초 뒤에 애니메이션이 동작할 지 설정합니다. |
지도 블럭 다루기
지도 요소 블럭은 프레임 안에 지도를 추가할 수 있는 블럭입니다
[요소블럭 추가] - [지도] 버튼으로 추가가 가능합니다.
자세한 내용은 아래 안내를 참고해 주시기 바랍니다.
https://docs.dothome.co.kr/books/10/page/d947b
지도 블럭을 사용하기 위해서는 지도 API 등록이 필요합니다.
사용하려는 지도의 API를 먼저 등록해주세요.
[지도 요소블럭 선택 화면]
프레임 박스 안에 있는 추가 버튼을 누르면 요소 블럭 선택창이 열립니다.
지도 블럭을 추가해 주세요.
네이버, 카카오 지도 중 위에서 연동한 API의 지도를 추가해 주세요.
[지도 요소블럭 설정 버튼 화면]
지도 블럭 위에 마우스를 올리면 좌측 상단에 블럭 편집 메뉴가 표시됩니다.
가운데에 있는 [설정(톱니 바퀴)]버튼을 클릭하여 상세 설정창을 열어줍니다.
[지도 요소블럭 상세설정창 화면]
지도 블럭의 상세 설정창은 내용, 레이아웃, 배경, 애니메이션 네개의 탭메뉴로 구성되어 있습니다.
각 설정 항목에 대해 알아보겠습니다.
[내용]
[지도 요소블럭 상세설정 - 내용]
| 항목 | 설명 |
| 주소 변경 | [주소 변경하기] 버튼을 눌러 주소 변경창에서 주소를 검색하여 변경할 수 있습니다. |
| 높이 | 지도의 높이값을 설정할 수 있습니다. |
[레이아웃]
[지도 요소블럭 상세설정 - 레이아웃]
| 항목 | 설명 |
| 좌우 여백 | 블럭의 좌우 여백을 설정합니다. |
| 상단 여백 | 블럭 상단의 여백을 설정합니다. |
| 하단 여백 | 블럭 하단의 여백을 설정합니다. |
| 정렬 | 소셜 링크 아이콘의 정렬을 설정합니다. |
[배경]
[지도 요소블럭 상세설정 - 배경]
| 항목 | 설명 |
| 배경 | 블럭에 대한 배경을 설정합니다. |
| 테두리 | 블럭의 테두리 종류, 두께, 색상 등을 설정합니다. |
[애니메이션]
[지도 요소블럭 상세설정 - 애니메이션]
화면에 해당 요소 블럭이 위치한 영역이 보일 때 동작하는 애니메이션을 설정합니다.
| 항목 |
설명 |
| 효과 |
애니메이션 효과를 설정합니다.
|
| 방향 |
해당 블럭이 나오고 움직이는 방향을 설정합니다. |
| 지속 시간 | 애니메이션이 동작되는 시간을 설정합니다. |
| 지연 시간 | 요소 블럭이 위치한 영역이 화면에 표시되고 몇 초 뒤에 애니메이션이 동작할 지 설정합니다. |
도형 블럭 다루기
도형 요소 블럭은 프레임 안에 이미지를 추가할 수 있는 블럭입니다
[요소블럭 추가] - [도형] 버튼으로 추가가 가능합니다.
자세한 내용은 아래 안내를 참고해 주시기 바랍니다.
https://docs.dothome.co.kr/books/10/page/060ad
[도형 요소블럭 선택 화면]
프레임 박스 안에 있는 추가버튼을 누르면 요소 블럭 선택창이 열립니다.
도형을 눌러 원하는 도형 블럭을 추가해 주세요.
● 도형 블럭 텍스트 입력하기
[도형 요소블럭 택스트 입력 화면]
도형 안의 텍스트를 클릭하여 내용을 수정할 수 있습니다.
텍스트에 대한 색상 변경은 상세 설정창에서 할 수 있습니다.
● 도형 블럭 상세 설정하기
[도형 요소블럭 설정 버튼 화면]
도형 블럭 위에 마우스를 올리면 좌측 상단에 블럭 편집 메뉴가 표시됩니다.
가운데에 있는 [설정(톱니 바퀴)]버튼을 클릭하여 상세 설정창을 열어줍니다.
[도형 요소블럭 상세설정창 화면]
도형 블럭의 상세 설정창은 내용, 레이아웃, 배경, 애니메이션 네 개의 탭메뉴로 구성되어 있습니다.
각 설정 항목에 대해 알아보겠습니다.
[내용]
[도형 요소블럭 상세설정 - 내용]
| 항목 | 설명 |
| 도형색 | 도형의 색상을 설정합니다. |
| 글자색 | 도형 안에 있는 글자의 색상을 설정합니다. |
| 도형 크기 | 도형의 크기를 설정합니다. 프레임 박스 너비에 따라 도형의 최대크기가 달라질 수 있습니다. |
| 글자 크기 | 도형 안에 있는 글자의 크기를 설정합니다. |
[레이아웃]
[도형 요소블럭 상세설정 - 레이아웃]
| 항목 | 설명 |
| 좌우 여백 | 블럭의 좌우 여백을 설정합니다. |
| 상단 여백 | 블럭 상단의 여백을 설정합니다. |
| 하단 여백 | 블럭 하단의 여백을 설정합니다. |
| 정렬 | 도형, 텍스트의 정렬을 설정합니다. |
[배경]
[도형 요소블럭 상세설정 - 배경]
| 항목 | 설명 |
| 배경 | 블럭에 대한 배경을 설정합니다. |
| 테두리 | 블럭의 테두리 종류, 두께, 색상 등을 설정합니다. |
[애니메이션]
[도형 요소블럭 상세설정 - 애니메이션]
화면에 해당 요소 블럭이 위치한 영역이 보일 때 동작하는 애니메이션을 설정합니다.
| 항목 | 설명 |
| 효과 |
애니메이션 효과를 설정합니다.
|
| 방향 | 해당 블럭이 나오고 움직이는 방향을 설정합니다. |
| 지속 시간 | 애니메이션이 동작되는 시간을 설정합니다. |
| 지연 시간 |
요소 블럭이 위치한 영역이 화면에 표시되고 몇 초 뒤에 애니메이션이 동작할 지 설정합니다. |
아이콘 블럭 다루기
아이콘 블럭은 프레임 안에 아이콘을 추가할 수 있는 블럭입니다
[요소블럭 추가] - [아이콘] 버튼으로 추가가 가능합니다.
자세한 내용은 아래 안내를 참고해 주시기 바랍니다.
https://docs.dothome.co.kr/books/10/page/2f557
[아이콘 요소블럭 선택 화면]
아이콘 블럭을 추가해 주세요.
[텍스트 요소블럭 설정 버튼 화면]
아이콘 블럭 위에 마우스를 올리면 좌측 상단에 블럭 편집 메뉴가 표시됩니다.
가운데에 있는 [설정(톱니 바퀴)] 버튼을 클릭하여 상세 설정창을 열어줍니다.
[아이콘 요소블럭 상세설정창 화면]
아이콘블럭의 상세 설정창은 내용, 레이아웃, 배경, 애니메이션 네개의 탭메뉴로 구성되어 있습니다.
각 설정 항목에 대해 알아보겠습니다.
[내용]
[아이콘 요소블럭 상세설정 - 내용]
| 항목 | 설명 |
| 아이콘 | 아이콘을 변경할 수 있습니다. |
| 아이콘 배경 |
아이콘의 배경 디자인을 설정합니다.
|
| 아이콘 색상 | 아이콘 색상을 변경합니다. |
| 아이콘 크기 |
아이콘 크기를 변경합니다. |
| 링크 |
아이콘을 클릭하면 입력한 URL로 이동하도록 링크를 설정할 수 있습니다. |
[레이아웃]
[아이콘 요소블럭 상세설정 - 레이아웃]
| 항목 | 설명 |
| 좌우 여백 | 블럭의 좌우 여백을 설정합니다. |
| 상단 여백 | 블럭 상단의 여백을 설정합니다. |
| 하단 여백 | 블럭 하단의 여백을 설정합니다. |
| 정렬 | 아이콘의 정렬을 설정합니다. |
[배경]
[아이콘 요소블럭 상세설정 - 배경]
| 항목 | 설명 |
| 배경 | 블럭에 대한 배경을 설정합니다. |
| 테두리 | 블럭 테두리 종류, 두께, 색상 등을 설정합니다. |
[애니메이션]
[아이콘 요소블럭 상세설정 - 애니메이션]
화면에 해당 요소 블럭이 위치한 영역이 보일 때 동작하는 애니메이션을 설정합니다.
| 항목 |
설명 |
| 효과 |
애니메이션 효과를 설정합니다.
|
| 방향 |
해당 블럭이 나오고 움직이는 방향을 설정합니다. |
| 지속 시간 | 애니메이션이 동작되는 시간을 설정합니다. |
| 지연 시간 | 요소 블럭이 위치한 영역이 화면에 표시되고 몇 초 뒤에 애니메이션이 동작할 지 설정합니다. |
아이콘박스 블럭 다루기
아이콘박스 블럭은 프레임 안에 텍스트를 추가할 수 있는 블럭입니다
[요소블럭 추가] - [아이콘박스] 버튼으로 추가가 가능합니다.
자세한 내용은 아래 안내를 참고해 주시기 바랍니다.
https://docs.dothome.co.kr/books/10/page/06138
[아이콘박스 요소블럭 선택 화면]
프레임 박스 안에 있는 추가버튼을 누르면 요소 블럭 선택장이 열립니다.
아이콘박스 블럭을 추가해 주세요.
[아이콘박스 요소블럭 설정 버튼 화면]
아이콘박스 블럭 위에 마우스를 올리면 좌측 상단에 블럭 편집 메뉴가 표시됩니다.
가운데에 있는 [설정(톱니 바퀴)] 버튼을 클릭하여 상세 설정창을 열어줍니다.
[아이콘박스 요소블럭 상세설정창 화면]
아이콘박스 블럭의 상세 설정창은 내용, 레이아웃, 배경, 애니메이션 네개의 탭메뉴로 구성되어 있습니다.
각 설정 항목에 대해 알아보겠습니다.
[내용]
[아이콘박스 요소블럭 상세설정 - 내용]
| 항목 | 설명 |
| 아이콘 | 아이콘을 변경할 수 있습니다. |
| 아이콘 배경 |
아이콘의 배경 디자인을 설정합니다.
|
| 아이콘 색상 | 아이콘 색상을 변경합니다. |
| 아이콘 배경 색상 | 아이콘 배경의 색상을 변경합니다. |
| 아이콘 크기 | 아이콘 크기를 변경합니다. |
| 아이콘 위치 |
아이콘의 위치를 설정합니다.
|
| 수직 정렬 | 아이콘과 텍스트의 수직 정렬을 설정합니다. |
| 링크 | 아이콘을 클릭하면 입력한 URL로 이동하도록 링크를 설정할 수 있습니다. |
[레이아웃]
[아이콘박스 요소블럭 상세설정 - 레이아웃]
| 항목 | 설명 |
| 좌우 여백 | 블럭의 좌우 여백을 설정합니다. |
| 상단 여백 | 블럭 상단의 여백을 설정합니다. |
| 하단 여백 | 블럭 하단의 여백을 설정합니다. |
| 정렬 | 텍스트의 정렬을 설정합니다. |
[배경]
[아이콘박스 요소블럭 상세설정 - 배경]
| 항목 | 설명 |
| 배경 | 블럭에 대한 배경을 설정합니다. |
| 테두리 | 블럭 테두리 종류, 두께, 색상 등을 설정합니다. |
[애니메이션]
[아이콘박스 요소블럭 상세설정 - 애니메이션]
화면에 해당 요소 블럭이 위치한 영역이 보일 때 동작하는 애니메이션을 설정합니다.
| 항목 |
설명 |
| 효과 |
애니메이션 효과를 설정합니다.
|
| 방향 |
해당 블럭이 나오고 움직이는 방향을 설정합니다. |
| 지속 시간 | 애니메이션이 동작되는 시간을 설정합니다. |
| 지연 시간 | 요소 블럭이 위치한 영역이 화면에 표시되고 몇 초 뒤에 애니메이션이 동작할 지 설정합니다. |
버튼 블럭 다루기
버튼 블럭은 프레임 안에 버튼을 추가할 수 있는 블럭입니다
[요소블럭 추가] - [버튼] 으로 추가가 가능합니다.
자세한 내용은 아래 안내를 참고해 주시기 바랍니다.
https://docs.dothome.co.kr/books/10/page/8d5e9
[버튼 요소블럭 선택 화면]
프레임 박스 안에 있는 추가버튼을 누르면 요소 블럭 선택창이 열립니다.
버튼 블럭을 추가해 주세요.
[버튼 요소블럭 설정 버튼 화면]
버튼 블럭 위에 마우스를 올리면 좌측 상단에 블럭 편집 메뉴가 표시됩니다.
가운데에 있는 [설정(톱니 바퀴)]버튼을 클릭하여 상세 설정창을 열어줍니다.
[버튼 요소블럭 상세설정창 화면]
버튼 블럭의 상세 설정창은 내용, 레이아웃, 배경, 애니메이션 네개의 탭메뉴로 구성되어 있습니다.
각 설정 항목에 대해 알아보겠습니다.
[내용]
[버튼 요소블럭 상세설정 - 내용]
| 항목 | 설명 |
| 버튼 | 버튼을 추가, 수정, 삭제 하거나 순서를 변경할 수 있습니다. |
| 버튼 간격 | 버튼간의 간격을 설정합니다. |
[버튼 수정하기
[버튼 요소블럭 수정 화면]
버튼 목록에서 변경을 원하시는 배경이미지 우측의 설정 버튼을 눌러 설정메뉴를 열어줍니다.
수정 버튼을 누르면 버튼 수정창이 열립니다.
[버튼 요소블럭 수정하기 화면]
| 항목 | 설명 |
| 버튼 | 버튼의 텍스트와 링크 주소를 설정합니다. |
| 디자인 | 글자 크기, 테두리, 여백 등의 기본 디자인을 설정합니다. |
| 기본 색상 | 버튼 배경, 글자 등의 색상을 설정합니다. |
| 마우스오버 색상 | 버튼에 마우스 오버했을 때 변경될 색상을 설정합니다. |
각 항목을 입력한 뒤 적용하기를 눌러준뒤,
블럭 상세 설정창 하단의 적용하기 버튼을 눌러주어야 최종 적용됩니다.
[레이아웃]
[버튼 요소블럭 상세설정 - 레이아웃]
| 항목 | 설명 |
| 좌우 여백 | 블럭의 좌우 여백을 설정합니다. |
| 상단 여백 | 블럭 상단의 여백을 설정합니다. |
| 하단 여백 | 블럭 하단의 여백을 설정합니다. |
| 정렬 | 아이콘의 정렬을 설정합니다. |
[배경]
[버튼 요소블럭 상세설정 - 배경]
| 항목 | 설명 |
| 배경 | 블럭에 대한 배경을 설정합니다. |
| 테두리 | 블럭 테두리 종류, 두께, 색상 등을 설정합니다. |
[애니메이션]
[버튼 요소블럭 상세설정 - 애니메이션]
화면에 해당 요소 블럭이 위치한 영역이 보일 때 동작하는 애니메이션을 설정합니다.
| 항목 |
설명 |
| 효과 |
애니메이션 효과를 설정합니다.
|
| 방향 |
해당 블럭이 나오고 움직이는 방향을 설정합니다. |
| 지속 시간 | 애니메이션이 동작되는 시간을 설정합니다. |
| 지연 시간 | 요소 블럭이 위치한 영역이 화면에 표시되고 몇 초 뒤에 애니메이션이 동작할 지 설정합니다. |
여백 블럭 다루기
여백 요소 블럭은 프레임 안에 여백을 추가할 수 있는 블럭입니다
[요소블럭 추가] - [여백] 버튼으로 추가가 가능합니다.
자세한 내용은 아래 안내를 참고해 주시기 바랍니다.
https://docs.dothome.co.kr/books/10/page/6974c
[여백 요소블럭 선택 화면]
프레임 박스 안에 있는 추가버튼을 누르면 요소 블럭 선택창이 열립니다.
여백 블럭을 추가해 주세요.
[여백 요소블럭 설정 버튼 화면]
여백 블럭 위에 마우스를 올리면 좌측 상단에 블럭 편집 메뉴가 표시됩니다.
가운데에 있는 [설정(톱니 바퀴)] 버튼을 클릭하여 상세 설정창을 열어줍니다.
[여백 요소블럭 상세설정창 화면]
여백 블럭의 상세 설정창은 레이아웃, 배경, 애니메이션 세 개의 탭메뉴로 구성되어 있습니다.
각 설정 항목에 대해 알아보겠습니다.
[레이아웃]
[여백 요소블럭 상세설정 - 레이아웃]
| 항목 | 설명 |
| 상하 여백 | 블럭의 여백 크기를 설정합니다. |
[배경]
[여백 요소블럭 상세설정 - 레이아웃]
| 항목 | 설명 |
| 배경 | 블럭에 대한 배경을 설정합니다. |
| 테두리 | 블럭 테두리 종류, 두께, 색상 등을 설정합니다. |
[애니메이션]
[표 요소블럭 상세설정 - 애니메이션]
화면에 해당 요소 블럭이 위치한 영역이 보일 때 동작하는 애니메이션을 설정합니다.
| 항목 |
설명 |
| 효과 |
애니메이션 효과를 설정합니다.
|
| 방향 |
해당 블럭이 나오고 움직이는 방향을 설정합니다. |
| 지속 시간 | 애니메이션이 동작되는 시간을 설정합니다. |
| 지연 시간 |
요소 블럭이 위치한 영역이 화면에 표시되고 몇 초 뒤에 애니메이션이 동작할 지 설정합니다. |
인용구 블럭 다루기
인용구 요소 블럭은 프레임 안에 인용구를 추가할 수 있는 블럭입니다
[요소블럭 추가] - [인용구] 버튼으로 추가가 가능합니다.
자세한 내용은 아래 안내를 참고해 주시기 바랍니다.
https://docs.dothome.co.kr/books/10/page/6364d
[인용구 요소블럭 선택 화면]
프레임 박스 안에 있는 추가버튼을 누르면 요소 블럭 선택창이 열립니다.
인용구 블럭을 추가해 주세요.
[인용구 요소블럭 설정 버튼 화면]
인용구 블럭 위에 마우스를 올리면 좌측 상단에 블럭 편집 메뉴가 표시됩니다.
가운데에 있는 [설정(톱니 바퀴)] 버튼을 클릭하여 상세 설정창을 열어줍니다.
[인용구 요소블럭 상세설정창 화면]
인용구 블럭의 상세 설정창은 내용, 레이아웃, 배경, 애니메이션 네개의 탭메뉴로 구성되어 있습니다.
각 설정 항목에 대해 알아보겠습니다.
[내용]
[인용구 요소블럭 상세설정 - 내용]
| 항목 | 설명 |
| 색상 | 인용구 종류에 따라 배경 또는 선 등의 색상을 설정합니다. |
[레이아웃]
[인용구 요소블럭 상세설정 - 레이아웃]
| 항목 | 설명 |
| 좌우 여백 | 블럭의 좌우 여백을 설정합니다. |
| 상단 여백 | 블럭 상단의 여백을 설정합니다. |
| 하단 여백 | 블럭 하단의 여백을 설정합니다. |
| 정렬 | 인용구 안 텍스트의 정렬을 설정합니다. |
[배경]
[인용구 요소블럭 상세설정 - 배경]
| 항목 | `설명 |
| 배경 | 블럭에 대한 배경을 설정합니다. |
| 테두리 | 블럭 테두리 종류, 두께, 색상 등을 설정합니다. |
[애니메이션]
[인용구 요소블럭 상세설정 - 애니메이션]
화면에 해당 요소 블럭이 위치한 영역이 보일 때 동작하는 애니메이션을 설정합니다.
| 항목 |
설명 |
| 효과 |
애니메이션 효과를 설정합니다.
|
| 방향 |
해당 블럭이 나오고 움직이는 방향을 설정합니다. |
| 지속 시간 | 애니메이션이 동작되는 시간을 설정합니다. |
| 지연 시간 | 요소 블럭이 위치한 영역이 화면에 표시되고 몇 초 뒤에 애니메이션이 동작할 지 설정합니다. |
마우스오버 블럭 다루기
마우스오버 요소 블럭은 프레임 안에 마우스오버(Mouse Over)를 추가할 수 있는 블럭입니다
[요소블럭 추가] - [마우스오버] 버튼으로 추가가 가능합니다.
자세한 내용은 아래 안내를 참고해 주시기 바랍니다.
https://docs.dothome.co.kr/books/10/page/eb163
마우스오버블럭이란 ?
위와 같이 블럭 위에 마우스를 올렸을 때 다른 내용을 보여주는 블럭입니다.
[마우스오버 요소블럭 선택 화면]
프레임 박스 안에 있는 추가버튼을 누르면 요소 블럭 선택창이 열립니다.
마우스오버 블럭을 추가해 주세요.
● 기본, 마우스오버 전환하기
[마우스오버 전환 화면]
마우스오버 블럭은 기본과, 마우스오버로 나뉘어져 있습니다.
기본은 마우스를 올리지 않은 기본 상태일 때, 마우스오버는 마우스를 올렸을 때 각각의 화면들을 보여줄 수 있습니다.
마우스오버 블럭 위에 마우스를 올린 뒤, 좌측 상단에 뜨는 기본/마우스오버 탭을 클릭하여 전환할 수 있습니다.
● 마우스오버 블럭에 요소 블럭 추가하기
마우스오버 블럭은 안에 요소 블럭들을 자유롭게 추가할 수 있습니다.
추가된 요소 블럭들의 편집 방법은 보통의 요소 블럭들과 같으나, 설정 메뉴 위치의 차이가 있습니다.
[마우스오버 블럭안에 요소블럭 추가 화면]
위처럼 마우스오버 블럭 안에 있는 요소 블럭들의 설정 메뉴는 각 요소 블럭의 우측 상단에 초록색으로 표시됩니다.
설정메뉴 위치와 색상만 다를 뿐 설정 방법은 동일합니다.
마우스오버 블럭을 추가했을 때 기본적으로 세팅되어있는 요소 블럭은 아이콘 블럭과 텍스트 블럭입니다.
초록색 추가 버튼을 통해 원하는 위치에 원하는 요소 블럭을 추가할 수 있습니다.
(마우스오버 블럭 안에 지도와 마우스오버 블럭은 추가할 수 없으니 참고해 주세요.)
● 마우스오버 블럭 상세 설정하기
[마우스오버 요소블럭 설정 버튼 화면]
마우스오버 블럭 위에 마우스를 올리면 좌측 상단에 블럭 편집 메뉴가 표시됩니다.
가운데에 있는 [설정(톱니 바퀴)]버튼을 클릭하여 상세 설정창을 열어줍니다.
마우스오버 블럭의 상세 설정창은 내용, 레이아웃, 배경, 애니메이션 네 개의 탭메뉴로 구성되어 있습니다.
각 설정 항목에 대해 알아보겠습니다.
[내용]
[마우스오버 요소블럭 상세설정 - 내용]
| 항목 | 설명 |
| 효과 |
마우스오버했을 때의 전환 효과를 설정합니다. 하단의 미리보기를 통해 각 효과를 확인할 수 있습니다. |
[레이아웃]
[마우스오버 요소블럭 상세설정 - 레이아웃]
| 항목 | 설명 |
| 좌우 여백 | 블럭의 좌우 여백을 설정합니다. |
| 상단 여백 | 블럭 상단의 여백을 설정합니다. |
| 하단 여백 | 블럭 하단의 여백을 설정합니다. |
| 정렬 | 마우스 블럭 안 요소 블럭들의 정렬을 설정합니다. |
[배경]
[마우스오버 요소블럭 상세설정 - 배경]
| 항목 | `설정 |
| 기본 배경 | 기본 상태일 때의 배경을 설정합니다. |
| 마우스오버 활성화 배경 | 블럭 위에 마우스를 올렸을 때의 배경을 설정합니다. |
| 테두리 | 블럭의 테두리 종류, 두께, 색상 등을 설정합니다. |
[애니메이션]
[마우스오버 요소블럭 상세설정 - 애니메이션]
화면에 해당 요소 블럭이 위치한 영역이 보일 때 동작하는 애니메이션을 설정합니다.
| 항목 |
설정 |
| 효과 |
애니메이션 효과를 설정합니다.
|
| 방향 |
해당 블럭이 나오고 움직이는 방향을 설정합니다. |
| 지속 시간 | 애니메이션이 동작되는 시간을 설정합니다. |
| 지연 시간 | 요소 블럭이 위치한 영역이 화면에 표시되고 몇 초 뒤에 애니메이션이 동작할 지 설정합니다. |
페이지경로 블럭 다루기
페이지경로 요소 블럭은 프레임 안에 페이지 경로를 추가할 수 있는 블럭입니다
[요소블럭 추가] - [페이지 경로] 버튼으로 추가가 가능합니다.
자세한 내용은 아래 안내를 참고해 주시기 바랍니다.
https://docs.dothome.co.kr/books/10/page/01386
[페이지경로 요소블럭 선택 화면]
프레임 박스 안에 있는 추가버튼을 누르면 요소 블럭 선택창이 열립니다.
페이지 경로 블럭을 추가해 주세요.
[페이지경로 요소블럭 설정 버튼 화면]
페이지 경로 블럭 위에 마우스를 올리면 좌측 상단에 블럭 편집 메뉴가 표시됩니다.
가운데에 있는 [설정(톱니 바퀴)]버튼을 클릭하여 상세 설정창을 열어줍니다.
[페이지경로 요소블럭 상세설정창 화면]
페이지 경로 블럭의 상세 설정창은 내용, 레이아웃, 배경, 애니메이션 네개의 탭메뉴로 구성되어 있습니다.
각 설정 항목에 대해 알아보겠습니다.
[내용]
[페이지경로 요소블럭 상세설정 - 내용]
| 항목 | 설명 |
| 글꼴 | 글꼴을 설정합니다. |
| 글자 크기 | 글자 크기를 설정합니다. |
| 페이지 링크 | 홈 아이콘 또는 페이지명을 눌렀을 때 해당 페이지로의 이동 여부를 설정합니다. |
| 경로 색상 | 상위 경로의 글자 색상을 설정합니다. |
| 현재 페이지 색상 |
현재 페이지명의 글자 색상을 설정합니다. |
| 경로 업데이트 | 페이지 경로를 업데이트 합니다. 현재 페이지의 경로가 변경되었을 경우 업데이트 버튼을 눌러주세요. |
[레이아웃]
[페이지경로 요소블럭 상세설정 - 레이아웃]
| 항목 | 설명 |
| 좌우 여백 | 블럭의 좌우 여백을 설정합니다. |
| 상단 여백 | 블럭 상단의 여백을 설정합니다. |
| 하단 여백 | 블럭 하단의 여백을 설정합니다. |
| 정렬 | 정렬을 설정합니다. |
[배경]
[페이지경로 요소블럭 상세설정 - 배경]
| 항목 | 설명 |
| 배경 | 블럭에 대한 배경을 설정합니다. |
| 테두리 | 블럭 테두리 종류, 두께, 색상 등을 설정합니다. |
[애니메이션]
[페이지경로 요소블럭 상세설정 - 애니메이션]
화면에 해당 요소 블럭이 위치한 영역이 보일 때 동작하는 애니메이션을 설정합니다.
| 항목 |
설명 |
| 효과 |
애니메이션 효과를 설정합니다.
|
| 방향 |
해당 블럭이 나오고 움직이는 방향을 설정합니다. |
| 지속 시간 | 애니메이션이 동작되는 시간을 설정합니다. |
| 지연 시간 | 요소 블럭이 위치한 영역이 화면에 표시되고 몇 초 뒤에 애니메이션이 동작할 지 설정합니다. |
요소 코드 블럭 다루기
요소 코드 블럭은 프레임 안에 HTML, CSS, 스크립트 코드를 추가할 수 있는 블럭입니다
[요소블럭 추가] - [요소 코드] 버튼으로 추가가 가능합니다.
자세한 내용은 아래 안내를 참고해 주시기 바랍니다.
https://docs.dothome.co.kr/books/10/page/2b449
[요소코드 요소블럭 선택 화면]
프레임 박스 안에 있는 추가버튼을 누르면 요소 블럭 선택창이 열립니다.
요소 코드 블럭을 추가해 주세요.
[요소코드 요소블럭 설정 버튼 화면]
버튼 블럭 위에 마우스를 올리면 가운데에 코드 수정 버튼, 좌측 상단에 블럭 편집 메뉴가 표시됩니다.
가운데에 있는 [설정(톱니 바퀴)]버튼을 클릭하여 상세 설정을 하실 수 있습니다.
● 요소 코드 블럭 코드 작성하기
[요소코드 편집하기 화면]
가운데 [코드 편집하기] 버튼으로 코드 작성 및 수정이 가능합니다.
● 요소 코드 블럭 상세 설정하기
[요소코드 요소블럭 상세설정창 화면]
버튼 블럭 위에 마우스를 올리면 좌측 상단에 블럭 편집 메뉴가 표시됩니다.
가운데에 있는 [설정(톱니 바퀴)] 버튼을 클릭하여 상세 설정창을 열어줍니다.
요소 코드 블럭의 상세 설정창은 배경, 애니메이션 두 개의 탭메뉴로 구성되어 있습니다.
각 설정 항목에 대해 알아보겠습니다.
[배경]
[요소코드 요소블럭 상세설정 - 배경]
| 항목 | 설명 |
| 배경 | 블럭에 대한 배경을 설정합니다. |
| 테두리 | 블럭 테두리 종류, 두께, 색상 등을 설정합니다. |
[애니메이션]
[요소코드 요소블럭 상세설정 - 애니메이션]
화면에 해당 요소 블럭이 위치한 영역이 보일 때 동작하는 애니메이션을 설정합니다.
| 항목 |
설명 |
| 효과 |
애니메이션 효과를 설정합니다.
|
| 방향 | 해당 블럭이 나오고 움직이는 방향을 설정합니다. |
| 지속 시간 | 애니메이션이 동작되는 시간을 설정합니다. |
| 지연 시간 | 요소 블럭이 위치한 영역이 화면에 표시되고 몇 초 뒤에 애니메이션이 동작할 지 설정합니다. |