쓰리래빗츠 북 4.0 웹 페이지

머리말

이 책의 내용

웹 페이지는 여러 문서로 쓰리래빗츠 북 도움말 페이지와 같은 대시보드를 구성하거나 CSS로 서식을 직접 수정하는 기능을 제공합니다. <도구 | 1웹 페이지> 메뉴에서 접근합니다.

“서식 만들기” 권한이 있는 사용자만 접근할 수 있습니다.

페이지

페이지 만들기: 페이지를 만드는 방법을 설명합니다.

페이지 공개하기: 페이지를 외부로 공개하는 방법을 설명합니다.

에디터: 에디터로 페이지를 편집하는 방법을 설명합니다.

컴포넌트: 페이지 작성을 할 때 사용할 수 있는 컴포넌트를 설명합니다.

셀 기반 레이아웃: 그리드로 레이아웃을 정하는 방법을 설명합니다.

CSS

로그인 화면 CSS로 꾸미기: 로그인 화면을 CSS로 꾸미는 방법을 설명합니다.

배너 CSS로 꾸미기: 배너를 CSS로 꾸미는 방법을 설명합니다.

웹 테마 CSS로 꾸미기: 웹 테마를 CSS로 꾸미는 방법을 설명합니다.

웹 뷰어 레이아웃 CSS로 꾸미기: 웹 뷰어 레이아웃을 CSS로 꾸미는 방법을 설명합니다.

라이브러리 CSS로 꾸미기: 라이브러리를 CSS로 꾸미는 방법을 설명합니다.

기타 등등

데이터베이스 테이블 정의: 테이블 정의서를 작성할 때 정의서 내용을 구성하는 방법을 설명합니다.

robots.txt 설정하기: robots.txt 파일을 작성하는 방법을 설명합니다.

웹 글꼴 설정하기: 웹 글꼴을 설정하는 방법을 설명합니다.

웹 뷰어 자바스크립트 설정하기: 웹 뷰어 자바스크립트를 설정하는 방법을 설명합니다.

일러두기

다음은 이 책에서 사용한 주요 서식에 대한 설명입니다.

주요 서식

항목

설명

예

강조

강조가 필요한 단어 및 문장은 진하게 표기했습니다.

강조

메뉴, 버튼, 링크

메뉴, 링크, 버튼 등은 앞과 뒤에 <과 >를 넣어 표기했습니다.

<저장>

단축키

키보드에서 동시에 눌러야 하는 단축키는 +로 연결했습니다. 그리고 고정폭 글꼴로 표기했습니다.

Ctrl + I

코드, 파일 이름

코드, 명령어, 파일 이름 등은 고정폭 글꼴로 표기했습니다.

3RABBIZ_HOME

다음과 같이 노트, 팁, 주의를 제공합니다.

노트는 본문에 간단하게 추가할 짧은 설명이나 참조, 논평을 제공하기 위해 사용합니다.

팁은 도움말 등의 팁을 제공하기 위해 사용합니다.

주의는 독자 또는 사용자의 주의를 환기하는 문장을 제공하기 위해 사용합니다.

오류 신고 및 문의

이 책 내용 중 기술적인 오류나, 맞춤법 오류 또는 수정하거나 추가하기 원하는 내용이 있다면 다음 이메일 주소로 보내주세요.

이메일: support@3rabbitz.com

부 I.페이지

1.페이지 만들기

2.페이지 공개하기

3.페이지와 라이브러리

4.에디터

5.컴포넌트

6.셀 기반 레이아웃

1.페이지 만들기

1.1페이지 만들기

다음 순서로 페이지를 만듭니다.

<1웹 페이지 만들기> 링크를 클릭합니다.

유형으로 “2페이지”를 선택한 후 저장합니다.

1.2페이지 삭제

다음 순서로 페이지를 삭제합니다.

삭제한 페이지는 복원할 수 없습니다.

<도구 | 웹 페이지> 메뉴를 선택합니다.

페이지 목록에서 삭제할 페이지의 1버튼()을 클릭합니다.

<2삭제> 링크를 클릭합니다.

2.페이지 공개하기

로그인 없이 페이지를 볼 수 있도록 하려면 다은 순서로 외부에 공개합니다.

<도구 | 웹 페이지> 메뉴를 선택합니다.

페이지 목록에서 공개할 페이지의 1버튼()을 클릭합니다.

<2공개> 링크를 클릭합니다.

고유한 링크를 입력한 후 <저장> 버튼을 클릭합니다.

페이지를 보려면 <3 열기> 링크를 클릭합니다.

3.페이지와 라이브러리

