1. 카카오맵 지도 복사를 위해, 카카오맵으로 이동합니다.

1. 카카오맵 좌측 상단 [장소, 주소, 버스 검색] 에서 주소를 검색합니다.
2. 주소가 제대로 검색되었는지 확인합니다.
3. 올바른 [주소]를 클릭합니다.
4. 표시된 지도 정보 창 내 [공유 아이콘]을 클릭합니다.
5. [HTML 태그 복사] 버튼을 클릭합니다.

• 회사 주소가 조회되지 않으시는 경우 카카오맵 통해 등록해 주시길 바랍니다. (카카오맵 > 좌측 상단 메뉴 > 신규장소 등록 클릭)

2. 카카오맵 HTML 태그 복사에서 소스를 복사합니다.

1. 지도 크기를 설정할 수 있습니다.
2. 아이콘 디자인을 변경할 수 있습니다.
3. [소스 생성하기] 버튼을 클릭해 소스를 생성합니다.
4. 지도 소스 타입을 선택할 수 있습니다.
   • 일반지도: 홈페이지에 사용되는 소스입니다.
   • 이미지 지도: 이미지로 구성되는 소스입니다.
5. [소스] 표시된 소스를 복사합니다.
   • 복사한 소스는 별도의 메모장에 붙여놓습니다.

3. 텍스트 에디터 내 카카오맵을 교체합니다.

1. 변경하고자 하는 [카카오맵]를 확인합니다.
2. 수정을 위해 관리자 대시보드에서 해당 수정 페이지로 이동합니다.
   • 카카오맵은 HTML 태그(노드)와 스크립트(API)로 호출하기 때문에,
     텍스트 에디터내 별도 표시되지 않습니다.
   • 메인 페이지 수정하기: 7번
   • 페이지 수정하기: 3번
   • 게시판 수정하기: 2번
   • 주문폼 수정하기: 9번
   • 하단 영역 수정하기 (회사정보, 주소): 1번
3. [HTML 복사] 버튼을 클릭해 HTML 소스를 복사하여 메모장/코드 에디터에 백업합니다.
   • HTML 복사 버튼 / 텍스트 에디터가 없는 경우, 소스를 직접 전체 선택해 복사하여 백업합니다.
4. [소스] 버튼을 클릭해 소스 내 변경 카카오맵(root_daum_roughmap) 위치를 찾습니다. 
   • 단축키 Ctrl + F로 root_daum_roughmap을 검색하여 쉽게 찾으실 수 있습니다.
5. [1. 지도 노드]: 카카오맵이 표시될 태그입니다.
6. [2. 설치 스크립트]: 카카오맵이 설치될 스크립트이며, 1개만 필요합니다.
   • 홈페이지 내 설치되어 있는 경우 소스 내 설치 스크립트가 표시되지 않으실 수 있습니다.
7. [3. 실행 스크립트]: 카카오맵이 실행될 스크립트입니다.
   • "timestamp" : 지도의 위치 값입니다.
   • "key" : 지도의 고유 키 값입니다.
   • "mapWidth" : 지도의 넓이 값입니다.
   • "mapHeight" : 지도의 높이 값입니다.
   • "mapWidth" , "mapHeight"는 스타일이 지정되어 있을 경우 반영되지 않으실 수 있습니다.
8. 노드 및 스크립트 변경 후, 우측 상단에 [저장] 버튼을 클릭해 변경 내용을 저장합니다.

[주소(텍스트/문구) 수정하기]

• 직접 수정이 어려우신 경우 대행 유지보수를 지원해 드리고 있습니다. 대행 유지보수 항목 확인하기
• HTML 작성 시 기본적인 웹 지식이 필요합니다. 아래의 사이트에서 웹 표준 기술에 대한 기초적인 학습이 필요합니다. HTML 학습하기(MDN)
• HTML 수정 시 [CSS 스타일 시트]도 함께 수정이 필요하실 수 있습니다.
• 코드 에디터는 Microsoft 사의 오픈소스 코드에디터 Visual Studio Code를 권장드립니다. 다운로드 하기(Visual Studio Code)
• ⚠️ 데이터베이스 명령어 / 스크립트 등 시스템 오류를 유발할 수 있는 텍스트 입력 시 요청이 차단됩니다.

