다음을 참고합니다.

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

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

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

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

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

r-action 컴포넌트

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

기본 구조입니다.

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

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

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

column

row

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

title

href

icon

color

r-banner 컴포넌트

페이지에 배너를 넣을 수 있는 있는 컴포넌트입니다. 배너를 참고합니다.

<r-banner />

r-box 컴포넌트

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

기본 코드입니다.

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

id

title

icon

color

column

row

r-doc 컴포넌트

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

기본 코드입니다.

<r-doc id="e22cc05324e616e8" />

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

id

title

view

icon

color

column

row

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

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

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

r-html 컴포넌트

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

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

title

icon

color

column

row

r-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 태그를 사용할 수 있습니다.

icon

color

column

row

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

id

title

href

r-option 컴포넌트

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

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

name

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" />

r-panel 컴포넌트

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

기본 코드입니다.

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

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

• r-action

• r-box

• r-doc

• r-html

• r-list

• r-tab

icon

color

column

row

r-tab 컴포넌트

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

기본 코드입니다.

<r-tab>
    <r-doc id="ace4a53622b09bde" />
    <r-doc 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-doc

• r-html

• r-list

• r-panel

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

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

column

row

r-text 컴포넌트

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

기본 코드입니다.

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

다음과 같이 나타납니다.

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

title

href

icon

color

column

row

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

style2로 설정하면 다음과 같이 나타납니다.

새 탭 또는 새 창에서 링크 열기

새 탭 또는 새 창에서 링크를 열려면 r-option 컴포넌트로 target 옵션을 _blank로 설정합니다.

<r-option name="target" value="_blank" />