개요

HTML 에디터 인터페이스를 이용하여 파일 관리자 인터페이스(cPanel >> 홈 >> 파일 >> 파일 관리자)에서 HTML 문서를 쉽게 편집할 수 있습니다. 이 비주얼 (WYSIWYG) HTML 에디터에는 친숙한 데스크톱 에디터(예를 들어, Microsoft® Word)의 강력한 편집 기능이 포함됩니다.

비고:

- 사용자 맞춤 설정(customization)으로 인해, 가이드의 스크린샷은 사용자가 보는 HTML 에디터 인터페이스와 맞지 않습니다. 아래 테이블에는 모든 인터페이스의 기능이 나열되어 있습니다.

- HTML 에디터 인터페이스는 CKEditor 기능을 이용합니다. 자세한 정보는 CKEditor 사용자 가이드(Users Guide)를 읽어 보십시오.

 

툴바

HTML 데이터 인터페이스는 HTML 파일을 편집하게 도움을 주는 다음의 도구를 제공합니다.

 

저장(Save)

  파일을 서버에 저장합니다.

 

템플릿

미리 작성한 양식으로 문서를 구성하는 데 사용할 템플릿을 선택합니다. 각 템플릿에는 페이지 레이아웃, 텍스트 포맷과 스타일과 같은 요소가 포함됩니다.

 

인쇄

파일을 인쇄합니다.

 

다시 실행 취소

컨텐츠에 텍스트 선택을 실행 취소 또는 다시 실행합니다.

• 왼쪽 화살표를 클릭하여 가장 최근 작업을 실행 취소합니다.
• 오른쪽 화살표를 클릭하여 막 실행 취소한 작업을 반복합니다.

찾아 바꾸기

컨텐츠에서 선택한 텍스트를 검색하고 바꿉니다.

• 찾기(Find)아이콘을 클릭하여 특정 컨텐츠에 대한 텍스트를 검색합니다.
• 바꾸기(Replace)아이콘을 클릭하여 컨텐츠를 검색한 다음 텍스트 상자에 입력한 다른 컨텐츠로 바꿉니다.

모두 선택

  그런 다음 잘라서 복사 또는 삭제할 수 있는 전체 문서를 선택합니다.

 

양식 도구(Form tool)

하나 이상의 양식 요소(예를 들어, 확인란, 텍스트 상자, 선택 필드나 버튼)를 삽입합니다. 양식에는 다음 요소가 포함될 수 있습니다.

- 확인란으로 사용자는 양식 내의 목록에서 하나 이상의 항목을 선택할 수 있습니다.

- 라디오 버튼으로 사용자는 양식 내의 목록에서 하나의 항목을 선택할 수 있습니다.

- 텍스트 상자는 사용자가 텍스트를 입력할 수 있는 한 줄 필드입니다.

- 텍스트 영역은 사용자가 텍스트를 입력할 수 있는 스크롤 가능한 여러 줄 필드입니다.

- 선택 필드는 사용자가 하나 이상의 설정을 선택할 수 있는 스크롤 가능한 목록입니다.

- 버튼으로 사용자는 완성된 양식을 제출할 수 있습니다.

- 숨겨진 필드는 사용자가 볼 수 있지만 시스템이 완성된 양식과 함께 서버에 제출하는 필드입니다.

 

텍스트 도구

다음 설정으로 텍스트의 모양을 변경합니다.

- 굵게

- 기울임꼴

- 밑줄

_{- 아래 첨자}

^{- 위 첨자}

 

서식 제거(Remove Format) 도구

선택한 텍스트의 서식을 제거하지만 텍스트 자체는 유지합니다. 외부 소스에서 컨텐츠를 복사했고 서식이 문서의 나머지 부분과 일치하지 않은 경우, 이 설정을 클릭하여 텍스트를 다시 기본 스타일로 설정합니다.

 

목록 도구

컨텐츠에서 순서(번호 매김) 또는 순서 없는 (글머리 기호) 목록을 생성합니다.

 

들여쓰기(Indent) 도구

선택한 단락의 왼쪽 또는 오른쪽 들여 쓰기를 늘립니다.

 

인용 블록(Block quote) 도구

선택한 텍스트에 대한 인용 블록을 생성합니다.

 

Div

선택된 텍스트에 대해 div 컨테이너(container)를 생성합니다.

 

정렬(Alignment) 도구

왼쪽 정렬, 가운데, 오른쪽 정렬 또는 가운데 맞춤 설정으로 선택된 텍스트나 이미지의 형식을 지정합니다.

 

링크 도구

컨텐츠에 웹사이트나 파일에 대한 링크를 생성합니다. 더 이상 필요하지 않은 링크를 추가한 경우, 링크를 강조 표시하고 끊어진 링크 아이콘을 이용하여 제거합니다.

 

