오즈홈빌더 사용 설명서-웹 에디터 사용법

소스보기

HTML 소스를 직접 수정하기를 원할 때 사용합니다. 다시 웹에디터 모드로 돌아오려면 해당 아이콘을 다시한번 누르세요.

실행취소 / 다시실행

이전 에디터 작업을 되돌리거나 다시 실행합니다.
실행취소 단축키 ctrl+z, 다시실행 단축키 ctrl+y

잘라내기

웹에디터 화면에서 선택(반전)한 내용을 잘라냅니다. Delete 를 눌러 삭제하는 것과 달리 마지막에 잘라낸 내용은 ctrl+v로 다시 붙일 수 있습니다.
단축키 ctrl+x

복사

웹에디터 화면에서 선택(반전)한 내용을 복사합니다. 마지막에 복사한 내용은 ctrl+v로 붙여 넣을 수 있습니다.
단축키 ctrl+c

붙여넣기

위의 [잘라내기] 또는 [복사]로 메모리상에 저장해둔 내용 또는 다른 윈도우에서 복사해둔 내용을 커서가 위한 곳에 붙여넣습니다.
단축키 ctrl+v

텍스트로 붙여넣기

위의 [붙여넣기]와 유사한 기능입니다. 다른 점은 다른 홈페이지 또는 워드등에서 복사한 내용을 순수한 텍스트로 붙여넣고자 할때 사용합니다. 워드나 홈페이지의 내용을 복사하는 경우는 텍스트만 복사되는게 아니라 HTML코드가 복사됩니다. 이렇게 복사된 내용을 그냥 [붙여넣기]를 하면 HTML 코드가 지저분하게 붙여지기 때문에 가급적 [텍스트로 붙여넣기]를 사용하기를 권장합니다.
단축키 ctrl+shift+v

모두 선택

에디터 내용을 모두 선택합니다.
단축키 ctrl+a

형식 지우기

워드 내용이나 홈페이지의 내용을 복사하는 경우, 실제로는 HTML 코드로 변환된 내용이 복사됩니다. 이걸 붙여넣기 하는 경우 현재 사이트에서는 사용하지 않는 style, class 및 속성도 그대로 따라 붙여지게 되는데요, 이러한 불필요하게 붙여진 스타일 및 속성을 제거할때 사용합니다.
형식을 지우고 싶은 영역을 마우스 드래그로 선택 반전 시킨후 [형식 지우기]를 클릭하면 해당 선택영역에서는 style, clsss 및 속성값이 모두 지워진 순수한 HTML 코드로만 구성되게 됩니다.

일련의 목차를 만들때 사용합니다. 일련번호로 시작하는 목차 또는 기호로 시작하는 목차를 생성할 수 있습니다. enter를 눌러 목차를 추가할 수 있습니다. 목차를 끝내려 할때는 마지막 빈 목차에서 다시한번 enter를 누르면 목차의 끝으로 인식합니다. 만약 하나의 목차에서 줄바꿈이 되기를 원하면 shift+enter를 누르면 됩니다.
목차 내에서 하위 목차를 만들려면 원하는 목차에서 [들여쓰기]아이콘을 클릭하면 됩니다.

들여쓰기/내어쓰기

단락의 좌측여백을 조정 합니다. [목록]영역에서 [들여쓰기] 또는 [내어쓰기]를 클릭 시에는 목록의 깊이를 조절할 수 있습니다.

정렬 및 맞춤

선택한 내용의 좌우 정렬을 설정합니다. [양쪽 맞춤]을 하는 경우는 여러 줄에 걸쳐 자동 줄바꿈이 된 단락의 텍스트를 좌측 및 우측에도 세로 글자선을 맞춥니다. 이 경우 글자 간격은 자동으로 조정 됩니다.
하나의 이미지에 대해 정렬할때는 이미지 자체를 클릭해서는 정렬할 수 없습니다. 이때는 이미지 좌측 또는 우측에 space로 공백을 만든 후, 이미지 및 공백까지 같이 선택 후 정렬할 수 있습니다.

