SmartEditor Basic 2.0 개발자 가이드

Size: px

Start display at page:

Download "SmartEditor Basic 2.0 개발자 가이드"

세경 손
4 years ago
Views:

1 목차 소개 9 SmartEditor Basic 2.0 의특징 9 지원브라우저 10 제공기능상세 10 글꼴 10 글자크기 11 글자효과 12 글자색 13 글자배경색 14 위첨자와아래첨자 15 정렬 16 줄간격 16 번호매기기 17 글머리기호 17 내어쓰기와들여쓰기 17 인용구스타일 18 하이퍼링크 18 특수기호 19 표생성과간단편집기 20 찾기와바꾸기 21 편집모드 22 설치하기 25 설치전확인사항 25 다운로드 25 에디터구조 버전설치 x 버전에서업그레이드 29 기능추가및변경하기 31 4

2 소개 SmartEditor Basic 2.0 은 JavaScript 로구현된웹기반의 WYSIWYG 편집기이다. 글꼴, 글자크기, 줄간격 등을자유롭게설정할수있으며, 단어찾기 / 바꾸기와같은편리한기능을제공한다. 이장에서는 SmartEditor Basic 2.0 의특징과기능을소개한다. SmartEditor Basic 2.0 의특징 SmartEditor Basic 2.0 에서이전버전에비해개선된기능과추가된기능은다음과같다. 개선된기능 UI 디자인개선글꼴, 글자크기, 줄간격등을설정하는 UI를기존의드롭다운메뉴에서레이어로변경하여디자인이개선되었다. 글자색과글자배경색기존의기본색상표이외에다양한색상을선택할수있는컬러팔레트를제공한다. 줄간격줄간격값을직접입력할수있다. 인용구인용구스타일이기존의 7가지에서 10가지로늘어났다. 표표를삽입할때기존에는테두리색상과두께만설정할수있었지만 SmartEditor Basic 2.0 버전에서는테두리스타일을설정할수있으며, 쉽게표를꾸밀수있도록표스타일을제공한다. 추가된기능 표간단편집기표편집기능을제공하여표를삽입한후에도스타일을편집할수있다. TEXT 모드 Editor 모드 (WYSIWYG) 와 HTML 모드외에 TEXT 모드를추가하여단순텍스트만으로간단하게본문의내용을작성할수있다. 9

3 지원브라우저 일부브라우저는 SmartEditor Basic 2.0을지원하지않거나일부기능만을지원한다. 지원하는기능은브라우저특성에따라다를수있다. 운영체제별로 SmartEditor Baisc 2.0의모든기능을지원하는브라우저는다음과같다. 표 1 지원브라우저와운영체제 운영체제 Windows XP 브라우저 Internet Explorer 7.x, 8.x, Firefox 3.5 이상, Chrome 4.0 이상, Safari 4.0 이상 Windows Vista Internet Explorer 7.x, 8.x Windows 7 Mac Internet Explorer 8.x, 9.x, Firefox 3.5 이상, Chrome 4.0 이상, Safari 4.0 이상 Firefox 3.5 이상, Safari 4.0 이상, Chrome 5.0 이상 SmartEditor Basic 2.0 버전에서는기존의 SmartEditor Basic 버전에서제공하던기능을개선하고, 새로운기능을추가하였다. 또한 Editor 모드 (WYSIWYG) 와 HTML 모드외에 TEXT 모드를추가하여 다양한방식으로글을편집할수있다. 제공기능상세 SmartEditor Basic 2.0 이제공하는각기능을툴바의아이콘순서로알아본다. 번호매기기버튼, 글머리 기호버튼, 내어쓰기버튼, 들여쓰기버튼은툴바의더보기버튼 (>>) 을클릭하면나타난다. 그림 1 툴바더보기버튼 글꼴 11가지의기본글꼴과 2가지의나눔글꼴을제공한다. 제공하는기본글꼴은돋움, 돋움체, 굴림, 굴림체, 바탕, 바탕체, 궁서, Arial, Tahoma, Times New Roman, Verdana이며, 나눔글꼴은나눔고딕과나눔명조이다. 10