페이지를 라이브러리 아이템으로 추가하면 페이지를 열었을 때 해당 라이브러리가 화면 위에 나타납니다.

한 페이지를 여러 라이브러리에 아이템으로 포함하면 임의의 라이브러리가 나타납니다. 다음 순서로 항상 같은 라이브러리가 나타나게 할 수 있습니다.

<도구 | 웹 페이지> 메뉴를 선택합니다.

페이지 목록에서 라이브러리를 설정할 페이지의 1버튼()을 클릭합니다.

<2웹 페이지 변경> 링크를 클릭합니다.

옵션 패널에서 라이브러리를 선택한 후 <저장> 버튼을 클릭합니다.

4.에디터

4.1기본 기능

웹 페이지 에디터로 HTML, CSS, 자바스크립트, JSON 등을 편집할 수 있습니다. Monaco Editor를 사용합니다. 주요 기능은 다음과 같습니다.

1탐색 패널에서 편집할 웹 페이지를 선택합니다.

2탐색 패널을 닫습니다.

3에디터의 테마로 밝은 것과 어두운 것을 선택합니다.

4수정한 웹 페이지를 표시합니다. 저장을 하려면 <저장> 버튼을 클릭하거나 Ctrl + S 단축키를 사용합니다.

5저장하지 않은 상태에서 다른 웹 페이지를 열 수 있습니다.

4.2리소스 선택

에디터로 편집하면서 문서의 아이디, 그림 주소, 아이콘 아이디, 색상 아이디를 입력해야 합니다. 예를 들어 다음 순서로 페이지의 1r-doc 컴포넌트의 2id 속성 값에 3문서 아이디를 입력합니다.

<4문서> 메뉴를 선택합니다.

문서 패널에서 임의의 5문서를 클릭하면 아이디(edfceb20dafbc8a4)를 클립보드에 복사합니다.

에디터에서 Ctrl + V 단축키로 클립보드에 저장한 값을 id 속성 값을 붙여 넣습니다.

문서 뿐만 아니라 그림, 아이콘, 색 등도 같은 방법으로 설정합니다. 그림은 <올리기> 링크로 사용할 그림을 추가합니다.

머티리얼 디자인에서 제공하는 아이콘과 색을 사용합니다.

4.3컴포넌트 자동 완성

다음 순서로 페이지를 작성할 때 컴포넌트를 자동 완성 기능으로 입력할 수 있습니다.

에디터에서 r 키를 입력합니다.

방향키로 컴포넌트를 선택한 후 Enter 키를 입력합니다.

컴포넌트 태그 안에서 r 키를 입력하면 지원하는 컴포넌트의 속성이 나타납니다.

4.4찾고 바꾸기

Ctrl + F 단축키로 찾고 바꾸기를 합니다.

5.컴포넌트

다음을 참고합니다.

컴포넌트 자동 완성으로 컴포넌트를 입력합니다.

id, icon, color 속성 등은 리소스 선택을 참고해서 입력합니다.

라이브러리가 있을 때는 라이브러리의 테마 색이 color의 기본 값입니다.

style 태그로 CSS를, script 태그로 자바스크립트를 입력할 수 있습니다. 자바스크립트는 특정 라이브러리에 의존하지 않고 작성하는 것을 권장합니다.

r-option 컴포넌트 컴포넌트로 기본 값을 설정하는 것을 권장합니다.

5.1r-action 컴포넌트

버튼을 표시하는 컴포넌트입니다.

기본 구조입니다.

<r-action>
    <r-item title="쓰리래빗츠 Q&A" href="https://www.3rabbitz.com/qna_ko" />
</r-action>

r-item 태그로 버튼을 정의합니다. 여러 r-item 태그를 사용할 수 있습니다.

r-action 태그의 주요 속성입니다.

표 5-1r-action 태그의 주요 속성

속성 이름

설명

icon

아이콘

color

색

column

셀 기반 레이아웃을 참고합니다.

row

r-item 태그의 주요 속성입니다.

표 5-2r-item 태그의 주요 속성

속성 이름

설명

title

버튼 제목

href

버튼을 클릭했을 때 이동할 URL

5.2r-box 컴포넌트

블로그의 포스트와 비디오의 클립을 박스로 표시하는 컴포넌트입니다.

기본 코드입니다.

<r-box id="903844064fd792d2" />

표 5-3r-box 태그의 주요 속성

속성 이름

설명

필수

id

블로그 또는 비디오 문서의 아이디

예

title

생략하면 문서의 제목을 사용합니다.

아니오

icon

아이콘

아니오

color

색

아니오

column

셀 기반 레이아웃을 참고합니다.