링크 삽입 및 지우기

선택한 영역(텍스트 및 이미지)에 링크를 추가하거나 제거합니다. 영역을 선택하지 않고 링크를 추가하는 경우에는 링크 URL 자체가 링크 텍스트로 추가됩니다.

URL : 링크 클릭 시 이동할 주소를 직접 입력하거나 우측의 지구본 아이콘을 클릭하여 빌더상의 페이지를 지정하거나, [서버탐색]을 눌러 홈페이지상에 있는 특정 페이지를 선택할 수 있습니다.
버튼스타일 : 텍스트에 링크를 지정 시 버튼 모양으로 링크를 구성할 수 있습니다.
탭 순서 : tab키로 페이지 내의 링크를 이동 시 순서를 지정할 수 있습니다.
강제 다운로드 : 이미지나 압축파일,pdf 등으로 URL 지정 시 브라우저 내에서 열리지 않고 강제로 다운로드 받게 할때 사용합니다.

책갈피 삽입

링크 URL을 #anchor_name 또는 /page.php?#anchor_name 처럼 링크 지정 시 해당 페이지 내에서 이동 될 지점을 설정합니다.
가령 "책갈피 이름"을 "content1" 이라고 지정하면, 실제로는 <a id="content1" name="content1"></a> 같은 HTML 코드가 커서가 위치한 곳에 삽입됩니다. 그다음 링크를 #content1 처럼 지정 시 같은 페이지에서 해당 책갈피가 삽입된 위치까지 자동 스크롤되어 보이게 됩니다.
한 페이지에서 "책갈피 이름"은 중복되어 사용될 수 없습니다.

템플릿

미리 정의해놓은 레이아웃을 추가합니다.

반응형 텍스트 : 제목, 부제목, 내용으로 구성된 레이아웃을 추가합니다. 브라우저의 넓이가 768픽셀보다 작아지는 경우 폰트의 크기를 절반크기로 자동 줄어들게 됩니다.
Alert 박스 : 상황에 맞는 박스를 보여줍니다. 박스 우측에는 박스를 닫을 수 있는 종료 버튼도 자동 추가됩니다.
Table : 기타 Table 태그로 구성된 몇가지 레이아웃을 삽입할 수 있습니다. 가급적 해당 템플릿 보다는 [부트스트랩 그리도 추가]를 이용하여 반응형으로 단을 구성하기를 권장합니다.

부트스트랩 그리드 추가

웹브라우저의 넓이 조건에 따라 반응형으로 보여줄 레이아웃을 생성합니다.
그리드 생성 후 원하는 칼럼에서 마우스 오른쪽 클릭하여 나오는 메뉴중 "...Div (Grid 설정)" 메뉴에서 앞/뒤 칼럼을 추가/삭제 가능합니다.
또한 "...Div (Grid 설정) / Div편집" 메뉴에서 브라우저 넓이별 셀의 반응형 조건을 설정할 수 있습니다.
브라우저 넓이별 그리드 칼럼 조건을 확인하시려면, 에디터창의 넓이를 조절해보세요.

탭 메뉴

패널 및 패널 그룹

풍선 도움말 추가

표 삽입

참고로 부트스트랩 반응형 테이블 체크를 한 경우 첫행 머리칸은 자동 줄바꿈이 되지 않습니다.

이미지

대체 문자열 : 화면으로 보이는 차이는 없으나, 검색로봇이나 화면리더기에서 읽을 수 있는 해당 이미지에 대한 설명을 지정합니다.
정렬 : 기본적으로 이미지와 텍스트가 한줄에 같이 있는 경우, 이미지와 텍스트의 높이에 차이가 생깁니다. 정렬을 함으로써 이미지를 둘어싼채로 텍스트를 여러줄에 걸쳐 보여줄 수 있습니다.
둥근 모서리 : 이미지 모서리를 둥글게 할 수 있습니다. px(픽셀)단위로 숫자만 입력하세요.
보조 제목 : "대체 문자열"과 달리 이미지에 마우스 오버시 보여지는 문구를 지정합니다.
웹 주소 설명 : 해당 이미지에 대한 자세한 설명을 갖고 있는 URL 이나 파일의 경로를 지정할 수 있습니다. HTML5 표준 속성은 아닙니다.