4 그림 2 글꼴선택레이어나눔고딕과나눔명조는브라우저설치형웹폰트이며나눔글꼴사이트 ( 에서내려받아설치할수있다. 나눔글꼴은서버에설치하는폰트가아니라는점을주의한다. 각글꼴을적용한모습은다음그림과같다. 그림 3 글꼴적용예 글자크기 글자크기는 7pt 부터 36pt 까지설정할수있다. 11

5 그림 4 글자크기선택레이어 나눔고딕에각글자크기를적용한모습은다음그림과같다. 그림 5 글자크기적용예 글자효과 글자에굵게, 밑줄, 기울임꼴, 취소선효과를적용할수있다. 각글자효과를적용한모습은다음과 같다. 12

6 그림 6 글자효과적용예 글자효과는단축키를사용하여적용할수도있다. 각글자효과의단축키는다음과같다. 표 2 글자효과의단축키 효과굵게밑줄기울임취소선 단축키 Ctrl+B Ctrl+U Ctrl+I Ctrl+D 글자색 기본색상표에서제공하는색을선택하거나컬러팔레트에서색을선택하여글자색을변경할수있다. 기본색상표오른쪽아래의더보기를클릭하면컬러팔레트가나타난다. 원하는색상의웹색상코드값을직접입력할수도있다. 그림 7 글자색기본색상표 13

7 그림 8 글자색컬러팔레트 글자배경색 기본색상표에서제공하는색을선택하거나컬러팔레트에서색을선택하여글자배경색을변경할수있다. 기본색상표오른쪽아래의더보기를클릭하면컬러팔레트가나타난다. 원하는색상의웹색상코드값을직접입력할수도있다. 그림 9 글자배경색의기본색상표 14

8 그림 10 글자배경색의컬러팔레트 글자색과글자배경색을적용한모습은다음그림과같다. 그림 11 글자색과글자배경색적용예 위첨자와아래첨자 글자에위첨자나아래첨자를적용할수있다. 위첨자와아래첨자를적용한모습은다음그림과 같다. 그림 12 위첨자와아래첨자적용예 15

9 정렬 문장을왼쪽, 가운데, 오른쪽, 양쪽으로정렬할수있다. 문장에각정렬방식을적용한모습은다음 그림과같다. 그림 13 문장정렬적용예 줄간격 문장의줄간격을조절할수있다. 줄간격은 50% 에서 200% 까지의값중에서선택하거나값을직접 입력할수있다. 그림 14 줄간격설정레이어 줄간격을적용한모습은다음그림과같다. 그림 15 줄간격 200% 적용예 16

10 번호매기기 문장의앞에순차적으로번호를매길수있다. 문장에번호매기기를적용한모습은다음그림과같다. 그림 16 번호매기기적용예 글머리기호 문장앞에글머리기호를붙여순서없는목록을만들수있다. 문장에글머리기호를적용한모습은 다음그림과같다. 그림 17 글머리기호적용예 내어쓰기와들여쓰기 문장을내어쓰거나들여쓸수있다. 문장에내어쓰기와들여쓰기를적용한모습은다음그림과같다. 그림 18 내어쓰기와들여쓰기적용예 들여쓰기와내어쓰기는단축키를사용하여적용할수도있다. 각단축키는다음과같다. 표 3 들여쓰기와내어쓰기의단축키 종류 내어쓰기 단축키 Shift+Tab 17

11 종류 들여쓰기 단축키 Tab 인용구스타일 문장에인용구스타일을적용할수있다. 인용구스타일의종류는모두 10 가지이다. 인용구스타일을 적용한문장을선택하고적용취소를클릭하면인용구스타일적용이취소된다. 그림 19 인용구스타일레이어 문장에일곱번째인용구스타일을적용한모습은다음그림과같다. 그림 20 인용구적용예 하이퍼링크 글자에하이퍼링크를설정할수있다. 하이퍼링크로연결된페이지는새창에서열린다. 그림 21 하이퍼링크설정레이어 하이퍼링크는단축키를사용하여설정할수도있다. 단축키는다음과같다. 표 4 하이퍼링크설정단축키 종류 링크 단축키 Ctrl+K 18

12 특수기호 키보드로입력하기어려운특수기호를쉽게삽입할수있다. 그림 22 특수기호삽입레이어 특수기호삽입레이어의각탭은특수기호의종류로, 각각다음과같은문자들을포함하고있다. 표 5 특수기호종류 특수기호종류 일반기호 예 숫자와단위Hz A 원, 괄호한글그리스, 라틴어일본어 ᄀᄂᄃᄅᄆᄇㄳㄵㄼㄽㄾ Π Ρ Σ π Ø ぁざじすね 다음그림은문장에라틴어특수기호를삽입한예이다. 그림 23 특수기호삽입예 19

13 표생성과간단편집기 SmartEditor Basic 2.0은표관련기능으로표생성기능과표편집기능을제공한다. 표를생성할때에는행과열의개수를지정할수있으며, 테두리스타일, 테두리두께, 테두리색, 셀배경색을직접입력하거나제공되는표스타일중에서선택할수있다. 그림 24 표생성레이어 스타일선택을선택하면다음과같이기본으로제공되는표스타일중에서선택할수있다. 그림 25 표스타일선택레이어 20

14 표를생성한후에도표의스타일을변경할수있으며, 셀을삽입 / 삭제 / 분할 / 병합하거나특정셀의 배경색만변경할수도있다. 마우스로드래그하여셀을선택하면다음과같이표간단편집기레이어가 나타난다. 그림 26 표간단편집기레이어 찾기와바꾸기 작성한글에서특정단어혹은문장을찾거나, 찾은단어나문장을다른단어나문장으로바꿀수있다. 그림 27 찾기 / 바꾸기레이어 찾기 / 바꾸기레이어는드래그앤드드롭으로에디터화면내에서위치를자유롭게옮길수있는플로팅 레이어이다. 다음그림은글에서 ' 스마트에디터 ' 라는단어를찾은예이다. 그림 28 단어찾기예 21

15 다음그림은바꾸기탭의모두바꾸기를클릭하여 ' 스마트에디터 ' 를모두 'SmartEditor' 로바꾼예이다. 그림 29 단어를찾아모두바꾸기예 찾기와바꾸기기능은단축키로이용할수도있다. 단축키는다음과같다. 표 6 찾기와바꾸기의단축키 기능 찾기 바꾸기 단축키 Ctrl+F Ctrl+H 편집모드 SmartEditor Basic 2.0 은 Editor 모드, HTML 모드, TEXT 모드의세가지편집모드를제공한다. 각모드는 편집화면오른쪽아래의탭으로선택할수있다. Editor 모드 툴바의기능을이용하여글을편집할수있는 WISYWIG 편집모드이다. 다음그림은 Editor 모드에서 글을작성하는예이다. 22

16 그림 30 Editor 모드에서글을작성하는예 HTML 모드 HTML 코드를직접작성하여글을편집할수있는모드이다. 다음그림은그림 30에서작성한글을 HTML 모드로변경했을때의화면이다. HTML 편집모드에서는툴바가비활성화된다. 그림 31 HTML 모드에서글을작성하는예 TEXT 모드단순텍스트로만글을작성할수있다. Editor 모드나 HTML 모드에서글을작성하고 TEXT 모드로변경하면서식, 이미지등이모두제거되고텍스트만남는다. 다음그림은그림 30에서작성한글을 TEXT 모드로변경했을때의화면이다. TEXT 편집모드에서는툴바가비활성화된다. 23

17 그림 32 TEXT 모드에서글을작성하는예 24

<4D6963726F736F667420576F7264202D20495420C1A6BEC8BCAD20C0DBBCBAB0FA20C7C1B8AEC1A8C5D7C0CCBCC720B1E2B9FD2E646F63>

<4D6963726F736F667420576F7264202D20495420C1A6BEC8BCAD20C0DBBCBAB0FA20C7C1B8AEC1A8C5D7C0CCBCC720B1E2B9FD2E646F63> IT 제안서 작성과 프리젠테이션 기법 프리젠테이션은 현장에서 고객의 반응을 쉽게 파악할 수 있다는 장점이 있다. 하지만 프리젠테이션을 위해 자료를 준비하고 발표하는 작업은 그리 쉽지 않아 프리젠터는 부단한 노력이 필요하다. 이번 강좌에서는 제안서와 프리젠테이션의 차이점을 살펴보고 성공적인 프리젠테이션 절차와 방법을 알아본다. 고홍식 넷모어정보통신 교육센터 대표이사