row

5.3r-doc 컴포넌트

문서 차례를 보여주는 컴포넌트입니다.

문서 유형이 북과 블로그인 문서만을 지원합니다.

기본 코드입니다.

<r-doc id="e22cc05324e616e8" />

r-doc 태그의 주요 속성입니다.

표 5-4r-doc 태그의 주요 속성

속성 이름

설명

필수

id

북 또는 블로그 문서의 아이디

예

title

생략하면 문서의 제목을 사용합니다.

아니오

view

칼럼 숫자를 설정합니다. 하나의 칼럼을 사용하려면 column1, 두개의 칼럼을 사용하려면 column2, 세개의 칼럼을 사용하려면 column3을 입력합니다. 기본 값은 column3 입니다.

아니오

icon

아이콘

아니오

color

색

아니오

column

셀 기반 레이아웃을 참고합니다.

row

문서에 부가 있을 때 다음 사항을 참고합니다.

부가 있을 때 권두 장과 권말 장은 생략합니다. 단 부록 장은 포함합니다.

부록을 포함하는 부가 없다면 임의의 부를 만들어 부록 장은 포함합니다.

5.4r-html 컴포넌트

임의의 HTML 코드를 넣을 때 사용하는 컴포넌트입니다. 예를 들어 iframe 태그로 유튜브 동영상을 입력할 수 있습니다.

<r-html>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/UuV2BmJ1p_I"></iframe>
</r-html>

표 5-5r-html 태그의 주요 속성

속성 이름

설명

필수

title

제목

아니오

icon

아이콘

아니오

color

색

아니오

column

셀 기반 레이아웃을 참고합니다.

row

5.5r-list 컴포넌트

간단한 목록을 표시하는 컴포넌트입니다.

기본 코드입니다.

<r-list title="주요 문서">
    <r-item id="9dfff04f6103ad37" />
    <r-item title="홈페이지" href="https://www.3rabbitz.com" />
    <r-item title="고객 지원 문의" href="mailto:support@3rabbitz.com" />
</r-list>

r-item 태그로 개별 목록을 정의합니다. 여러 r-item 태그를 사용할 수 있습니다.

표 5-6r-list 태그의 주요 속성

속성 이름

설명

필수

icon

아이콘

아니오

color

색

아니오

column

셀 기반 레이아웃을 참고합니다.

row

r-item 태그의 주요 속성입니다.

표 5-7r-item 태그의 주요 속성

속성 이름

설명

필수

id

문서 아이디 또는 장과 단락의 아이디

아니오

title

목록 제목. 값이 없으면 id에 해당하는 문서의 제목을 보여주거나 href 속성 값을 대신 사용합니다.

아니오

href

목록을 클릭했을 때 이동할 URL

아니오

id 또는 href 중 하나만을 설정합니다.

5.6r-option 컴포넌트

기본 옵션을 설정하는 컴포넌트입니다. 다른 컴포넌트와 달리 화면에 나타나지 않습니다.

<r-option name="color" value="black" />
<r-option name="icon" value="cloud" />

표 5-8r-option 태그의 주요 속성

속성 이름

설명

필수

name

옵션 이름으로 color, icon, column, row 등을 입력합니다.

예

value

옵션 값

예

r-option으로 설정한 값은 그 다음에 나오는 컴포넌트에만 유효합니다. 다음과 같이 row 기본 값을 설정할 수 있습니다.

<!-- 첫 번째 줄(row의 기본 값이 1이기 때문에 설정할 필요 없음) -->
<!--
<r-option name="row" value="1" />
-->

<r-doc id="edfceb20dafbc8a4" column="1" />
<r-doc id="9571344aa3e73341" column="2" />

<!-- 두 번째 줄 -->
<r-option name="row" value="2" />

<r-doc id="7be70d99072cb81e" column="1" />
<r-doc id="0168a36b30c18e93" column="2" />

5.7r-panel 컴포넌트

r-tab 컴포넌트와 함께 다른 컴포넌트를 묶는 컴포넌트입니다. 셀 기반 레이아웃에서 한 셀에 여러 컴포넌트를 배치할 때 사용합니다.

기본 코드입니다.

<r-panel>
    <r-document id="ace4a53622b09bde" />
    <r-box id="903844064fd792d2" />
    <r-tab>
        <r-document id="ace4a53622b09bde" />
        <r-document id="e2e40b58a7b2ed6f" />
    </r-tab>
</r-panel>

r-panel 컴포넌트는 하나 이상의 하위 컴포넌트가 있어야 합니다. 다음 컴포넌트가 r-panel 컴포넌트 아래에 올 수 있습니다.