넓이 지정을 하지 않은 이미지는 [이미지 넓이 자동조절] 옵션 체크 시 자동으로 리사이징 됩니다.

이미지 박스

[이미지박스/갤러리] 모듈을 웹에디터 내에서 바로 삽입할 수 있습니다.

플래시

플래시를 등록합니다. 플래시는 스마트폰에서는 대부분 지원하지 권장하지 않습니다.

비디오/오디오 삽입

미디어 URL : 실제 동영상,음악파일 및 FLV 파일의 경로를 지정하거나 Youtube,Vimeo 동영상의 URL을 지정할 수 있습니다. 모든 브라우저에에서 보이게 하려면 동영상 포맷은 .mp4를 권장합니다. 동영상은 가급적 Youtube 등에 올려놓고 해당 URL을 지정하는 방법을 권장합니다. 그래야 홈페이지의 트래픽 유발을 방지할 수 있으며, 스마트폰을 포함한 모든 장치에서 정상적으로 플레이 가능합니다.
포스터 : 동영상 초기화면용 이미지. 동영상파일 직접 지정시에만 적용됩니다.
넓이 : 동영상의 넓이를 지정합니다. 미 지정시 기본 100%로 보여줍니다.
Autostart : 동영상을 자동으로 재생합니다.
Loop : 동영상을 반복해서 재생합니다.

해당 위젯은 등록 시 "[[media src=https://www.youtube.com/edit?o=U&video_id=rRaNzXbWZQg]]" 처럼 숏코드 형식으로 등록됩니다. 에디터 환경에서 동영상을 바로 확인할 순 없지만, 완료 후에는 해당 숏코드가 동영상으로 대치되어 보입니다.

지도

[잡동사니/지도] 모듈을 웹에디터 환경에서 바로 등록할 수 있게 해줍니다.

가로 줄 삽입

단순히 내용과 내용을 구분하기 위한 가로선을 추가할 수 있습니다.

아이콘 삽입

부트스트랩 제공 기본 아이콘 및 HTML 특수기호를 쉽게 등록할 수 있습니다. 텍스트기반 아이콘이므로 아이콘의 색상 및 크기를 자유롭게 설정할 수 있습니다.
아이콘의 색상 및 크기를 설정시에는 아이콘 자체를 선택하지 마시고, 반드시 아이콘 상단의 [+] 표시를 선택한 후 설정하셔야 합니다.

Iframe 삽입

문서내에서 다른 HTML문서를 보여주고자 할때 사용합니다.

인용 단락

해당 내용을 인용문으로 인식시킵니다. 자동으로 왼쪽 들여쓰기 되어 보입니다.

스타일 선택