1. 구글맵 지도(iframe) 복사를 위해, 구글맵으로 이동합니다.

1. 구글맵에서 좌측 상단 [Google 지도 검색] 에서 주소를 검색합니다.
2. 올바른 주소로 검색되었는지 확인합니다.
3. 아래 [공유] 버튼을 클릭합니다.
4. 공유 창에서 [지도 퍼가기] 탭을 클릭합니다.
5. [HTML 복사] 버튼을 클릭해 iframe을 복사합니다.
   • 복사한 iframe 태그는 별도의 메모장에 붙여놓습니다.

• 회사 주소가 조회되지 않으시는 경우 구글맵을 통해 등록해 주시길 바랍니다. (구글맵 > 좌측 상단 메뉴 > 누락된 장소 추가 클릭)

2. 텍스트 에디터 내 구글맵을 변경합니다.

1. 페이지에서 변경하고자 하는 [구글맵]를 확인합니다.
2. 수정을 위해 관리자 대시보드에서 해당 수정 페이지로 이동하여 iframe을 확인합니다.
   • 메인 페이지 수정하기: 7번
   • 페이지 수정하기: 3번
   • 게시판 수정하기: 2번
   • 주문폼 수정하기: 9번
   • 하단 영역 수정하기 (회사정보, 주소): 1번
3. [HTML 복사] 버튼을 클릭해 HTML 소스를 복사하여 메모장/코드 에디터에 백업합니다.
   • HTML 복사 버튼 / 텍스트 에디터가 없는 경우, 소스를 직접 전체 선택해 복사하여 백업합니다.
4. [소스] 버튼을 클릭해 소스 내 변경 구글맵(iframe 태그) 위치를 찾습니다. 
   • 단축키 Ctrl + F로 iframe을 검색하여 쉽게 찾으실 수 있습니다.
5. 변경을 진행할 구글맵(iframe) 위치를 확인합니다.
   전체 iframe 태그(<iframe></iframe>)를 선택하여, 복사한 구글맵 iframe 태그를 붙여넣습니다.
   • [width=""] 구글맵의 넓이 값을 설정합니다.
   • [height=""]  구글맵의 높이 값을 설정합니다.
   • 스타일이 지정되어 있을 경우 반영되지 않으실 수 있습니다.
6. 우측 상단에 [저장] 버튼을 클릭해 변경 내용을 저장합니다.

[주소(텍스트/문구) 수정하기]

• 직접 수정이 어려우신 경우 대행 유지보수를 지원해 드리고 있습니다. 대행 유지보수 항목 확인하기
• HTML 작성 시 기본적인 웹 지식이 필요합니다. 아래의 사이트에서 웹 표준 기술에 대한 기초적인 학습이 필요합니다. HTML 학습하기(MDN)
• HTML 수정 시 [CSS 스타일 시트]도 함께 수정이 필요하실 수 있습니다.
• 코드 에디터는 Microsoft 사의 오픈소스 코드에디터 Visual Studio Code를 권장드립니다. 다운로드 하기(Visual Studio Code)
• ⚠️ 데이터베이스 명령어 / 스크립트 등 시스템 오류를 유발할 수 있는 텍스트 입력 시 요청이 차단됩니다.

유튜브 동영상을 복사하여 iframe 형태로 구성할 수 있습니다.
텍스트 에디터내 추가하고자 하는 HTML 소스 위치에 붙여넣습니다.

1. 유튜브 동영상 페이지 내 [공유] 버튼을 클릭합니다.
2. 공유 창에서 [< > 퍼가기] 버튼을 클릭합니다.
3. [동영상 퍼가기] 창에서 퍼가기 옵션 설정합니다.
4. [복사] 버튼을 클릭해 복사합니다.
5. 복사할 페이지, 게시글에서 [텍스트 에디터]내 [소스]버튼을 클릭합니다.
   • 소스 내 iframe을 찾습니다.
     단축키 Ctrl + F (Cmd + F)를 눌러 검색하여 찾으실 수 있습니다.