r-action

r-box

r-document

r-html

r-list

r-tab

표 5-9r-panel 태그의 주요 속성

속성 이름

설명

필수

icon

아이콘

아니오

color

색

아니오

column

셀 기반 레이아웃을 참고합니다.

row

5.8r-tab 컴포넌트

r-panel 컴포넌트와 함께 다른 컴포넌트를 묶는 컴포넌트입니다. 여러 컴포넌트를 탭으로 표시합니다.

기본 코드입니다.

<r-tab>
    <r-document id="ace4a53622b09bde" />
    <r-document id="e2e40b58a7b2ed6f" />
    <r-box id="903844064fd792d2" />
    <r-html title="탭 제목">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/UuV2BmJ1p_I"></iframe>
    </r-html>
</r-tab>

r-tab 컴포넌트는 하나 이상의 하위 컴포넌트가 있어야 합니다. 다음 컴포넌트가 r-tab 컴포넌트 아래에 올 수 있습니다.

r-box

r-document

r-html

r-list

r-panel

r-html과 r-list와 r-panel 컴포넌트는 title 속성으로 제목을 설정해야 합니다.

하위 컴포넌트에서 selected 속성으로 기본 탭을 설정할 수 있습니다.

<r-tab>
    <r-document id="ace4a53622b09bde" />
    <r-document id="e2e40b58a7b2ed6f" selected="true" />
    <r-box id="903844064fd792d2" />
</r-tab>

표 5-10r-tab 태그의 주요 속성

속성 이름

설명

필수

column

셀 기반 레이아웃을 참고합니다.

row

5.9r-text 컴포넌트

텍스트 설명을 표시하는 컴포넌트입니다.

기본 코드입니다.

<r-text title="설치 가이드" href="/book_installation_guide_4_0_ko" icon="swap_calls" color="orange">
    <b>자바 8</b> 이상을 지원하는 윈도우와 리눅스 등에 쓰리래빗츠 북을 설치할 수 있습니다.
</r-text>

다음과 같이 나타납니다.

r-text 태그의 주요 속성입니다.

표 5-11r-text 태그의 주요 속성

속성 이름

설명

필수

title

제목

예

href

링크 주소

아니오

icon

아이콘

아니오

color

색

아니오

column

셀 기반 레이아웃을 참고합니다.

row

내용은 <r-text></r-text> 태그 안에 입력합니다.

6.셀 기반 레이아웃

6.1column과 row 속성으로 컴포넌트 배치하기

화면을 가상의 컬럼으로 나눠 각 셀에 컴포넌트를 배치합니다. 전체 셀의 크기는 모든 컴포넌트의 column과 row 속성의 최대 값으로 결정합니다. 예를 들어 열이 3, 행이 4인 레이아웃이 있습니다.

column 속성은 왼쪽부터 1에서 시작합니다. row 속성은 위부터 1에서 시작합니다.

색칠한 셀에 컴포넌트를 배치하려면 column과 row 값을 다음과 같이 설정합니다.

<r-doc id="3e005ee60edcc72d" column="1" row="1" />

특정 행에 컴포넌트를 배치하지 않으면 해당 행의 높이가 0이기 때문에 화면에서 공간을 차지하지는 않습니다.

색칠한 셀에 컴포넌트를 배치하려면 column과 row 값을 다음과 같이 설정합니다.

<r-doc id="3e005ee60edcc72d" column="3" row="4" />

여러 열에 하나의 컴포넌트를 배치할 수 있습니다. 색칠한 셀에 컴포넌트를 배치하려면 column과 row 값을 다음과 같이 설정합니다.

<r-doc id="3e005ee60edcc72d" column="1-3" row="3" />

column 속성에 -를 구분자로 시작 열과 끝 열을 설정합니다.

여러 행에 하나의 컴포넌트를 배치할 수 있습니다. 색칠한 셀에 컴포넌트를 배치하려면 column과 row 값을 다음과 같이 설정합니다.

<r-doc id="3e005ee60edcc72d" column="1" row="2-3" />

row 속성에 -를 구분자로 시작 행과 끝 행을 설정합니다.

여러 열과 여러 행에 하나의 컴포넌트를 배치할 수 있습니다. 색칠한 셀에 컴포넌트를 배치하려면 column과 row 값을 다음과 같이 설정합니다.

<r-doc id="3e005ee60edcc72d" column="1-2" row="3-4" />

row 속성에 -를 구분자로 시작 행과 끝 행을 설정합니다.

6.2참고 사항