고정(Anchor) 도구

웹사이트 내에 다른 섹션으로 링크하는 앵커를 컨텐츠에 생성합니다.

 

이미지 도구

이미지를 파일에 삽입합니다. 이 도구를 이용하면 로컬 컴퓨터가 아니라 서버를 찾아보고 여기에서 이미지를 선택할 수도 있습니다.

 

삽입 도구

컨텐츠에 표, 수평선, 페이지 나누기 및 다른 특수 문자를 추가합니다.

 

다양한 사이트에서 미디어 컨텐츠 포함 도구

문서에 YouTube™ 비디오 및 Flash 개체와 같은 멀티미디어 요소를 삽입합니다.

 

스타일 메뉴

선택한 텍스트에 대해 글꼴 스타일을 생성합니다.

 

단락 서식 메뉴 

 선택한 텍스트의 단락 스타일을 설정합니다.

 

텍스트 방향 도구

텍스트의 방향을 왼쪽에서 오른쪽 또는 오른쪽에서 왼쪽으로 설정합니다.

 

글꼴 메뉴

선택된 텍스트에 대한 설정을 설정합니다.

비고:

설정한 스타일이 동일하게 유지되도록 글로벌 글꼴 사용을 권장합니다.

 

사이즈 메뉴

텍스트의 글꼴 크기를 설정합니다.

 

색상 도구

텍스트의 배경색 뿐만 아니라 텍스트의 색상을 설정합니다.

 

최소화

작은 창에 맞도록 인터페이스를 최소화합니다.

 

블록 표시(Show Blocks) 도구

블록 수준 요소를 HTML 태그로 구분하는 그리드를 표시합니다.

 

출처

컨텐츠 영역에 대한 소스 코드를 표시합니다.

 

정보(About)

CKEditor 웹사이트의 파일 브라우저(File Browser)에 대한 정보를 표시합니다.

 

이미지 삽입

이미지를 삽입하려면 다음 단계를 수행합니다.

1.  도구 모음에서 이미지 도구(Image tool) 아이콘을 클릭합니다. 에디터는 이미지 속성(Image Properties) 인터페이스를 표시합니다. 이미지 속성(Image Properties) 인터페이스에는 다음 탭이 포함됩니다.

- 이미지 정보(기본)— 이미지 URL을 설정하고 문서에 표시되는 방식을 조작합니다.

- 링크(Link)— 예를 들어 다른 웹 페이지나 문서를 가리킬 수 있는 이미지 링크를 생성합니다.

- 업로드(Upload)— 로컬 컴퓨터 없이 검색할 수 있는 서버에 이미지를 저장합니다.

- 고급(Advanced)— 이미지 설정을 구성합니다(예를 들어, ID 할당, 클래스, 도구 설명(tooltips), 또는 CSS 속성).

비고:

HTML과 CSS를 이해할 수 있는 경우에만 고급(Advanced) 탭을 이용해야 합니다.

2. 미리보기(Preview)인터페이스에서 설정을 확인하고 OK를 클릭합니다.

 

이미지 속성 인터페이스에 대한 자세한 정보는 CKEditor 사용자 가이드를 읽어 보십시오.

비고:

핫링크 보호(Hotlink Protection) 기능을 활성화하고 활성화된 핫링크 목록이 일차 도메인 계정을 제외하면 포함된 이미지를 볼 수 없습니다. 이 문제를 해결하기 위해 일차 도메인을 액세스를 허용할 URL(URLs to allow access) 목록에 추가합니다.

 

파일 브라우저                                                                                                                

브라우저 서버(Browse Server) 설정은 인터페이스의 파일 브라우저(File Browser) 섹션으로 이동합니다. 이 섹션을 이용하여 cPanel 계정에서 이미지를 검색, 업로드, 관리합니다.

이 인터페이스는 다음 섹션을 포함합니다.

- 도구모음(Toolbar)— 특정한 파일 브라우저 기능을 빠르게 실행한 일련의 버튼입니다.

- 폴더에서 위 아래로 이동합니다.

- 선택된 파일에 대한 자세한 정보를 봅니다.

- 폴더 창(Folders pane)— 쉬운 탐색을 위해 폴더 계층구조를 구성합니다. 화살표를 이용하여 다양한 계층 수준을 확장 및 축소합니다.

- 파일 창(Files pane)— 선택된 폴더에서 이용할 수 있는 파일을 나열합니다.

- 상태 표시줄(Status bar)— 선택된 파일 또는 폴더에 있는 총 파일 수에 대한 정보를 표시하는 인터페이스 하단의 섹션입니다.

 

 

원문보기 : HTML Editor