6. 텍스트 에디터 내 복사한 소스를 붙여넣습니다.
   • [width=""] : 동영상의 넓이 값을 설정합니다.
   • [height=""] : 동영상의 높이 값을 설정합니다.
   • 스타일이 지정되어 있으신 경우 적용되지 않으실 수 있습니다.
   • 유튜브 iframe과 관련된 내용은 아래 "자세히 보기"를 통해 확인해 주세요.

[YouTube Iframe API 자세히 보기]

홈페이지의 간단한 텍스트는 직접 수정이 가능합니다. 수정 전 HTML 소스는 백업을 권장드립니다.
(※ 텍스트 에디터가 없는 하단 영역, HTML 위젯 등 에서는 5번 부터 진행해 주세요.)

1. [텍스트] 변경하고자 하는 텍스트를 확인합니다.
2. 수정을 위해 관리자 대시보드에서 해당 수정 페이지로 이동합니다.
   변경 텍스트는 단축키 Ctrl + F (Cmd + F)로 쉽게 찾으실 수 있습니다.
   • 메인 페이지 수정하기: 7번
   • 페이지 수정하기: 3번
   • 게시판 수정하기: 2번
   • 주문폼 수정하기: 9번
   • 하단 영역 수정하기 (회사정보, 주소): 1번
3. [HTML 복사] 버튼을 클릭해 HTML 소스를 복사하여 메모장/코드 에디터에 백업합니다.
   • HTML 복사 버튼 / 텍스트 에디터가 없는 경우, 소스를 직접 전체 선택해 복사하여 백업합니다.
4. [소스] 버튼을 클릭해 소스 내 변경 텍스트 위치를 찾습니다. 
   • 단축키 Ctrl + F (Cmd + F)로 쉽게 찾으실 수 있습니다.
5. 변경을 진행할 텍스트 위치를 확인합니다.
6. HTML 태그(<> </>) 안에 있는 텍스트를 수정합니다.
7. 우측 상단에 [저장] 버튼을 클릭해 변경 내용을 저장합니다.

• 직접 수정이 어려우신 경우 대행 유지보수를 지원해 드리고 있습니다. 대행 유지보수 항목 확인하기
• HTML 작성 시 기본적인 웹 지식이 필요합니다. 아래의 사이트에서 웹 표준 기술에 대한 기초적인 학습이 필요합니다. HTML 학습하기(MDN)
• HTML 수정 시 [CSS 스타일 시트]도 함께 수정이 필요하실 수 있습니다.
• 코드 에디터는 Microsoft 사의 오픈소스 코드에디터 Visual Studio Code를 권장드립니다. 다운로드 하기(Visual Studio Code)
• ⚠️ 데이터베이스 명령어 / 스크립트 등 시스템 오류를 유발할 수 있는 텍스트 입력 시 요청이 차단됩니다.

복잡한 페이지, 게시글의 경우 [소스] 버튼을 클릭해 소스를 백업하신 후
수정하시는 것을 권장드립니다.

1. [소스] 버튼을 클릭해 소스를 수정할 수 있습니다.
2. 페이지, 게시글 등 홈페이지와 관련된 소스가 표시됩니다.
   • 전체 내용을 백업하고 메모장 또는 코드 에디터로 수정하시는 것을 권장드립니다.
   • 홈페이지 내 텍스트 변경하기
   • 이미지를 업로드하여 교체하기
   • 파일 관리자 업로드 파일 교체 방법 (이미지/파일)
3. [삼각형 아이콘] 클릭 후 드래그 하여 에디터 사이즈를 조절할 수 있습니다.

• 직접 수정이 어려우신 경우 대행 유지보수를 지원해 드리고 있습니다. 대행 유지보수 항목 확인하기
• HTML 작성 시 기본적인 웹 지식이 필요합니다. 아래의 사이트에서 웹 표준 기술에 대한 기초적인 학습이 필요합니다. HTML 학습하기(MDN)
• HTML 수정 시 [CSS 스타일 시트]도 함께 수정이 필요하실 수 있습니다.
• 코드 에디터는 Microsoft 사의 오픈소스 코드에디터 Visual Studio Code를 권장드립니다. 다운로드 하기(Visual Studio Code)
• ⚠️ 데이터베이스 명령어 / 스크립트 등 시스템 오류를 유발할 수 있는 텍스트 입력 시 요청이 차단됩니다.