컴포넌트 안에서는 셀 기반 레이아웃을 지원하지 않습니다. 예를 들어 r-panel과 r-tab 컴포넌트 아래에 있는 컴포넌트의 column과 row 속성은 무시합니다.

모든 칼럼의 너비는 같습니다. 페이지 너비를 열의 숫자로 나눈 값이 칼럼 너비의 값입니다.

행의 높이는 그 행에 있는 컴포넌트의 높이가 결정합니다. 따라서 각 행의 높이는 다릅니다.

셀 기반 레이아웃을 사용하려면 일반 HTML 코드를 r-html 컴포넌트로 작성합니다.

부 II.CSS

7.로그인 화면 CSS로 꾸미기

8.배너 CSS로 꾸미기

9.웹 테마 CSS로 꾸미기

10.웹 뷰어 레이아웃 CSS로 꾸미기

11.라이브러리 CSS로 꾸미기

7.로그인 화면 CSS로 꾸미기

웹 페이지를 이용해 로그인 화면을 꾸밉니다. 다음 순서로 로그인 CSS를 설정합니다.

<도구 | 웹 페이지> 메뉴로 이동합니다.

탐색 패널에서 CSS 아래에 있는 “1로그인 CSS”를 선택합니다.

CSS를 설정한 후 저장합니다.

예를 들어 배경 색과 그림을 넣으려면 다음과 같이 CSS를 입력합니다.

body {
  background: rgb(250, 250, 250) url(/r/image/get/d71a65386e9d6801) no-repeat;
}

url에 들어갈 이미지는 외부 경로를 사용하거나, 에디터 오른쪽 위에 있는 <1그림> 메뉴를 선택한 후 <2올리기> 링크로 추가합니다.

<3경로 복사> 링크를 클릭하거나 그림을 클릭하면 그림 주소를 클립보드에 복사합니다. 클립보드에 복사한 그림 주소를 Ctrl + V 단축키로 에디터에 붙여넣습니다.

8.배너 CSS로 꾸미기

CSS를 이용해 웹 뷰어와 로그인 화면의 배너를 꾸밉니다. 다음 순서로 배너 CSS를 설정합니다.

<도구 | 웹 페이지> 메뉴로 이동합니다.

탐색 패널에서 CSS 아래에 있는 “1배너 CSS”를 선택합니다.

CSS를 설정한 후 저장합니다.

주요 CSS 선택자는 다음과 같습니다.

CSS 선택자

설명

.r_banner

배너의 배경과 테두리를 설정합니다.

.r_banner h1

배너 이름을 설정합니다.

.r_banner p

배너 내용을 설정합니다.

9.웹 테마 CSS로 꾸미기

9.1CSS 웹 페이지 만들기

다음 순서로 CSS 웹 페이지를 만듭니다.

<도구 | 웹 페이지> 메뉴로 이동합니다.

<1웹 페이지 만들기> 버튼을 누릅니다.

유형으로 “2CSS”를 선택한 후 저장합니다.

9.2CSS 설정

다음 순서로 웹 테마에 CSS를 설정합니다.

<서식 | 테마> 메뉴로 이동합니다.

CSS를 설정할 웹 테마를 선택합니다.

<테마 변경> 링크를 누릅니다.

CSS를 선택한 후 저장합니다.

9.3CSS 편집

9.3.1문자 유형

코드 문자 유형에 대해서 다음과 같이 다양한 CSS를 설정할 수 있습니다.

code {
  background-color: rgb(240, 240, 240);
  border: 1px solid rgb(204, 204, 204);
  border-radius: 3px;
  padding: 0 3px;
}

문자 유형에 따른 CSS 선택자는 다음과 같습니다.

표 9-1문자 유형 CSS 선택자

문자 유형

선택자

매우 강조

strong

강조

em

코드

code

키보드

kbd

인라인 주석

small

아래 첨자

sub

위 첨자

sup

삭제

del

콜아웃

span.callout

링크

a

9.3.2단락 유형

노트 단락 테두리를 둥글게 처리하려면 다음과 같이 합니다.

div.note {
  border-radius: 8px;
}

팁과 주의 단락도 함께 처리할 수 있습니다.

div.note, div.tip, div.caution {
  border-radius: 8px;
}

텍스트 단락과 관련한 CSS 선택자는 다음과 같습니다.

표 9-2텍스트 단락 CSS 선택자

단락 유형

선택자

보통

p.normal

제목 1

h1.heading1

제목 2

h2.heading2

제목 3

h3.heading3

제목 4

h4.heading4

제목 5

h5.heading5

헤드라인

p.headline

코드

pre.code

명령어

pre.command

줄 바꿈 유지

pre.pre

