2025년 11월 홈페이지 유지보수 정책이 변경됩니다. (자세히 보기)

제목2 CKEditor4

홈페이지의 페이지, 게시판, 게시글은 텍스트 에디터로 관리됩니다.
텍스트 에디터를 이용하여 페이지, 게시판, 게시글의 내용을 직접 관리할 수 있습니다.

  • 디자인이 적용된 페이지의 수정 시 홈페이지 구조에 맞게 수정하지 않으시면, 홈페이지가 깨지실 수 있습니다.
  • 홈페이지의 디자인(색상, 폰트 사이즈, 간격 등)은 CSS 스타일 시트에서 수정이 가능합니다.
  • ⚠️ 데이터베이스 명령어 / 스크립트 등 시스템 오류를 유발할 수 있는 텍스트 입력 시 요청이 차단됩니다.
 

텍스트 에디터 관리하기

(4개)

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

 

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

 

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

 

 

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

 

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

 

 

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

 

  1. 변경하고자 하는 [카카오맵]를 확인합니다.
  2. 수정을 위해 관리자 대시보드에서 해당 수정 페이지로 이동합니다.
  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을 확인합니다.
  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)로 쉽게 찾으실 수 있습니다.
  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)
  • ⚠️ 데이터베이스 명령어 / 스크립트 등 시스템 오류를 유발할 수 있는 텍스트 입력 시 요청이 차단됩니다.
자세히 보기