Main Title : "제목"에 해당하는 내용을 넣기에 적당한 스타일을 적용합니다.
Sub Title : "부제목"에 해당하는 내용을 적이에 적당한 스타일을 적용합니다.
Box : 옅은 회색배경에 테두리가 있는 박스를 생성합니다.
Rounded Box : 옅은 회색배경에 둥근 모서리의 테두리가 있는 박스를 생성합니다.
Screen Reader Only : 투명한 배경의 박스를 생성합니다. 해당 박스에 등록하는 내용은 실제 화면에서는 보이지 않습니다. 검색로봇이나 화면 리더기에게 내용을 전달하기 위한 용도로 사용하면 됩니다.
Word Break All : 선택한 텍스트에 줄바꿈이 발생하는 경우 문자 단위에서 줄바꿈이 이루어지게 합니다.
Word Keep All : 선택한 텍스트에 줄바꿈이 발생하는 경우 단어 단위에서 줄바굼이 이루어지게 합니다. 즉, 단어가 잘리지 않고 공백이 있는곳에서 줄바꿈이 이루어집니다.
Nowrap : 자동 줄바꿈이 이루어지지 않고 한줄에 이어서 나오게 합니다.
Marker : 선택한 영역의 배경색을 노란색으로 칠합니다.
Label : 선택한 색상으로 둥근모서리의 배경색을 칠합니다.
Computer Code : <code> 태그를 추가하여 컴퓨터 코드와 같은 내용이 들어있음을 표시합니다.
Keyboard Phrase : <kbd> 태그를 추가하여 컴퓨터 키보드 단축키와 같은 내용임을 표시합니다.
Sample Text : <samp> 태그를 추가하여 프로그램 출력의 결과물과 같은 내용임을 표시합니다.
Variable : <var> 태그를 추가하여 프로그램 변수와 같은 내용임을 표시합니다.
Deleted Text : <del> 태그를 추가하여 해당 내용이 삭제된 내용임을 표시합니다. 취소선(<s>) 태그와 모양은 같지만 의미가 다릅니다.
Inserted Text : <ins> 태그를 추가하여 해당 내용이 추가된 내용임을 표시합니다. 밑줄(<u>) 태그와 모양은 같지만 의미가 다릅니다.
Cited Work : <cite> 태그를 추가하여 책,노래,영화,예술품의 제목임을 표시합니다.
Inline Quotation : <q> 태그를 추가하여 인용부호를 추가합니다.
Language:RTL : dir="rtl" 속성을 추가하여 해당 텍스트 읽기 방향이 오른쪽에서 왼쪽임을 표시합니다.
Language:LTR : dir="ltr" 속성을 추가하여 해당 텍스트 읽기 방향이 왼쪽에서 오른쪽임을 표시합니다.

문단 형식 선택

본문 : <p> 태그를 추가하여 본문 내용임을 표시합니다.
제목1 ~ 6 : <H1 ~ H6> 태그를 추가하여 헤드 문구임을 표시합니다. H1은 가장 중요한 헤드를 의미하고, H6가 가장 덜 중요한 헤드를 의미합니다.
정형문단 : <pre> 태그를 추가합니다. 텍스트가 고정넓이 폰트(Courier)로 표시되며, 공백 및 줄바꿈 위치가 유지됩니다. 즉, 자동 줄바꿈이 이루어지지 않습니다.
글쓴이 : <address> 태그를 추가하여 저자명이나 연락처(이메일,전화번호,주소등)가 들어있는 내용임을 표시합니다.
기본(DIV) : <div> 태그를 추가 또는 변경하여 문단을 넣을 박스를 설정합니다.

글꼴 선택

선택한 영역의 텍스트 글꼴을 설정합니다. [빌더/작업메뉴/폰트관리]에서 사용자 웹폰트를 추가하여 사용 가능합니다.

글자 크기 선택

선택한 영역의 텍스트 크기를 픽셀(px)단위 또는 뷰포트(vw)단위로 설정합니다.
vw 단위는 웹브라우저 넓이의 100분의 1 단위입니다. 브라우저의 넓이 변화에 따라 글자 크기도 변경하려면 vw 단위로 지정하세요.

글 간격 선택

선택한 영역의 텍스트 글자간 좌우 간격을 설정합니다.

줄 높이 선택

선택한 영역의 텍스트 줄 간격을 설정합니다.

글자 색상

선택한 영역의 텍스트 색상을 설정합니다.

글자 배경 색상

선택한 영역의 텍스트 배경 색상을 설정합니다.

에디터 배경 색상

에디터 화면의 배경색과 입력하는 텍스트의 색상 유사하여 편집이 어려울때 임시로 에디터의 배경색을 다르게 설정할 수 있는 기능입니다.

블록 보기

편집 내용의 태그 속성을 파악하기 위한 옵션입니다.