블럭 인용구

blockquote.blockquote

권두 명구

blockquote.epigraph

순서 목록

ol.ordered_list

비순서 목록

ul.unordered_list

정의 목록

dl.definition_list

콜아웃 목록

div.callout_list

단계

div.step1

노트

div.note

팁

div.tip

주의

div.caution

그림 단락과 관련한 CSS 선택자는 다음과 같습니다.

표 9-3그림 단락 CSS 선택자

그림 단락 유형

선택자

그림 단락

div.image

그림 제목

div.image .caption

그림 제목 번호

span.image_caption_n

그림

div.image .content

표 단락과 관련한 CSS 선택자는 다음과 같습니다.

표 9-4표 단락 CSS 선택자

표 단락 유형

선택자

표 단락

table.table

표 제목

table.table caption

표 제목 번호

span.table_caption_n

객체 단락과 관련한 CSS 선택자는 다음과 같습니다.

표 9-5객체 단락 CSS 선택자

객체 단락 유형

선택자

수평선

hr.horizontal_line

9.3.3사용자 스타일 유형

사용자 스타일 유형과 관련한 CSS 선택자는 다음과 같습니다.

표 9-6사용자 스타일 유형 CSS 선택자

사용자 스타일 유형

선택자

보통

p.key

코드

pre.key

정의 목록

dl.key

박스

div.key

표

table.key

문자 유형

span.key

key에 해당하는 값은 사용자 스타일 유형 화면에서 확인할 수 있습니다.

10.웹 뷰어 레이아웃 CSS로 꾸미기

10.1CSS 웹 페이지 만들기

다음 순서로 CSS 웹 페이지를 만듭니다.

<도구 | 웹 페이지> 메뉴로 이동합니다.

<1웹 페이지 만들기> 버튼을 누릅니다.

유형으로 “2CSS”를 선택한 후 저장합니다.

10.2CSS 설정

다음 순서로 웹 뷰어 레이아웃에 CSS를 설정합니다.

<서식 | 웹 뷰어 레이아웃> 메뉴로 이동합니다.

CSS를 설정할 웹 뷰어 레이아웃을 선택합니다.

<웹 뷰어 레이아웃 변경> 링크를 누릅니다.

CSS를 선택한 후 저장합니다.

11.라이브러리 CSS로 꾸미기

11.1CSS 웹 페이지 만들기

다음 순서로 CSS 웹 페이지를 만듭니다.

<도구 | 웹 페이지> 메뉴로 이동합니다.

<1웹 페이지 만들기> 버튼을 누릅니다.

유형으로 “2CSS”를 선택한 후 저장합니다.

11.2CSS 설정

다음 순서로 라이브러리에 CSS를 설정합니다.

<도구 | 라이브러리> 메뉴로 이동합니다.

CSS를 설정할 라이브러리를 선택합니다.

<라이브러리 변경> 링크를 누릅니다.

CSS를 선택한 후 저장합니다.

부 III.기타 등등

12.데이터베이스 테이블 정의

13.robots.txt 설정하기

14.웹 글꼴 설정하기

15.웹 뷰어 자바스크립트 설정하기

12.데이터베이스 테이블 정의

12.1JSON으로 칼럼 정의하기

외부 시스템으로 테이블 정의서를 작성할 때 테이블 정의서에서 칼럼의 어떤 속성을 보여줄 것인가를 웹 페이지로 설정합니다.

<도구 | 웹 페이지> 메뉴를 선택합니다.

탐색 패널에서 JSON 아래에 있는 “ES_TABLE”를 선택해서 에디터를 엽니다.

내용을 입력한 후 저장합니다.

저장과 함께 실시간으로 반영합니다.

별도로 설정하지 않으면 기본 설정을 따릅니다. 기본 설정은 다음과 같습니다.

{
    "columns": [
        {
            "key": "COLUMN_NAME",
            "name": {
              "en": "Name",
              "ko": "이름"
            }
        },
        {
            "key": "TYPE_NAME",
            "name": {
              "en": "Type",
              "ko": "유형"
            }
        },
        {
            "key": "COLUMN_SIZE",
            "name": {
              "en": "Size",
              "ko": "크기"
            },
            "align": "right"
        },
        {
            "key": "COLUMN_DEF",
            "name": {
              "en": "Default",
              "ko": "기본값"
            }
        },
        {
            "key": "IS_NULLABLE",
            "name": {
              "en": "Nullable",
              "ko": "NULL 허용"
            }
        },
        {
            "key": "@ALL",
            "name": {
              "en": "Constraint & Index",
              "ko": "제약 조건과 인덱스"
            }
        },
        {
            "key": "#DESCRIPTION",
            "name": {
              "en": "Description",
              "ko": "설명"
            },
            "code": false
        }
    ],
    "option": {
      "tableLayout": "20%,10%,10%,10%,10%,20%,20%"
    }
}

