Embed Size (px)
Citation preview
DEXTWebEditor 사용자 가이드
목 차
제1장 DEXTWebEditor 소개.....................................................................................5
1. DEXTWebEditor 개요....................................................................................5
2. DEXTWebEditor 주요 특징.............................................................................5
3. 시스템 동작 기반.............................................................................................5
4. 설치방법........................................................................................................5
5. 컴포넌트 종류.................................................................................................6
제2장 DEXTWebEditor 기능소개...............................................................................7
6. 파일 메뉴.......................................................................................................7
새 문서 (Ctrl+N)..................................................................................7
열기 (Ctrl+O).....................................................................................7
저장 (Ctrl+S)......................................................................................8
다른 이름으로 저장...................................................................................8
인쇄 미리보기......................................................................................8
인쇄 (Ctrl+P)...........................................................................................8
7. 편집 메뉴.......................................................................................................9
실행취소 (Ctrl+Z)................................................................................9
다시실행 (Ctrl+Y)................................................................................9
잘라내기 (Ctrl+X)....................................................................................9
복사 (Ctrl+C)..........................................................................................9
붙여넣기 (Ctrl+V)....................................................................................9
전체선택 (Ctrl+A)....................................................................................9
지우기 (Delete).......................................................................................9
줄 간격 조정........................................................................................9
찾기 (Ctrl+F)....................................................................................10
바꾸기 (Ctrl+R)................................................................................11
8. 보기 메뉴.....................................................................................................12
태그......................................................................................................12
테두리...................................................................................................12
인코딩...................................................................................................12
9. 삽입 메뉴.....................................................................................................13
기호 (F7)...........................................................................................13
가로줄...............................................................................................13
그림.................................................................................................13
하이퍼링크........................................................................................15
레이어...................................................................................................16
Windows 미디어 플레이어.......................................................................19
10. 폼 컨트롤 삽입 메뉴................................................................................20
폼 컨트롤 활용 양식 만들기......................................................................20
양식 (FORM)..........................................................................................21
텍스트상자 (INPUT)................................................................................23
텍스트영역 (TEXTAREA).........................................................................24
숨김 상자 (INPUT - hidden)....................................................................26
드롭다운 상자 (SELECT).........................................................................27
선택 상자 (SELECT)...............................................................................29
체크 상자 (INPUT – checkbox)................................................................31
라디오 버튼 (INPUT – radio)...................................................................32
버튼......................................................................................................33
11. 표(셀) 메뉴............................................................................................35
표 그리기..........................................................................................35
표 지우기..........................................................................................35
행/열 삽입하기........................................................................................35
행 삽입.............................................................................................36
열 삽입..............................................................................................36
행 삭제.............................................................................................36
열 삭제..............................................................................................36
표 전체 선택...........................................................................................36
셀 선택하기............................................................................................36
열 너비를 같게...................................................................................37
행 높이를 같게...................................................................................37
열 너비 자동 보정...................................................................................37
행 높이 자동 보정...................................................................................37
너비 및 높이 자동 보정............................................................................37
셀 병합.............................................................................................37
셀 분할.............................................................................................37
행 복제..................................................................................................38
테두리 설정........................................................................................38
셀 채우기..........................................................................................41
표 속성 수정...........................................................................................42
셀 속성 수정...........................................................................................43
12. 서식 메뉴...............................................................................................45
굵게 (Ctrl+B)....................................................................................45
기울임꼴 (Ctrl+I)...............................................................................45
밑줄 (Ctrl+U)...................................................................................45
위첨자...................................................................................................45
위첨자...................................................................................................45
서식 지우기.......................................................................................45
CSS 스타일 지우기.................................................................................46
글꼴 색.............................................................................................46
글꼴 배경색.......................................................................................46
번호 매기기.......................................................................................46
글머리 기호.......................................................................................46
들여쓰기 (Ctrl+T)..............................................................................47
내어쓰기 (Ctrl+Shift+T)....................................................................47
수평 정렬...............................................................................................47
수직 정렬...............................................................................................47
13. 마우스 메뉴............................................................................................48
속성정보................................................................................................48
문서 일반 속성........................................................................................48
문단 모양...............................................................................................49
제1장 DEXTWebEditor 소개
1. DEXTWebEditor 개요
데브피아에서 제공하는 웹 에디터는 브라우저를 기반으로 개발한 모든 응용프로그램에서
문서작성 및 편집용으로 활용하기 위하여 제공되는 컴포넌트 기반의 HTML Editor 입니다
웹 프로그램 개발에 필요한 HTML 소스작성이 가능하며 메일시스템, 결재시스템,
게시판시스템, 지식관리시스템등과 같은 다양한 포털업무에서 사용하는데 사용자의 편리성을
극대화시킨 웹기반 에디터 입니다.
2. DEXTWebEditor 주요 특징
VISTA , IE 7.0 지원
모든 HTML 문서 및 CSS( Cascading Style Sheet ) 호환성 유지
MS 오피스 문서 호환성(불러오기, 복사등)
다양한 양식의 폼 작성이 가능한 전문가 수준의 표 기능 내장
메일, 게시판등 연동시 필요한 Upload, 통신모듈 지원
다국어 지원
브라우저기반의 컴포넌트로 손쉬운 배포 및 업그레이드
최소의 리소스 횔용과 네트웍 부하가 없는 소용량 컴포넌트
에디터 기능 컨트롤이 가능한 개발자 API 제공
3. 시스템 동작 기반
CPU : 인텔 펜티엄 호환 기종의 컴퓨터를 지원합니다.
OS : Windows 98 SE 이후의 모든 OS 를 지원합니다.
BROWSER : IE 5.5 이상의 브라우저를 기반으로 동작합니다.
4. 설치방법
DEXTWebEditor 는 컴포넌트 기반으로 웹 브라우저에서 자동 다운로드를 받아 사용할
형태로 제공을 하며 활용하고자 하는 웹 응용 프로그램에서 자동 배포를 하여 사용합니다.
5. 컴포넌트 종류
웹에디터 컴포넌트 : DEXTWebEditor
유틸리티 컴포넌트 : 소스보기 컴포넌트
다국어 컴포넌트 : 국가별 언어 리소스 모듈
제2장 DEXTWebEditor 기능소개
DEXTWebEditor 는 편집기로서의 기능에 충실하고 사용자 편리성을 극대화하기 위한 UI구조를 제공하여 편리하게 문서 편집을 할 수 있도록 다양한 기능을 제공합니다.
에디터의 상단 메뉴별로 기능설명이 되어 있으며 메뉴명 앞에 이미지가 있는 경우는 에디터에 바로가기 툴바 버튼이 제공되는 메뉴이며 단축키 사용이 가능한 메뉴는 단축키가 메뉴명에 표시되어 있습니다.
기능설명을 위하며 메뉴명을 참조하는 경우는 <메뉴명> 과 같이 표시를 합니다.
6. 파일 메뉴파일 메뉴에서는 작성한 문서를 저장 또는 인쇄를 하고 저장된 문서를 불러오는 기능들을
수행할 수 있다
새 문서 (Ctrl+N)
현재 작성중인 문서 편집을 종료하고 새로운 문서를 작성하는 기능입니다.
이 기능을 수행시 현재 작성중인 문서가 있으면 저장을 할 수 있도록 아래와 같은 대화상자가
나타납니다.
새로 작성되는 문서는 기본 문서명이 없는 상태가 됩니다..
열기 (Ctrl+O)
현재 작성중인 문서 편집을 종료하고 로컬PC에 저장된 문서를 읽어 오는 기능입니다..
이 기능을 수행시 현재 작성중인 문서가 있으면 <새 문서> 메뉴와 같이 저장을 할 수 있도록
아래와 같은 대화상자가 나타납니다.
DEXTWebEditor 에서는 MS Office 문서를 포함한 HTML 문서를 열어 볼 수 있습니다.
Office 문서를 HTML 형태로 자동 변환을 합니다(로컬 PC에 MS 오피스 설치 필수)
엑셀문서의 경우 여러 개 쉬트를 지원하지만 읽은 후 편집할 수 없습니다.
저장 (Ctrl+S)
현재 작성중인 문서를 저장하는 기능으로 저장할 문서이름이 설정되어 있는 경우는 동일한
위치의 파일에 아무 메지지 없이 저장이 됩니다. 따라서 현재 작성중인 문서 저장시
기존문서의 변경을 원하지 않는 경우는 <다른 이름으로 저장> 메뉴 기능을 이용하기
바랍니다.
편집중인 문서의 문서명이 지정되어 있지 않는 경우는 자동으로 <다른 이름으로 저장>
기능으로 동작을 하여 원하는 위치에 저장을 할 수 있는 탐색기 저장창이 나타 납니다.
다른 이름으로 저장
현재 작성중인 문서를 저장하는 기능으로 저장위치와 문서명을 지정하여 저장하는
기능입니다.
인쇄 미리보기
현재 작성중인 문서를 인쇄하기 전에 인쇄될 내용을 미리보는 기능입니다.
이 기능은 사용중인 브라우져의 버전에 따라 다르게 나타납니다.
인쇄 (Ctrl+P)
현재 작성중인 문서를 지정된 프린터로 인쇄하는 기능입니다.
7. 편집 메뉴편집 메뉴에서는 작성중인 문서의 내용을 복사하고 특정문자를 찾고 바꾸는 기능을
제공합니다.
실행취소 (Ctrl+Z)
문서 편집을 하면서 실행했던 기능을 한 단계 취소를 하고 이전의 작업상태로 되돌리는
기능입니다
다시실행 (Ctrl+Y)
문서 편집을 하면서 실행했던 기능을 한 단계 취소를 하고 취소된 기능을 다시 실행하고자 할
때 사용하는 기능입니다
잘라내기 (Ctrl+X)
편집중인 문서의 전체 또는 일부영역을 다른 곳으로 옮기기 위하여 지운후 클립보드에
보관하는 기능입니다.
복사 (Ctrl+C)
편집중인 문서의 전체 또는 일부영역을 재사용하기 위하여 클립보드에 보관하는
기능으로선택된 영역은 그대로 유지합니다.
붙여넣기 (Ctrl+V)
<잘라내기>, <복사>, <전체선택> 메뉴기능을 이용하여 클립보드에 보관된 내용이 있는
경우 <붙여넣기> 기능을 이용하여 원하는 위치에 삽입을 할 수 있습니다.
MS 오피스 문서와의 데이터 복사가 가능하며 파워포인트 문서 페이지별로 전체를
선택하여 복사하는 경우는 내용이 훼손되지 않토록 이미지로 변환하여 복사가 됩니다
전체선택 (Ctrl+A)
현재 작성중인 문서 전체를 선택하는 기능입니다.
지우기 (Delete)
선택된 영역의 내용을 지우는 기능입니다.
줄 간격 조정
특정위치 또는 선택된 영역에 있는 문단의 상하 줄 간격을 조정하는 기능입니다
기본값은 HTML의 기본 줄간격이며 아래와 같이 제공되는 줄간격을 선택하여 사용할
수있고 제공되지 않는 범위의 줄간격을 지정시는 직접 숫자를 입력할 수 있습니다
찾기 (Ctrl+F)
편집중인 문서에서 원하는 단어를 찾을 수 있고 지정된 내용으로 바꿀 수 있는 기능을
제공합니다
바꾸기 (Ctrl+R)
편집중인 문서에서 원하는 단어를 찾아 지정된 내용으로 바꿀 수 있는 기능을 제공합니다
8. 보기 메뉴보기 메뉴에서는 편집중인 문서의 내용을 보는 방법을 지정하는 기능을 제공합니다
태그
편집중인 문서의 단락구분 기호를 보여주는 기능으로 에디터 처음 동작시 기본은 Off이며
메뉴기능에서 선택시 설정/해제가 반복이 되며 설정시 문서내용은 아래와 같이 보입니다.
테두리
문서에 표를 만들어 사용하는 경우 테두리 속성에서 선없음 속성을 이용하여 선이 보이지
않토록 지정을 할 수 있다. 브라우져로 보면 지정된 셀의 선이 보이지 않는다
에디터에서 문서작성시 선없음 으로 지정된 부분은 흐린 회색으로 표시를 하여 편집하면서
일반속성과 보이지 않는 속성을 식별할 수 있도록 하였다.
<테두리> 메뉴기능을 Off를 시키면 선없음 으로 지정된 부분이 흐린회색으로 보이지 않고
흰색으로 나타나도록 한다. Off 로 설정이 되어 있는 경우는 이후에 설명하는 <레이어>도
외곽 테두리가 흰색으로 나타난다
인코딩
HTML 문서에서 표시되는 문자(언어)의 종류로서 다국어를 지원하기 위하여 제공되는 메뉴이다.
외부에서 작성된 문서의 언어형태가 현재 설정된 에디터와 호환되지 않는 경우는 글자가 깨져 보이는 경우가 있다이런 경우 <인코딩> 메뉴에서 언어를 변경하여 제대로 볼 수 있도록 지원한다
9. 삽입 메뉴삽입 메뉴에서는 문서작성시 다양한 컨트롤 기능를 이용하여 대화형 HTML문서를 개발시
사용되는 도구를 지원합니다
기호 (F7)
문서편집시 입력하고자 하는 각종 기호와 특수문자의 삽입이 편리하도록 제공되는
기능입니다
기호항목에서 원하는 기호종류를 선택을 하면 사용 가능한 문자가 표시됩니다.
원하는 문자를 선택하고 마우스 더블클릭을 하면 에디터의 현재 위치로 기호가 삽입이
되고 클립보드로 복사를 한 후 에디터의 원하는 위치에 반복하여 붙여넣기를 할 수
있습니다.
가로줄
편집중인 문서의 상하 구분을 위하여 가로줄을 삽입하는 기능입니다..
그림
로컬 PC에 저장된 이미지삽입 : <찾아오기> 에서 원하는 그림을 선택
웹사이트에 있는 이미지 링크 : http://Myserver.com/My.gif 와 같이 경로 직접 입력
위의 대화상자를 에디터에 삽입된 이미지를 더블 클릭하여 속성값을 수정하는 것도
가능하다
사진경로 : 이미지가 있는 위치를 찾아 원하는 이미지를 선택합니다.
대체 문자열 : 삽입된 이미지의 명칭을 입력하는 곳으로 편집시 나타 나지는 않고 작성된
문서를 브라우져로 볼 때 이미지 명칭이 마우스 선택시 보이고 이미지를 저장시 명칭이
제공된다
너비, 높이 : 이미지 삽입시 지정된 크기로 삽입이 되기를 원하는 경우에 사용한다. 문서
편집을 하여 프로그램화 할 경우 주로 사용을 하며 기본으로 삽입을 하여 마우스로
이미지를 선택할 후 끌기를 하여 이미지의 크기를 조정할 수 있다
원래 크기로 : 지정된 크기를 무시하고 이미지 원래 크기로 삽입을 하는 기능으로 이미지
삽입시 너비, 높이를 지정하지 않으면 기본으로 동작된다
수평여백 : 이미지를 표의 특정 셀에 삽입을 하는 경우 삽입되는 셀의 좌우 여백을
설정하는 기능으로 셀 좌우 크기를 조정하여도 설정된 수평여백만큼 좌우 여백을 남긴다
수직여백 : 이미지를 표의 특정 셀에 삽입을 하는 경우 삽입되는 셀의 상하 여백을
설정하는 기능으로 셀 상하 크기를 조정하여도 설정된 수직여백만큼 상하 여백을 남긴다
정렬 : 삽입된 이미지의 위치를 결정하는 기능으로 해당위치의 문자와 함께 동작한다
테두리 : 삽입되는 이미지에 외곽 테두리가 생기도록 하는 기능이며 숫자는 pixel
단위이다
하이퍼링크
브라우저의 특정위치를 찾아 갈 수 있도록 URL을 지정하는 기능으로 다양한 방식의 URL을
지원한다
위의 대화상자를 에디터에 삽입된 URL을 더블 클릭하여 속성값을 수정하는 것도 가능하다
방식 : 삽입하고자 하는 URL방식을 제공된 형식에서 선택을 한다
URL : URL 식별자없이 URL이름만 입력을 한다. 입력된 URL은 밑줄로 표시가 되며
에디터에 표시되는 내용은 실제 URL이 아니므로 편집하여도 입력된 URL은 변경되지
않는다. 에디터에 입력된 내용을 블록으로 선택을 한 후 URL입력을 하면 에디터의
내용은 그대로 남겨두고 URL만 설정이 된다.
대상 프레임 : HTML target = 에 해당하는 속성으로 target 이란 하이퍼링크 혹은 form
요소를 사용하여 값을 전달할 창 혹은 프레임의 이름을 지정한다
target은 미리 정의된 값이나 사용자가 정의한 창의 이름으로 지정 할 수 있다
_blank : 항상 새로운 창으로 이동한다
_parent : 프레임을 사용한 경우에 FRAMESET요소가 나타내는 프레임에 표시한다
IFRAME의 경우 IFRAME이 속한 요소를 뜻한다
프레임이 아닌경우 _self와 같은 의미이다
_top : 프레임을 사용한 경우, 현재 프레임이 표시되는 창 전체를 의미한다
FRAMESET요소를 한번만 사용한 경우는 _parent와 같은 의미이다
_self : 현재 창에 표시한다
직접입력 : 사용자가 부모창에 이름을 정의하고 자식창에서 target으로 지정해 준다
설명(툴팁) : 설명을 입력시 해당 문서를 브라우져로 보는 경우 해당 URL에 마우스가
위치했을 때 툴팁으로 입력된 내용을 보여준다
레이어
레이어는 박스 형태로 제공이 되는 특수 영역이다
제공된 영역의 크기 조정이 가능하다
편집문서의 어떤 곳이라도 마우스로 위치 이동이 가능하다
입력된 내용이 있어도 레이어는 중첩이 가능하며 보여지는 순서를 조정할 수 있다
레이어를 삽입한 경우의 화면
옅은 회색의 박스형태의 영역이 삽입된 레이어이며 이 레이어는 마우스로 자유롭게 이동이
가능하고 레이어 안에 문서 편집이 가능하다
HTML 문서를 편집할 때 영역별로 다단계 편집을 하기 원하는 경우 레이어 여러 개 만들어
원하는 형태로 배치를 할 수 있다
레이어 영역에서 마우스 더블클릭을 하면 아래와 같은 속성지정창이 나타난다
왼쪽, 위 : 레이어 영역이 편집되는 HTML문서내에서 위치한 곳의 좌표로서 숫자를
입력하여 원하는 위치를 맞추는 것은 쉽지 않고 위치이동시는 마우스로 레이어
편집모드가 아닌 상태에서 선택하여 이동을 하는 것이 쉽다. 마우스로 이동시 이 좌표는
자동으로 바뀌며 프로그램용 HTML로 활용시 이 좌표를 참고할 수 있다
너비, 높이 : 선택된 레이어의 가로, 세로 크기로 pixel 단위이다
Z-순서 : 하나의 문서에 레이어가 여러 개 있는 경우 처음에 만든 레이어의 Z-순서가 1
이고 레이어를 추가할 때 마다 이 순서가 증가된다
레이어가 중첩이 되었을 경우는 Z-순서가 클 수로 전면으로 보인다
보이기 : 편집모드에서는 레이어가 보이고 브라우져에서는 보이지 않토록 속성을
추가하는 기능
‘기본값’은 이 속성을 제거하는 것으로 브라웆에서는 디폴트로 상속속성으로 동작을
한다
‘상속’ 속성은 레이어안에 또 다른 레이어를 추가한 경우 부모레이어의 속성을
따라가는 것을 의미한다. 부모레이어가 감추기인 경우 함께 안보이게 되며
부모속성과는 별도로 동작되기를 원하는 경우는 ‘보이기’ 속성을 주어야 한다
‘보이기’ 속성은 브라우져에서 보이는 속성이다
‘감추기’ 속성을 편집창에서는 보이지만 브라우져에서는 보이지 않는다
이 기능은 주로 이 속성값은 HTML 포르그램에서 제어하고자 하는 경우 활용된다.
레이어를 활용한 문서편집 활용 예
Windows 미디어 플레이어
본문에 이미지 이외의 멀티미디어 파일을 삽입하는 기능이다
경로 : 로컬에 있는 멀티미디어 파일을 찾아 선택을 한다
플러그 인 주소 : 선택된 멀티미디어에 따라 자동으로 표시된다
레이아웃 : 삽입된 멀티미디어가 재생되는 영역의 크기를 설정하는 곳이다
플레이어 창의 크기를 지정하지 않으면 멀티미디어 파일의 원래 크기로
재생된다
실행속성 : 해당 HTML이 실행시 미디어 플레이어의 재생관련 옵션을 설정하는 곳이다
화면 속성 : 멀디미디어 재생기(윈도우 미디어 플레이더) 가 표시되는 방법을 제어하는
곳이다
멀디미디어 파일을 추가한 화면
10. 폼 컨트롤 삽입 메뉴삽입 메뉴중 HTML 프로그램 소스 작성시 또는 대화형 문서 작성시 사용되는 폼 컨트롤
기능을 제공한다.
폼 컨트롤을 제대로 사용하기 위하여는 HTML TAG 에 대한 기반 지식이 필요합니다.
폼 컨트롤 활용 양식 만들기
1. 삽입 – 양식 메뉴를 추가한다
2. 삽입된 form tag 안에 원하는 표를 만든다
3. 삽입 메뉴에 있는 각종 폼 컨트롤 메뉴를 이용하여 입력 필드를 만든다
4. 버튼 메뉴를 이용하여 실행버튼을 만든다
양식구분 테그인 블록 안에 폼컨트롤 삽입시는 블록이 추가로 생기지
않는다
양식 (FORM)
활용분야
설문조사와 같은 대화형 문서 편집
메일, 게시판, KMS 와 같은 시스템의 입력양식용 프로그램 개발
일반적으로 form태그는 입력양식을 만들 때 사용되며 양식을 추가하면 <form>
</form> 블록이 생기며 이 블록안에 입력되는 내용과 폼컨트롤은 하나의 양식으로
동작이 됩니다.
입력양식이란 브라우저를 통하여 데이터를 입력 받아 전송해주는 양식을 말하는
것입니다.
양식 등록 화면
※ form 태그의 HTML 형식과 속성
<FORM id=ID name=이름 action=http://naver.com
method=post target=_blank enctype="application/x-
www-form-urlencoded">
폼 이름 : 사용되는 폼이름으로 HTML 프로그램에서 인식하기 위하여 사용된다
ID :
액션 : HTML action= 에 해당하는 속성으로 폼안에 전송형식의 버튼(button submit)
이 있는 경우 이 버튼을 눌렀을 때 실행될 프로그램의 URL이 선언되는 곳 이다. 프로그램
명칭을 입력시는 전체 URL Path 를 지정하여야 한다
메소드 : HTML method = 에 해당하는 속성으로
Post : 브라우저에서 입력한 내용을 다른 곳으로 보낼 때 사용하며
Get : 다른곳에 있는 데이터를 브라우저의 입력양식으로 가져올 때 사용한다
대상 프레임 : HTML target = 에 해당하는 속성으로 target 이란 하이퍼링크 혹은 form
요소를 사용하여 값을 전달할 창 혹은 프레임의 이름을 지정한다
target은 미리 정의된 값이나 사용자가 정의한 창의 이름으로 지정 할 수 있다
_blank : 항상 새로운 창으로 이동한다
_parent : 프레임을 사용한 경우에 FRAMESET요소가 나타내는 프레임에 표시한다
IFRAME의 경우 IFRAME이 속한 요소를 뜻한다
프레임이 아닌경우 _self와 같은 의미이다
_top : 프레임을 사용한 경우, 현재 프레임이 표시되는 창 전체를 의미한다
FRAMESET요소를 한번만 사용한 경우는 _parent와 같은 의미이다
_self : 현재 창에 표시한다
직접입력 : 사용자가 부모창에 이름을 정의하고 자식창에서 target으로 지정해 준다
인코딩 타입 : application/x-www-form-urlencoded 타입은 폼에서 입력된 일반
데이터를 전송시 사용하고 get 방식과 post방식이 보낼수있는 데이터양에는 한계가
있다보니 파일이나 많은양의 데이터를 전송할때에는 문제가 생깁니다. 이때는
multipart/form-data 방식을 사용합니다.
텍스트상자 (INPUT)
텍스트를 한 줄만 입력을 할 수 있는 상자모양의 폼 컨트롤이다
만들어진 <텍스트상자>의 크기른 마우스로 끌어 좌우 크기를 조절할 수 있다
삽입후 모양
브라우저 보기 모양
(활성, 비활성)
내용 편집시 모양
암호유형 모양
파일유형 모양
등록 시 설정하는 화면은 아래와 같고 만들어진 <텍스트상자>를 더블 클릭하여도
설정창이 나타난다
이름, ID : 생성되는 <텍스트상자>를 식별할 수 있는 항목값으로서 HTML 프로그램에서
식별할 때 사용된다. 입력하지 않아도 된다
값 : <텍스트상자> 안에 표시되는 내용
비활성화 : 체크를 선택하면 브라우저에서 입력내용이 옅은색으로 보이고 <텍스트상자>
에서 직접 수정 할 수는 없고 속성설정창을 통하여만 내용을 수정하는 것이 가능하다
읽기 전용 : 비활성화와 같이 글자색이 흐리게 보이지 않고 브라우저에서 내용을
수정하는 것만 방지된다. 편집시에는 직접수정도 가능하다
최대 글자 수 : <텍스트상자>에 입력할 수 있는 최대 글자수를 설정할 수 있다
자동 완성 : <텍스트상자> 에 글자를 입력시 예전에 입력했던 유사한 단어가 존재하는
경우 쉽에 입력이 가능하도록 찾아주는 기능으로 on, off 를 시킬 수 있다
암호 유형 : <텍스트상자>에 입력되는 글자가 검정원으로 표시가 되는 형태로서
브라우저에서 입력한 글자를 알 수 없도록 할 경우 활용한다
파일 유형 : 브라우저에서 <텍스트상자>에 로컬PC에 있는 파일을 찾아 입력한다
텍스트영역 (TEXTAREA)
텍스트를 여러줄 입력을 할 수 있는 상자모양의 폼 컨트롤 이다
만들어진 <텍스트상자>의 크기른 마우스로 끌어 상하좌우 크기를 조절할 수 있다
삽입후 모양
브라우저 보기 모양
(활성, 비활성)
내용 편집시 모양
등록시 설정하는 화면은 아래와 같고 만들어진 <텍스트영역>을 더블클릭하여도 설정창이
나타난다
이름, ID : 생성되는 <텍스트영역>을 식별할 수 있는 항목값으로서 HTML 프로그램에서
식별할 때 사용된다. 입력하지 않아도 된다
초기 값 : <텍스트영역> 안에 표시되는 내용
비활성화 : 체크를 선택하면 브라우저에서 입력내용이 옅은색으로 보이고 <텍스트영역>
에서 직접 수정 할 수는 없고 속성설정창을 통하여만 내용을 수정하는 것이 가능하다
읽기 전용 : 비활성화와 같이 글자색이 흐리게 보이지 않고 브라우저에서 내용을
수정하는 것만 방지된다. 편집시에는 직접수정도 가능하다
줄 수 : <텍스트상자> 의 상하 크기이다.
<텍스트상자>를 만들고 좌우 크기만 임의로 조정을 하고 상하크기는 조정하지 않은
경우(HEIGHT 값이 없는 경우임) 동작을 한다.
줄 수가 4이면 <텍스트상자>의 높이가 4줄 크기로 조정된다
입력된 텍스트이 내용을 4줄을 초과하여 입력을 할 수 있고 상하 스크롤이 자동으로
활성화 된다.
열 글자수 : 상하로 입력되는 최대 글자 수를 지정하는 것으로 <텍스트상자> 처럼
초과여부가 자동으로 처리되지 않고 별도의 HTML 프로그램상에서만 제어가 가능하다
줄바꿈 Soft : 입력되는 글자가 <텍스트영역>의 좌우크기 이상으로 입력이 되지않고
자동 줄바꿈이 된다. “ENTER”를 쳐서 줄바꾼 경우 HTML 프로그램에 값을 보낼 때
엔터기호를 추가하지 않고 보낸다
줄바꿈 Hard : 입력되는 글자가 <텍스트영역>의 좌우크기 이상으로 입력이 되지않고
자동 줄바꿈이 된다. “ENTER”를 쳐서 줄바꾼 경우 HTML 프로그램에 값을 보낼 때
엔터기호를 추가하여 보낸다.
줄바꿈 Off : 입력되는 글자가 <텍스트영역>의 좌우크기 이상으로 입력이 되면서 좌우
스크롤바가 나타난다. “ENTER”를 쳐서 줄바꾼 경우 HTML 프로그램에 값을 보낼 때
엔터기호를 추가하지 않고 보낸다
숨김 상자 (INPUT - hidden)
<텍스트상자> 와 동일한 모양의 폼 컨트롤 이다
브라우저에서는 보이지 않는 속성으로 HTML 프로그램내부에서만 활용한다
삽입후 모양
브라우저 보기 모양
등록시 설정하는 화면은 아래와 같고 만들어진 <숨김상자>을 더블클릭하여도 설정창이
나타난다
이름 : 생성되는 <숨김상자>를 식별할 수 있는 항목값으로서 HTML 프로그램에서
식별할 때 사용된다. 입력하지 않아도 된다
값 : <숨김상자> 안에 표시되는 내용
드롭다운 상자 (SELECT)
미리 입력된 여러 개의 항목을 상하로 펼쳐 선택하는 형태의 폼컨트롤이다
삽입후 모양
브라우저 보기 모양
(비활성인경우는
펼칠수 없다)
등록시 설정하는 화면은 아래와 같고 만들어진 <드롭다운상자>를 더블클릭하여도
설정창이 나타난다
이름, ID : 생성되는 <드롭다운상자>를 식별할 수 있는 항목값으로서 HTML
프로그램에서 식별할 때 사용된다. 입력하지 않아도 된다
항목 : 등록된 항목이 표시되는 곳으로 브라우저에 보이는 <드롭다운상자> 안의
내용이며 선택여부에 체크된 항목이 <드롭다운상자> 펼치지 전에 보여주는 항목명으로
변경을 할 수 있고 여러 개 선택을 하여도 마지막것만 체크로 남는다
표시되는 항목명의 상하 순서를 바꾸고자 하는 경우는 이동하고자 하는 항목명을
마우스로 끌어 원하는 곳에 놓으면 순서가 바뀐다
항목 값 : 항목별로 값을 입력시 HTML 프로그램에 선택된 항목명을 넘기지 않고
항목값을 넘겨준다. 항목값이 없는경우는 항목명을 넘겨준다
항목추가/수정 : 항목명과 값을 추가하고 변경하는 화면이다
비활성화 : 선택된 항목명으로 고정이 되면서 흐리게 표시된다. 항목이 선택되고 난 후
HTML 프로그램에서 이 필드값을 제어하여 다음에는 선택을 하지 못하도록 할 수 있다
선택 상자 (SELECT)
<드롭다운상자>와 유사하며 입력된 항목이 전체 펼쳐진 형태의 폼컨트롤이다
삽입후 모양
브라우저 보기 모양
(활성, 비활성)
등록시 설정하는 화면은 아래와 같고 만들어진 <선택상자>를 더블클릭하여도 설정창이
나타난다
이름, ID : 생성되는 <선택상자>를 식별할 수 있는 항목값으로서 HTML 프로그램에서
식별할 때 사용된다. 입력하지 않아도 된다
항목 : 등록된 항목이 표시되는 곳으로 브라우저에 보이는 <선택상자> 안의 내용이며
선택여부에 체크된 항목이 <선택상자> 에 디폴트로 선택되어 보여주는 항목명으로
변경을 할 수 있고 여러 개 선택을 하여도 마지막 것만 체크로 남는다
표시되는 항목명의 상하 순서를 바꾸고자 하는 경우는 이동하고자 하는 항목명을
마우스로 끌어 원하는 곳에 놓으면 순서가 바뀐다
항목 값 : 항목별로 값을 입력시 HTML 프로그램에 선택된 항목명을 넘기지 않고
항목값을 넘겨준다. 항목값이 없는경우는 항목명을 넘겨준다
항목추가/수정 : 항목명과 값을 추가하고 변경하는 화면이다
비활성화 : 선택된 항목명으로 고정이 되면서 흐리게 표시된다. 항목이 선택되고 난 후
HTML 프로그램에서 이 필드값을 제어하여 다음에는 선택을 하지 못하도록 할 수 있다
다중 선택 허용 : <선택상자>에 표시된 항목을 Shift, Ctrl 키를 혼용하여 여러 개
선택하는 것이 가능하도록 한다
줄 수 : <선택상자>를 만들고 좌우 크기만 임의로 조정을 하고 상하크기는 조정하지
않은 경우(HEIGHT 값이 없는 경우임) 동작을 한다
줄 수가 4이고 입력된 항목수가 6개인 경우는 <선택상자>의 크기가 4줄로 고정이 되고
상하 스크롤이 생긴다. <선택상자>를 만들고 항목을 HTML 프로그램에서 넣는 경우
항목수가 가변적인 경우가 있다. 이런 경우 무한정 펼쳐지도록 할 수가 없기 때문에
최대로 펼쳐지는 항목수를 이곳에 등록을 한다.
줄 수보다 항목수가 적을 경우는 전부 펼쳐지고 항목수가 큰 경우에만 상하스크롤이
자동으로 생긴다
체크 상자 (INPUT – checkbox)
여러 개를 만들어 원하는 항목을 선택할 수 있는 형태의 폼컨트롤이다
삽입후 모양
브라우저 보기 모양
(활성, 비활성)
등록시 설정하는 화면은 아래와 같고 만들어진 <체크상자>를 더블클릭하여도 설정창이
나타난다
이름, ID : 생성되는 <체크상자>를 식별할 수 있는 항목값으로서 HTML 프로그램에서
식별할 때 사용된다. 입력하지 않아도 된다
값 : <체크상자> 선택시 넘겨주는 Value 를 의미한다. 여러 개를 동시에 선택할 수
있으며 이 경우에는 여러 개의 값이 넘어간다
상태 : 브라우저에 처음에 보여질 때의 상태를 선택할 수 있다
비활성화 : 선택된 상태에서 더 이상 변경을 하지 못하도록 원하는 경우 이 변수를
제어하여 수정하지 못하도록 설정한다
라디오 버튼 (INPUT – radio)
여러 개를 만들어 원하는 항목 한개만 선택할 수 있는 형태의 폼컨트롤이다
삽입후 모양
브라우저 보기 모양
(활성, 비활성)
등록시 설정하는 화면은 아래와 같고 만들어진 <라디오버튼>을 더블클릭하여도 설정창이
나타난다
이름 : 생성되는 <라디오버튼>를 식별할 수 있는 항목값으로서 HTML 프로그램에서
식별할 때 사용된다. 4개를 만들고 1개만 선택되도록 하려면 반드시 이름을 동일하게
만들어야 한다
버튼이 선택이 되면 다시 눌러서 해제를 할 수 없고 동일한 이름으로 만들어진 다른 <
라디오버튼>을 선택하면 이전에 선택된 것은 자동으로 해제가 된다
ID : HTML 프로그램에서 식별을 위한 값이다
값 : <라디오버튼> 선택시 넘겨주는 Value 를 의미한다. 한 개만 선택할 수 있다
상태 : 브라우저에 처음에 보여질 때의 상태를 선택할 수 있다
비활성화 : 선택된 상태에서 더 이상 변경을 하지 못하도록 원하는 경우 이 변수를
제어하여 수정하지 못하도록 설정한다
버튼
사용자가 누를 수 있는 형태의 폼컨트롤이다
삽입후 모양
브라우저 보기 모양
(활성, 비활성)
등록시 설정하는 화면은 아래와 같고 만들어진 <버튼>을 더블클릭하여도 설정창이
나타난다
이름 : 생성되는 <버튼>를 식별할 수 있는 항목값으로서 HTML 프로그램에서 식별할 때
사용된다.
값 : 버튼에 표시되는 버튼에 대한 설명이다
ID : HTML 프로그램에서 식별을 위한 값이다
유형 : 버튼은 만들어 사용하는 유형에 따라 3가지 형태로 만들 수 있다
일반 : 누르면 다른 프로그램이 동작하도록 하는 일반적인 형태이다
전송 : Submit button 이라고 하여 결과를 전송할 때 사용한다
원래대로 : Reset button 이라고 하여 양식(form) TAG 안에 있는 텍스트 입력필드의
값을 지우고 원상태로 되돌릴 때 사용한다
비활성화 : 선택된 상태에서 더 이상 변경을 하지 못하도록 원하는 경우 이 변수를
제어하여 수정하지 못하도록 설정한다
11. 표(셀) 메뉴표(셀) 메뉴에서는 워드 수순의 표를 작성할 수 있도록 다양한 기능을 제공한다
표를 만들고 사용하는데 필요한 표를 몇가지 선택하는 화면 예시를 참고한다
표 전체가 마우스로 선택된 상태의 화면
이 상태에서는 표 전체를 마우스로 이동이 가능하다
표 전체가 선택된 상태에서 마우스가 화살표 모양일 경우에 마우스 끌기를 하면 표 전체
크기가 조정이 된다(표 선체가 선택되지 않은 상태에서는 해당셀만 크기가 조정이 된다)
표 그리기
표 전체를 선택한 상태에서 이 기능은 전체 표를 삭제한다
표 지우기
표 전체를 선택한 상태에서 이 기능은 전체 표를 삭제한다
행/열 삽입하기
다양한 방법으로 작성중인 표의 행과 열을 추가 또는 복사하는 기능을 제공한다
복제를 할 경우는 대상 행/열을 여러 개 지정은 불가능하다
행 삽입
표에서 현재 마우스가 위치한 곳의 위로 빈 행 하나를 추가한다
열 삽입
표에서 현재 마우스가 위치한 곳의 좌측으로 빈 열 하나를 추가한다
행 삭제
표에서 현재 마우스가 위치한 곳의 행을 삭제한다
연속되는 행을 여러 개 선택을 하고 <행 삭제>를 하면 동시에 지워진다
열 삭제
표에서 현재 마우스가 위치한 곳의 열을 삭제한다
연속되는 열을 여러 개 선택을 하고 <열 삭제>를 하면 동시에 지워진다
표 전체 선택
작성중은 문서가 여러 페이지로 되어 있는 경우 표 전체를 선택하는 기능으로 단축키를
활용하면 편리하다
셀 선택하기
작성중인 표의 특정셀 한 개를 선택할 경우 활용된다
열 너비를 같게
표에서 선택된 영역내에 있는 열의 크기를 동일한 크기로 재분배를 한다
선택된 영역의 전체 크기를 변하지 않는다
열 선택시는 특정행 한 부분의 열만 선택을 하여도 해당 열 전체가 조정이 된다
행 높이를 같게
표에서 선택된 영역내에 있는 행의 높이를 동일한 크기로 재분배를 한다
선택된 영역의 전체 크기를 변하지 않는다
행 선택시는 특정열 한 부분의 행만 선택을 하여도 해당 행 전체가 조정이 된다
열 너비 자동 보정
HTML 문서에서 작성되는 표는 기본적으로 너비를 가지고 있다. 외부에서 작성된 문서를
재활용하거나 병합등의 기능을 사용하다보면 편집기에서 인식되는 열너비가 브라우저에서
잘못 계산이 되어 셀크기조정등이 제대로 동작을 하지 않는 경우가 발생한다.
이 경우 사용하는 기능으로 필요시 편집기에서 자동으로 실행하여 보정이 되지만 수동으로
실행할 수 있도록 메뉴기능도 제공을 한다
행 높이 자동 보정
HTML 문서에서 작성되는 표는 기본적으로 높이를 가지고 있다. 외부에서 작성된 문서를
재활용하거나 병합등의 기능을 사용하다보면 편집기에서 인식되는 행높이가 브라우저에서
잘못 계산이 되어 셀크기조정등이 제대로 동작을 하지 않는 경우가 발생한다.
이 경우 사용하는 기능으로 필요시 편집기에서 자동으로 실행하여 보정이 되지만 수동으로
실행할 수 있도록 메뉴기능도 제공을 한다
너비 및 높이 자동 보정
위의 2가지 기능을 전체 표를 대상으로 수동 실행하는 기능으로 외부문서 재활용시는 표를
활용하는 기능이 오동작시 유용하게 보정을 할 수 있도록 제공이 되는 기능이다
셀 병합
작성중인 표 내에서 사각형 형태로 블록을 선택하여 분할된 셀을 하나의 셀로 합칠 수 있는
기능이다
셀 분할
선택된 셀을 분할하는 기능으로 아래와 같은 분할 옵션창을 제공한다
행 복제
하나 또는 여러 개의 행을 블록으로 선택한 상태에서 실행할 수 있는 기능으로 클립보드를
이용하지 않고 복사를 하는 기능으로 아래와 같은 옵션창을 제공한다
여러 개의 행을 내용을 포함하여 추가하고자 하는 경우에 편리하게 사용된다
동일한 영역을 바로 아래행에 복사를 하는 경우
원하는 행을 하나 또는 블록으로 선택을 한 후 Ctrl+Shift+Enter 키를 동시에 누르면
블록으로 선택된 행 전체가 바로 아래에 내용을 포함하여 복사가 된다
테두리 설정
DEXTWebEditor 에서 제공되는 <테두리 설정> 메뉴기능은 표 작성이 다양한 형태의
모양을 만들 수 있도록 가장 편리한 UI구조로 제공이 되는 기능이다
HTML문서를 만드는데 제공되는 TAG 는 여러가지 형태가 있고 표를 작성하는 에디터나
작성자에 따라 사용되는 HTML TAG 가 전부 다르기 때문에 브라우저로 보이는 표의 모양을
동일하더라도 실제 사용한 HTML TAG 는 다를 수 있다
DEXTWebEditor 에서는 가장 효율성이 있는 TAG 사용방법 한가지를 가지고 문서작성을
하며 외부문서를 재활용시 DEXTWebEditor 에서 제공되는 메뉴기능을 실행시 호환이
되지않는 HTML TAG 는 삭제 또는 변경을 하여 모든 동작이 최적화되도록 재구성이 되도록
기능화 되어 있다
따라서 작성된 표와 관련된 테두리 선의 모양과 색깔은 <테두리 설정> 기능을 이용하도록
되어 있다
표 외곽 테두리 선 모양과 색깔을 변경하고자 하는 경우
표 전체를 선택한 다음 <테두리 설정> 에서 외곽선만 선택을 하고 선모양, 색상,
두께를 지정하면 선택된 표의 외곽 테두리만 변경이 된다
<테두리 설정> 기능을 이용시는 엑셀에서 테두리 속성을 지정하는 것 처럼 원하는
구역을 먼저 블록으로 선택을 한 후 작업을 하는 것이 중요하다
표 속성 기본 값 : <테두리 설정>기능을 이용하여 속성을 지정하면 해당 셀마다
속성을 표시하는 HTML TAG 를 추가하도록 되어 있다.
기본값 지정이란 특별한 속성을 지정하는 것이 아니고 해당 셀마다 지정된 HTML TAG
를 지움으로서 브라우저에서 제공이 되는 기본 속성이 적용되도록 하는 기능이다.
브라우저 기본값은 검은색, 실선이다
다음에 설명하는 <표 속성 수정> 기능에 보면 표 테두리 색깔을 지정하는 기능이
있다. 이 기능을 실행시 <테두리 설정> 에서 특정 속성으로 지정을 한 경우는 <표
속성 수정>에서 변경을 하여도 <테두리 설정> 기능이 우선하므로 적용이 되지
않치만 <테두리 설정>에서 기본값으로 변경을 하게 되면 지정된 HTML TAG 를
삭제하므로 <표 속성 수정>에서 지정했던 색깔이 적용이 된다
<테두리 설정>에서 기본값으로 변경시 색깔이 검은색으로 변하지 않는 경우는 <표 속성
수정>의 표 테두리 색깔이 다른 색으로 지정이 되어 있는 경우이다
선 모양중 이중실선을 지정하는 경우는 선 두께를 최소 3 pt 이상으로 지정하여야만
이중 실선이 제대로 표시가 된다.
테두기 대상 선택 방법
외곽선 : 선택된 영역의 외곽 테두리만
전체 : 선택된 영역의 모든 테두리
안쪽 : 선택된 영역의 안쪽 테두리 모두(외곽선만 제외)
세로선 : 선택된 영역의 세로선 모두
가로선 : 선택된 영역의 가로선 모두
위쪽 : 선택된 영역의 외곽 테두리중 위쪽만
중간행 : 선택된 영역의 중간행 전부(가로선중 외곽은 제외)
아래쪽 : 선택된 영역의 외곽 테두리중 아래쪽만
왼쪽 : 선택된 영역의 외곽 테두리중 왼쪽만
중간열 : 선택된 영역의 중간열 전부(세로선중 외곽은 제외)
오른쪽 : 선택된 영역의 외곽 테두리중 오른쪽만
이미지 버튼을 클릭하면 선택이 되고 다시 누르면 해제가 된다
선택된 영역에 이미 지정된 테두리 속성이 있는 경우는 해당 이미지가 선택되어
있고 실선으로 표시가 된다
여러 개의 셀을 선택한 경우는 기본값형태로 표시가 될 수 있다
미리보기 영역 범례
선없음 으로 지정시는
선표시가 없다
기본값인 경우는
옅은회색으로
선표시된다
특정 모양으로 지정된
경우는 실선으로 표시
셀 채우기
지정된 영역의 셀을 원하는 색깔로 채우는 기능이다
표 속성 수정
배경 색상 : 표 전체 모든 셀이 지정된 색깔로 채우기가 된다
<셀 채우기> 기능에서 채우기 색깔을 지정한 부분은 적용되지 않는다
배경 그림 : 표 전체에 배경 이미지를 설정하는 기능이다
배경 덧붙임 : 문서를 스크롤 할 때 배경 그림을 고정할지, 스크롤 할지를 지정.
배경 반복 : 이미지 크기가 표 영역보다 작은 경우 반복되는 방법으로
기본값 : 가로,세로 반복
가로방향 : 가로만 반복
세로방향 : 세로만 반복
반복하지 않음: 반복 없음
배경 수평,수직위치 : 표의 좌측상단을 기준으로 이미지의 위치를 지정하는 기능으로
반복되는 경우는 의미가 없으며 여러가지 단위로 설정할 수 있다
Collapse 지정 : DEXTWebEditor 에서는 표 모양의 최적화와 표 관련 기능의 사용자
편리성을 위하여 반드시 지정을 하고 사용하는 것을 전제로 각종 기능이 구현되어 있다.
외부 문서를 재활용하는 경우 작성된 HTML 문서의 속성에서 Collapse 지정을
사용하지 않는 경우의 호환성을 위하여 이 옵션을 선택할 수 있도록 제공을 하지만
HTML TAG 에 대한 전문 지식이 없는 경우는 디폴트 값을 변경하지 않토록 한다
이 설정을 사용시 일부 기능은 기능상의 호환성이 없기 때문에 사용할 수 가 없다
표 테두리 : 표 전체 색깔을 변경하는 기능으로 <셀 채우기> 에서 색깔을 지정한
경우를 제외하고 적용이 된다
셀 안쪽 여백 : 셀에 문자를 입력시 셀 외곽 경계선과 입력된 문자가 일정한 최소
간격을 유지하도록 설정하는 기능이다
입력된 숫자는 pixel 단위로 인식이 되며 상하좌우 동일한 최소 간격이 유지된다
셀 속성 수정
수평 정렬 : 기본값은 설정된 TAG를 지우고 브라우저 기본값인 왼쪽정렬로 동작을
하고 나머지는 지정된 위치로 설정이 된다.
<마우스 메뉴> 의 <수평 정렬>에서는 기본값 지정은 없다
수직 정렬 : 기본값은 설정된 TAG를 지우고 브라우저 기본값인 가운데정렬로 동작을
하고 나머지는 지정된 위치로 설정이 된다.
<마우스 메뉴> 의 <수직 정렬>에서는 기본값 지정은 없다
너비, 높이 : 해당 셀의 가로, 세로 크기를 지정하는 기능으로 마우스로 끌기를 하여
간격을 조정하면 자동으로 크기가 표시가 되면 HTML 프로그램으로 활용시에 주로
활용이 된다
셀 테두리 : 셀 테두리의 색깔을 지정
배경 색상 : 선택된 셀이 지정된 색깔로 채우기가 된다
<셀 채우기> 기능과 동일한 기능이다
배경 그림 : 선택된 셀의 배경 이미지를 설정하는 기능이다
배경 덧붙임 : 문서를 스크롤 할 때 배경 그림을 고정할지, 스크롤 할지를 지정
배경 반복 : 이미지 크기가 셀 영역보다 작은 경우 반복되는 방법으로
기본값 : 가로,세로 반복
가로방향 : 가로만 반복
세로방향 : 세로만 반복
반복하지 않음: 반복없음
배경 수평,수직위치 : 셀의 좌측상단을 기준으로 이미지의 위치를 지정하는 기능으로
반복되는 경우는 의미가 없으며 여러가지 단위로 설정할 수 있다
12. 서식 메뉴서식 메뉴에서는 문서 편집중 문서의 모양을 설정하는데 필요한 기능으로 구성이 되어있다
굵게 (Ctrl+B)
선택된 영역의 문자를 진한(Bold) 색으로 표시하는 기능이다
기울임꼴 (Ctrl+I)
선택된 영역의 문자를 기울임(Italic) 모양으로 표시하는 기능이다
밑줄 (Ctrl+U)
선택된 영역의 문자를 밑줄(underline) 이 포함된 모양으로 표시하는 기능이다
위첨자
선택된 영역의 문자가 상단에 위치한 첨자형태로 설정을 하는 기능이다
위첨자로 설정된 영역에 마우스를 위치하고 마우스 오른쪽 메뉴(또는 상단 서식메뉴)의
위첨자 메뉴 앞에 아래 그림과 같이 선택표시가 되어 있다. 이때 위첨자 메뉴를 다시
선택하면 위첨자로 설정된 영역의 문자가 정상문자 형태로 환원이 되고 위첨자 선택표시도
없어진다
위첨자
선택된 영역의 문자가 하단에 위치한 첨자형태로 설정을 하는 기능이다
사용방법은 위첨자 기능과 동일하다
서식 지우기
선택된 영역의 문자에 지정된 서식을 지우는 기능으로 외부문서를 재활용시 원하는 형태의
문서형태로 만들기 위하여 기존에 지정된 서식관련 속성을 지우는 기능으로 서식지정이
제대로 동작을 하지 않는 경우에 사용하면 편리하다
이 기능을 실행시 아래 있는 속성이 설정되어 있으면 초기값으로 환원이 된다
서식 관련 속성 초기화 값
글꼴 종류 굴림체(사이트별 초기설정에 따라 변화)
글꼴 크기 10 pt(사이트별 초기설정에 따라 변화)
글꼴 모양 굵게, 기울임, 밑줄 속성이 제거된다
글꼴 색상 지정된 속성을 제거한다
글꼴 배경색 지정된 속성을 제거한다
수평정렬 문단의 가독성을 고려하여 그대로 유지한다
들여쓰기 문단의 가독성을 고려하여 그대로 유지한다
줄간격 지정된 속성을 제거한다
번호 매기기 문단의 가독성을 고려하여 그대로 유지한다
글머리 기호 문단의 가독성을 고려하여 그대로 유지한다
글자간격 지정된 속성을 제거한다
들여쓰기(indent) 지정된 속성을 제거한다
여백 지정된 속성을 제거한다
안쪽여백 지정된 속성을 제거한다
CSS 스타일 지우기
외부에서 작성된 문서를 재활용하는 경우(특히 MS Office 문서) 호환성이 없는 특별한
용도로 사용되는 HTML Style 속성이 포함되어 있어 범용 HTML 속성을 지원하는 에디터에서
문서 편집시 기능이 오동작하는 경우가 발생한다
이런 경우는 <CSS 스타일 지우기> 기능을 실행하면 문서 전체 내용중 호환성이 결여된
STYLE 을 제거하여 기능의 호환성이 유지되도록 하는 기능이다
이 기능을 실행하여도 문서의 내용을 변화되지 않고 내부 HTML TAG 만 변경이 된다
글꼴 색
선택된 영역의 글꼴 색깔을 지정하는 기능이다
글꼴 배경색
선택된 영역의 글꼴 배경색을 지정하는 기능이다
번호 매기기
연속되는 숫자 형태의 문단 모양으로 지정하는 기능이며 지정후 해당 영역에서 마우스
메뉴의 속성수정에서 속성 변경이 가능하다
글머리 기호
연속되는 기호 형태의 문단 모양으로 지정하는 기능이며 지정후 해당 영역에서 마우스
메뉴의 속성수정에서 속성 변경이 가능하다
들여쓰기 (Ctrl+T)
지정된 문단 전체가 일정 간격 들여쓰기를 한다
내어쓰기 (Ctrl+Shift+T)
지정된 문단 전체가 일정 간격 내어쓰기를 한다
수평 정렬
선택된 영역의 문단에 대한 좌우 정렬을 지정하는 기능이다
수직 정렬
선택된 영역의 문단에 대한 상하 정렬을 지정하는 기능으로 표 내부에 입력된 문단에만
적용이 된다
13. 마우스 메뉴마우스 메뉴는 문서 편집창에서 마우스 오른쪽 버튼을 누를 때 나타나는 메뉴로 위에
설명한 메뉴기능에는 없고 이곳에만 있는 기능에 대하여만 설명을 한다
속성정보
<번호 매기기>, <글머리 기호> 로 지정된 문단인 경우 해당 문단을 클릭시 속성정보 메뉴가 나타난다
문서 일반 속성
편집중인 문서 전체에 적용되는 속성을 지정하는 기능으로 관련 설명은 <표 속성 수정>을
참고한다
문단 모양
글자간격(Letter Spacing) : 글자와 글자 사이의 좌우간격을 조정하는 기능으로
브라우저 기본간격은 0 px 이다.
들여쓰기(Indent) : 문단의 첫줄만 시작 위치를 지정한 간격만큼 들여쓰기를 한다.
서식메뉴에 있는 <들여쓰기> 기능은 문단 전체 줄이 함께 들여쓰기가 되는 것과
구별된다
여백(Margin) : 위, 아래는 문단과 문단 사이의 여백을 설정하며 왼쪽, 오른쪽은
표시되는 편집창을 기준으로 한다. 표 안에서 작성된 경우는 문단을 포함한 셀 테두리를
기준으로 여백이 결정된다
안쪽여백(Padding) : 표 안에서 작성된 경우 문단을 기준으로 하지 않고 문단을 포함한
셀 테두리를 기준으로 셀 안에 입력되는 문자와의 최소 간격을 유지히도록 하기 위한
것이다. 5px를 설정시 셀 크기를 아무리 작게 줄여도 셀 테두리와 문자와의 간격을 최소
5px 은 유지가 된다