1. [아이콘]을 클릭한 상태로 드래그하여 사진의 위치를 변경할 수 있습니다.
2. [사진]
   • [1회 클릭] 선택하여 이미지 스타일을 지정하거나, 위치를 변경할 수 있습니다.
   • [1회 클릭, 복사 붙여넣기] 복사한 이미지를 붙여 넣으실 경우 해당 붙여넣은 이미지로 교체됩니다.
     • 컴퓨터 폴더에서 복사한 이미지 파일
     • Figma에서 복사(Copy as Png)한 png 파일
     • Photoshop에서 복사한 이미지 레이어
   • [더블 클릭] 이미지 속성을 확인할 수 있습니다.
3. [사진]을 우클릭 후 관련 메뉴를 확인할 수 있습니다.
4. [이미지 속성]을 클릭해 사진 속성을 변경할 수 있습니다.
   • 속성 변경을 통해 이미지를 업로드하여 변경할 수 있습니다.

텍스트 에디터 툴바 내 [사진] 버튼을 클릭해 사진을 업로드하거나,
드래그앤드롭으로 업로드할 수 있습니다.

1. [업로드] 탭을 선택합니다.
2. [파일 선택] 버튼을 클릭해 사진을 선택합니다.
3. [서버로 전송] 버튼을 클릭해 서버로 업로드 합니다.
   • 이미지는 "/public/upload/img/" 경로에 특수문자로 업로드 됩니다.
   • 파일 관리자 사용하기
4. [URL] 현재 업로드 된 사진 파일의 URL 입니다.
5. [대체 문자열] 사진을 불러오지 못했을 경우 표시되는 대체 문자열입니다.
6. [너비*높이] 사진의 너비와 높이를 설정합니다.
7. [아이콘] 너비와 높이를 잠금 및 초기화를 할 수 있습니다.
8. [정렬] 사진의 위치를 설정합니다.
9. [이미지 설명 넣기] 업로드 된 사진에 설명을 추가할 수 있는 영역을 생성합니다.
10. [확인] 버튼을 클릭해 업로드 합니다.

• 원본 게시글을 복사하여 사용하실 경우 복사 또는 원본게시글이 삭제될 경우 이미지가 삭제되실 수 있습니다.
• 사진은 게시글 마다 업로드 해주시는 것을 권장드립니다.

1. [굵게]설정합니다. 
2. [기울임 꼴]을 설정합니다.
3. [밑줄]을 설정합니다 .
4. [취소선]을 설정합니다.
5. [아래 첨자]를 추가합니다.
6. [위 첨자]를 추가합니다.
7. [포맷 복사] 선택된 서식을 복사합니다.
8. [형식 삭제] 형식을 삭제합니다.
9.  [순서 있는 목록]을 지정합니다.
10. [순서 없는 목록]을 지정합니다.
11. [내여쓰기]를 적용합니다.
12. [들여쓰기]를 적용합니다.
13. [인용 단락]을 생성합니다.
14. [DIV]를 생성합니다.
15. [왼쪽 정렬]을 적용합니다. 
16. [중앙 정렬]을 적용합니다.
17. [오른쪽 정렬]을 적용합니다.
18. [양쪽 정렬]을 적용합니다.
19. 텍스트 방향을 왼쪽에서 오른쪽으로 변경합니다.
20. 텍스트 방향을 오른쪽에서 왼쪽으로 변경합니다.
21. [언어]를 설정합니다.
22. [링크]를 적용/수정합니다.
23. [링크 삭제] 적용 링크를 삭제합니다.
24. 이미지를 추가합니다.
25. [표]를 추가합니다.
26. [가로줄]을 추가합니다.
27. [특수문자]를 삽입합니다.
28. [아이프레임]을 삽입합니다.
29. [스타일]을 설정합니다.
30. [문단 형식]을 설정합니다.
31. [글꼴]을 선택합니다.
32. [문단 크기]를 설정합니다.
33. [글자 색상]을 설정합니다.
34. [배경 색]을 설정합니다.
35. [HTML 소스]를 확인합니다.
36. [HTML 구조]를 확인합니다.