12.2key 속성

첫 번째로 JDBC API가 제공하는 표준 칼럼 속성을 키로 사용합니다.

키

유형

설명

TABLE_CAT

문자열

테이블 카탈로그

TABLE_SCHEM

문자열

테이블 스키마

TABLE_NAME

문자열

테이블 이름

COLUMN_NAME

문자열

칼럼 이름

DATA_TYPE

숫자

java.sql.Types의 SQL 데이터 형식.

TYPE_NAME

문자열

데이터 형식의 이름

COLUMN_SIZE

숫자

칼럼의 자릿수

BUFFER_LENGTH

숫자

데이터의 전송 크기

DECIMAL_DIGITS

숫자

칼럼의 소수 자릿수

NUM_PREC_RADIX

숫자

칼럼의 기수

NULLABLE

숫자

칼럼이 null을 허용하는지 여부. 0이면 null을 허용하지 않고, 1이면 null을 허용합니다.

REMARKS

문자열

칼럼과 관련된 설명

COLUMN_DEF

문자열

칼럼 기본 값

SQL_DATA_TYPE

숫자

SQL_DATETIME_SUB

숫자

CHAR_OCTET_LENGTH

숫자

열의 최대 바이트 수

ORDINAL_POSITION

숫자

테이블 내의 열 인덱스

IS_NULLABLE

문자열

열에 null 값을 사용할 수 있는지 여부

SCOPE_CATALOG

문자열

참조하는 칼럼의 카탈로그. 참조하지 않는다면 null을 반환합니다.

SCOPE_SCHEMA

문자열

참조하는 칼럼의 스키마. 참조하지 않는다면 null을 반환합니다.

SCOPE_TABLE

문자열

참조하는 칼럼의 테이블. 참조하지 않는다면 null을 반환합니다.

SOURCE_DATA_TYPE

숫자

IS_AUTOINCREMENT

문자열

값을 자동으로 증가하는지 여부. YES 또는 NO를 반환합니다. 판단할 수 없으면 빈 값을 반환합니다.

IS_GENERATEDCOLUMN

문자열

값을 자동으로 계산하는지 여부. YES 또는 NO를 반환합니다. 판단할 수 없으면 빈 값을 반환합니다.

이 표는 JDBC API 문서를 기준으로 합니다. 데이터베이스와 JDBC 드라이버에 따라 별도의 키를 지원할 수도 있습니다.

칼럼 유형을 표시할 때 DATA_TYPE은 코드 값을 반환하기에 TYPE_NAME을 사용합니다.

{
    "key": "TYPE_NAME",
    "name": "유형"
}

두 번째로 업데이트할 때 쓰리래빗츠 북에서 편집한 내용을 유지할 수 있는 키가 있습니다. 칼럼 속성의 key가 #으로 시작하는 임의의 값을 사용합니다.

{
    "key": "#DESCRIPTION",
    "name": "설명"
}

세 번째로 기본 키(Primary Key), 외래 키(Foreign Key), 인덱스 등의 정보를 제공하는 키가 있습니다. 칼럼 속성의 key가 @으로 시작합니다.

@PK

기본 키 정보를 보여줍니다.

@FK

외래 키 정보를 보여줍니다.

@INDEX

인덱스 정보를 보여줍니다.

@ALL

기본 키, 외래 키, 인덱스 정보를 모두 보여줍니다. 표 너비 제한 때문에 기본 키, 외래 키, 인덱스를 따로 보여주기 어려울 때 사용합니다.

12.3name 속성

name 속성으로 칼럼 속성 이름을 설정합니다. 없으면 key 속성을 이름으로 사용합니다.

{
    "key": "COLUMN_NAME",
    "name": "이름"
}

다양한 언어를 지원해야 한다면 다음과 같이 설정합니다. name 속성 값을 JSON 객체로 설정하고 각 언어를 키로 이름을 설정합니다.

{
    "key": "COLUMN_NAME",
    "name": {
        "ko": "이름",
        "en_US": "Name",
        "ja": "名前",
        "zh_CN": "名称"
    }
}

문서 언어에 따라 이름을 결정합니다.

12.4align 속성

align 속성으로 좌우 정렬 방법을 설정합니다. left, right, center 등을 지원합니다. 기본 값은 left입니다.

{
    "key": "COLUMN_SIZE",
    "align": "right"
}

