라이브러리 메인 페이지를 웹 페이지를 이용해서 설정하는 방법을 설명합니다. 예를 들어 다음과 같은 메인 페이지를 만들 수 있습니다.

페이지 구성

페이지 만들기

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

1. <도구 | 웹 페이지> 메뉴를 클릭합니다.

2. 웹 페이지 1추가 버튼을 클릭합니다.

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

4. 2페이지 메뉴 아래에서 웹 페이지를 선택한 후 편집합니다.

라이브러리 메인 페이지 설정

라이브러리에 메인 페이지를 설정하는 방법입니다.

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

2. 라이브러리를 선택한 후 <라이브러리 변경> 링크를 클릭합니다.

3. 1메인 페이지를 선택한 후 저장합니다.

페이지 컴포넌트

다양한 태그로 페이지를 구성할 수 있습니다.

r-action

r-box

r-doc

r-html

r-list

r-panel

r-tab

r-action 컴포넌트

버튼을 표시하는 컴포넌트입니다. r-item 태그로 버튼을 정의합니다. 여러 r-item 태그를 사용할 수 있습니다.

기본 구조입니다.

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

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

column

row

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

title

href

color

blue

icon

r-box 컴포넌트

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

기본 코드입니다.

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

id

title

count

3

color

brown

icon

column

row

r-doc 컴포넌트

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

기본 코드입니다.

<r-doc id="00d54d1b9f9cc0be" color="black" icon="arrow_drop_down" view="column3" />

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

id

title

color

brown

icon

view

column1

column

row

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

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

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

r-html 컴포넌트

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

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

title

column

row

r-list 컴포넌트

간단한 목록을 표시하는 컴포넌트입니다. r-item 태그로 개별 목록을 정의합니다.

기본 코드입니다.

<r-list title="주요 문서" color="red" icon="list">
  <r-item id="e22cc05324e616e8" />
  <r-item id="903844064fd792d2" title="블로그" />
  <r-item title="페이스북" href="https://www.facebook.com/3rabbitz" />
</r-list>

title

color

brown

icon

column

row

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

id

title

href

r-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

title

color

brown

icon

column

row

r-tab 컴포넌트

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

기본 코드입니다.

<r-tab color="green">
  <r-doc id="00d54d1b9f9cc0be" view="column3" />
  <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>

color

brown

column

row

그리드 레이아웃

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

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

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

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

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

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

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

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

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

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

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

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

색상과 아이콘

구글 머티리얼 디자인의 색상과 아이콘을 지원합니다. color 속성은 다음 값을 지원합니다.

• red

• pink

• purple

• deep_purple

• indigo

• blue

• light_blue

• cyan

• teal

• green

• light_green

• lime

• yellow

• amber

• orange

• deep_orange

• brown

• grey

• blue_grey

• black

icon 속성에는 머티리얼 아이콘의 이름을 설정합니다. 다음에서 전체 아이콘을 확인할 수 있습니다.

예를 들어 alarm 아이콘을 사용하려면 해당 이름을 icon 속성에 설정합니다.

<r-doc id="00d54d1b9f9cc0be" color="black" icon="1alarm" />

참고 사항

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

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

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

• 일반 HTML 코드는 r-html 컴포넌트로만 사용할 수 있습니다. 나머지는 무시합니다.