13.robots.txt 설정하기

robots.txt는 웹 크롤러 등의 로봇들의 접근을 제어하기 위한 설정 파일입니다. 웹 페이지로 쓰리래빗츠 북에서도 설정할 수 있습니다.

<도구 | 웹 페이지> 메뉴를 선택합니다.

탐색 패널에서 TEXT 아래에 있는 “robots”를 선택해서 에디터를 엽니다.

내용을 입력한 후 저장합니다.

내용을 작성하는 방법은 구글의 robots.txt 파일 만들기를 참고합니다.

저장과 함께 실시간으로 반영합니다.

14.웹 글꼴 설정하기

다음 순서로 웹 글꼴을 설정합니다.

1

웹 글꼴 웹 페이지 만들기

<도구 | 웹 페이지> 메뉴로 이동합니다.

<1웹 페이지 만들기> 링크를 클릭합니다.

유형으로 “2웹 글꼴”을 선택한 후 저장합니다.

2

CSS @import 넣기

탐색 패널에서 만든 웹 글꼴을 선택하여 에디터를 엽니다.

웹 글꼴을 가져오는 @import 문을 넣고 저장합니다.

구체적인 내용은 사용하는 웹 글꼴 서비스에 따라 다릅니다.

3

웹 테마에서 웹 글꼴 웹 페이지 설정

<서식 | 테마> 메뉴로 이동합니다.

웹 테마를 선택한 후 <테마 변경> 링크를 누릅니다.

웹 글꼴을 선택한 후 저장합니다.

4

웹 테마에서 글꼴 설정

웹 페이지에서 설정한 웹 글꼴을 웹 테마에서 글꼴을 설정할 때 사용합니다.

미리보기 글꼴이 바뀌지 않으면 웹 브라우저를 새로고침합니다.

15.웹 뷰어 자바스크립트 설정하기

다음 순서로 웹 뷰어에 자바스크립트를 설정합니다.

1

자바스크립트 웹 페이지 만들기

<도구 | 웹 페이지> 메뉴로 이동합니다.

<1웹 페이지 만들기> 링크를 클릭합니다.

유형으로 “2자바스크립트”를 선택한 후 저장합니다.

2

자바스크립트 코드 작성

탐색 패널에서 만든 자바스크립트를 선택하여 에디터를 엽니다.

자바스크립트를 입력한 후 저장합니다.

자바스크립트는 window 객체에 _listener 객체를 설정하는 방법으로 작성합니다. 이 객체에 필요한 이벤트 함수를 추가합니다.

window._listener = {

    load: function(documentId) {
    },

    unload: function(documentId) {
    },

    documentLoaded: function(documentId) {
    },

    chapterLoaded: function(chapterId) {
    },

    chapterChanged: function(chapterId) {
    }

};

모든 이벤트 함수를 추가할 필요는 없습니다. 필요한 이벤트 함수만을 추가합니다.

함수

파라미터

설명

load

documentId: 문서 아이디

웹 뷰어를 시작할 때 한번 호출합니다.

unload

documentId: 문서 아이디

웹 뷰어를 떠날 때 한번 호출합니다.

documentLoaded

documentId: 문서 아이디

차례를 포함한 문서를 로드한 후 한번 호출합니다.

chapterLoaded

chapterId: 장 아이디

서버에서 장을 가져온 이후에 호출합니다. 장마다 한번 호출합니다. chapterId가 없을 때는 메인 화면을 의미합니다.

chapterChanged

chapterId: 장 아이디

장을 바꿀 때 호출합니다. chapterId가 없을 때는 메인 화면을 의미합니다.

chapterLoaded는 장을 서버에서 가져올 때만 호출합니다. chapterChanged는 사용자가 차례에서 장을 바꿀 때마다 호출합니다. 따라서 A라는 장을 처음 열면 chapterLoaded와 chapterChanged를 호출합니다. 사용자가 B라는 장을 선택하면 다시 chapterLoaded와 chapterChanged를 호출합니다. 그리고 A를 다시 선택하면 이 때는 chapterChanged만 호출합니다.

특정 자바스크립트 라이브러리를 사용하지 않는 것을 권장합니다. 웹 뷰어가 jQuery를 사용하지만 앞으로 바뀔 수 있습니다.

3

웹 뷰어 레이아웃에서 자바스크립트 웹 페이지 설정

<서식 | 웹 뷰어 레이아웃> 메뉴로 이동합니다.

웹 뷰어 레이아웃을 선택한 후 <웹 뷰어 레이아웃 변경> 링크를 누릅니다.

자바스크립트를 선택한 후 저장합니다.