주요 웹 페이지 객체의 HTML 코드는 다음과 같습니다. 이 HTML 코드를 참고로 CSS를 설정합니다.

검색 폼

검색 폼 HTML 코드는 다음과 같습니다.

<form class="rabbitz_search_form" action="...">
  <div>
    <input name="query" type="text" placeholder="검색">
    <button type="submit"></button>
  </div>
</form>

검색 폼 기본 CSS는 다음과 같습니다.

.rabbitz_search_form {
  margin: 0 0 0 auto;
  position: relative; 
  width: 28em;
}

.rabbitz_search_form div {
  background-color: white;
  border: 2px solid rgb(255, 155, 0);
  border-radius: 16px;
  margin: 0.5em 0 0 auto;
  padding: 0.3em 0.8em;
}

.rabbitz_search_form input {
  border: 0;
  color: rgb(255, 149, 64);
  font-size: 14px;
  width: 90%;
}

.rabbitz_search_form input:focus {
  outline: 0;
}

.rabbitz_search_form button {
  background: white url(../image/book/help/search.png) center center no-repeat;
  border: 0;
  color: white;
  cursor: pointer;
  height: 16px;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 15px;
  top: 10px;
  width: 16px;
}

• 검색 버튼은 그림을 이용해야 합니다.

문서 패널 객체

문서 패널 HTML 코드는 다음과 같습니다.

<div class="rabbitz_panel">
  <h1><span>윈도우 설치 가이드</span></h1>
  <div>
    <p>쓰리래빗츠 북을 윈도우 OS에 설치하는 방법입니다.</p>
    <ol>
      <li><a href="...">시스템 요구 사항</a></li>
      <li><a href="...">윈도우 설치 가이드</a></li>
      <li><a href="...">설치 마법사</a></li>
    </ol>
  </div>
</div>

• 비순서 목록을 사용하면 ol 태그 대신에 ul 태그가 나타납니다.

문서 패널 기본 CSS는 다음과 같습니다.

.rabbitz_panel {
  border: 0;
  margin: 0 1em 1em 0;
}

.rabbitz_panel h1 {
  border-bottom: 1px solid rgb(225, 225, 225);
  color: rgb(17, 17, 17);
  font-size: 1.2em;
  margin: 2em 0 1em 0;
}

.rabbitz_panel h1 span {
  border-bottom: 2px solid rgb(100, 100, 100);
}

.rabbitz_panel div p {
  margin: 0 0 1em 0;
}

.rabbitz_panel ul {
  list-style: none;
  margin: 0.5em 0 1em 0.5em;
  padding: 0;
}

.rabbitz_panel li {
  margin: 0.5em 0;
}

.rabbitz_panel ul ul {
  margin-top: 0.3em;
  margin-bottom: 0.5em;
}

.rabbitz_panel ul li {
  background: url(../image/book/page/li_black.png) 0 0.6em no-repeat;
  padding-left: 0.8em;
}

.rabbitz_panel li li {
  background-image: url(../image/book/page/li_gray.png);
}

.rabbitz_panel ol {
  list-style-type: decimal;
  margin: 0.5em 0 1em 2em;
  padding: 0;
}

.rabbitz_panel ol ol {
  list-style-type: circle;
  margin-top: 0.3em;
}

.rabbitz_panel ol ol ol {
  list-style-type: square;
}

그리드 객체

그리드 HTML 코드는 다음과 같습니다.

<div class="rabbitz_grid">
  <h1><span>쓰리래빗츠 북 2.0 설치 가이드</span></h1>
  <div class="rabbitz_grid_panels">
    <div class="rabbitz_panel">
      <h1><span>윈도우 설치 가이드</span></h1>
      <div>
        <ul>
          <li><a href="...">시스템 요구 사항</a></li>
          <li><a href="...">윈도우 설치 가이드</a></li>
          <li><a href="...">설치 마법사</a></li>
        </ul>
      </div>
    </div>
    <div class="rabbitz_panel">
      <h1><span>리눅스/유닉스 설치 가이드</span></h1>
      <div>
        <ul>
          <li><a href="...">시스템 요구 사항</a></li>
          <li><a href="...">리눅스 설치 가이드</a></li>
          <li><a href="...">설치 마법사</a></li>
        </ul>
      </div>
    </div>
    ...
  </div>
</div>

그리드 기본 CSS는 다음과 같습니다.

.rabbitz_grid > p {
  margin-bottom: 1em;
}

.rabbitz_grid h1 {
  border-bottom: 1px solid rgb(225, 225, 225);
  color: rgb(17, 17, 17);
  font-size: 1.2em;
  margin: 2em 0 1em 0;
}

.rabbitz_grid h1 span {
  border-bottom: 2px solid rgb(100, 100, 100);
}

.rabbitz_grid_panels {
  overflow: hidden;
}

.rabbitz_grid .rabbitz_panel {
  background-color: white;
  border: 1px solid rgb(200, 217, 227);
  float: left;
  margin: 0 1em 1em 0;
  padding: 0.8333333333333333em;
  width: 22em;
}

.rabbitz_grid .rabbitz_panel h1 {
  border: 0;
  color: rgb(223, 48, 48);
  font-size: 1em;
  margin: 0;
}

.rabbitz_grid .rabbitz_panel span {
  border: 0;
}

.rabbitz_grid .rabbitz_panel div p {
  margin-left: 0;
}

위치 정보

위치 정보 HTML 코드는 다음과 같습니다.

<ul class="rabbitz_breadcrumb">
  <li class="rabbitz_home">
    <a href="...">도움말 센터</a>
  </li>
  <li class="rabbitz_selected">
    <a href="...">쓰리래빗츠 북 2.0 설치 가이드</a>
  </li>
</ul>

위치 정보 기본 CSS는 다음과 같습니다.

.rabbitz_breadcrumb {
  border-bottom: 1px dotted rgb(205, 205, 205);
  margin-top: -1.5em;
  padding-bottom: 1.166666666666667em;
}

.rabbitz_breadcrumb li {
  background: url(../image/book/help/separator.png) 5px 4px no-repeat;
  display: inline;
  padding-left: 15px;
}

.rabbitz_breadcrumb li a {
  color: rgb(110, 110, 110);
}

.rabbitz_breadcrumb li.rabbitz_selected a {
  color: rgb(239, 64, 54);
  font-weight: bold;
}

.rabbitz_breadcrumb li.rabbitz_home {
  background: url(../image/book/help/home.png) no-repeat;
  padding-left: 16px;
}

도움말 차례

도움말 차례 HTML 코드는 다음과 같습니다.

<div class="rabbitz_navigator">
  <ul>
    <li><a href="...">머리말</a></li>
    <li class="rabbitz_selected"><a href="...">시스템 요구 사항</a></li>
    <li><a href="...">윈도우 설치 가이드</a></li>
    <li class="rabbitz_back"><a href="...">뒤로</a></li>
  </ul>
</div>

도움말 차례 기본 CSS는 다음과 같습니다.

.rabbitz_navigator {
  float: left;
  margin-top: 2.8em;
  width: 30%;
}

.rabbitz_navigator li {
  font-size: 1.05em;
}

.rabbitz_navigator li a {
  border-top: 1px solid transparent;
  border-bottom: 1px solid rgb(242, 242, 242);
  color: rgb(110, 110, 110);
  display: block;
  padding: 0.5em 10% 0.5em 0.5em;
}

.rabbitz_navigator li.rabbitz_selected a,
.rabbitz_navigator li.rabbitz_selected a:hover {
  background-color: rgb(255, 155, 0);
  border-color: rgb(255, 255, 255);
  color: rgb(255, 255, 255);
}

.rabbitz_navigator li.rabbitz_has_children a {
  background: url(../image/book/help/has_children.png) 95% center no-repeat;
}

.rabbitz_navigator li.rabbitz_back a {
  background: url(../image/book/help/back.png) 95% center no-repeat;
}

.rabbitz_navigator li a:hover {
  background-color: rgb(235, 238, 244);
  border-bottom-color: rgb(221, 226, 237);
  color: rgb(59, 89, 152);
  text-decoration: none;
}

내용

내용 HTML 코드는 다음과 같습니다.

<div class="rabbitz_content rabbitz_book">
  <h1>시스템 요구 사항</h1>
  <div id="content">
    ...
  </div>
  <div id="rabbitz_feedback_panel">
    ...
  </div>
</div>

• 대부분의 내용은 웹 테마를 통해서 설정합니다.

• 제목은 div.rabbitz_content rabbitz_book h1 선택자로 설정합니다.

내용 기본 CSS는 다음과 같습니다.

.rabbitz_content {
  float: right;
  margin-top: 2.3em;
  width: 66.5%;
}

.rabbitz_content > h1 {
  border-bottom: 1px solid rgb(225, 225, 225);
  font-size: 2em;
  margin-bottom: 2em;
  padding-bottom: 0.3em;
}

.rabbitz_article {
  float: none;
  margin-left: 30px;
}

.rabbitz_article > h1 {
  margin-left: -30px;
}

.rabbitz_content table {
  width: 100%;
}

.rabbitz_content .heading1_n,
.rabbitz_content .heading2_n,
.rabbitz_content .heading3_n,
.rabbitz_content .heading4_n,
.rabbitz_content .heading5_n,
.rabbitz_content .image_caption_n,
.rabbitz_content .table_caption_n,
.rabbitz_content span.mark,
.rabbitz_content img.link {
  display: none;
}

.rabbitz_content ol.footnotes a.to_content {
  background: url("../image/web_viewer/up_arrow.png") right no-repeat;
  margin-left: 10px;
  padding-right: 15px;
  text-decoration: none !important;
}

.rabbitz_content #content .element {
  word-wrap: break-word;
}

.rabbitz_content #content .element a[id^=footnote] {
  text-decoration: none;
}

.rabbitz_content #content .image p.content img {
  height: auto;
  max-width: 100%;
}

검색 결과

검색 결과 HTML 코드는 다음과 같습니다.

<div class="rabbitz_search_result">
  <div class="rabbitz_search_result_summary">검색결과 약 70개 (0.16초) </div>
  <div class="rabbitz_search_breadcrumb">
    <span class="rabbitz_search_type">제목 3</span>
    <a href="..." target="_blank">...</a>
  </div>
  <p class="rabbitz_search_url">...</p>
  ...
  <div class="rabbitz_search_page_navigation">
    <a href="..." class="rabbitz_previous" data-page="1">이전</a>
    <a href="..." data-page="1">1</a>
    <b>2</b>
    <a href="..." data-page="3">3</a>
    ...
    <a href="..." data-page="7">7</a>
    <a href="..." class="rabbitz_next" data-page="2">다음</a>
  </div>
</div>

검색 결과 기본 CSS는 다음과 같습니다.

.rabbitz_search_result {
  margin: 2.5em 0;
  width: 60em;
}

.rabbitz_search_result .rabbitz_search_result_summary {
  margin-bottom: 1.666em;
}

.rabbitz_search_result .rabbitz_search_breadcrumb {
  margin: 1.25em 0 0.416em 0;
}

.rabbitz_search_result .rabbitz_search_breadcrumb a {
  border-bottom: 1px solid black;
}

.rabbitz_search_result .rabbitz_search_breadcrumb a:hover {
  text-decoration: none;
}

.rabbitz_search_result .rabbitz_search_breadcrumb .rabbitz_search_type {
  background: rgb(243, 90, 95);
  color: white;
  padding: 0.166em 0.416em;
  border-radius: 0.166em;
  font-size: 1em;
  margin-right: 0.416em;
}

.rabbitz_search_result .rabbitz_search_url {
  color: rgb(0, 153, 51);
  font-family: arial, sans-serif;
  font-size: 1.083em;
}

.rabbitz_search_result mark {
  background-color: rgb(255, 255, 0);
  padding: 0 0.166em;
  font-weight: bold;
}

.rabbitz_search_result mark.weak {
  color: rgb(128, 128, 128);
}

.rabbitz_search_result .rabbitz_search_page_navigation {
  margin-top: 4.166em;
  text-align: center;
}

.rabbitz_search_result .rabbitz_search_page_navigation a,
.rabbitz_search_result .rabbitz_search_page_navigation b {
  border-left: 0;
  margin: 0 0.666em;
  padding-left : 0;
}

.rabbitz_search_result .rabbitz_search_page_navigation a:hover {
  text-decoration: underline;
}

.rabbitz_search_result .rabbitz_search_page_navigation a.rabbitz_previous {
  font-weight: bold;
  margin-right: 1.666em;
}

.rabbitz_search_result .rabbitz_search_page_navigation a.rabbitz_next {
  font-weight: bold;
  margin-left: 1.666em;
}

.rabbitz_search_result .element {
  margin: 0 0 1.666em 0 !important;
}

.rabbitz_search_result .element + .definition_list {
  margin-top: -1.666em !important;
}

.rabbitz_search_result .definition_list dd p {
  margin-top: 0 !important;
}

.rabbitz_search_result .heading1,
.rabbitz_search_result .heading2,
.rabbitz_search_result .heading3,
.rabbitz_search_result .heading4,
.rabbitz_search_result .heading5 {
  font-size: 1.083em !important;
  font-weight: normal !important;
}

.rabbitz_search_result .part_title_n,
.rabbitz_search_result .chapter_title_n,
.rabbitz_search_result .appendix_title_n,
.rabbitz_search_result .heading1_n,
.rabbitz_search_result .heading2_n,
.rabbitz_search_result .heading3_n,
.rabbitz_search_result .heading4_n,
.rabbitz_search_result .heading5_n,
.rabbitz_search_result .image_caption_n,
.rabbitz_search_result .table_caption_n {
  color: inherit !important;
  font-weight: normal !important;
  padding-right: 0.5em !important;
}

.rabbitz_search_result .image .caption {
  margin: 0.416em 0 !important;
}

.rabbitz_search_result img {
  height: auto;
  max-width: 110%;
}

.rabbitz_search_result img.link {
  display: none;
}

.rabbitz_search_result ol {
  list-style-type: decimal;
  padding-left: 20px;
}

.rabbitz_search_result ol ol {
  list-style-type: upper-latin;
}

.rabbitz_search_result ol ol ol {
  list-style-type: lower-roman;
}

.rabbitz_search_result ol ul {
  list-style-type: circle;
  padding-left: 20px;
}

.rabbitz_search_result ol ul ul {
  list-style-type: square;
}

.rabbitz_search_result ol ol ul {
  list-style-type: square;
}

.rabbitz_search_result ol ul ol {
  list-style-type: lower-roman;
}

.rabbitz_search_result ul {
  list-style-type: disc;
  padding-left: 20px;
}

.rabbitz_search_result ul ul {
  list-style-type: circle;
}

.rabbitz_search_result ul ul ul {
  list-style-type: square;
}

.rabbitz_search_result ul ol {
  list-style-type: upper-latin;
}

.rabbitz_search_result ul ol ol {
  list-style-type: lower-roman;
}

.rabbitz_search_result ul ul ol {
  list-style-type: lower-roman;
}

.rabbitz_search_result ul ol ul {
  list-style-type: square;
}

.rabbitz_search_result dl dd p {
  margin-top: 0.416em !important;
  margin-bottom: 0.416em !important;
}

.rabbitz_search_result table {
  table-layout: fixed;
  width: 100%;
}

.rabbitz_search_result caption {
  margin-bottom: 5px;
  text-align: left;
}

.rabbitz_search_result th {
  background: rgb(244, 244, 244);
  font-weight: normal !important;
}

.rabbitz_search_result th,
.rabbitz_search_result td {
  border: 1px solid rgb(198, 198, 198);
  font-size: 12px;
  padding: 3px;
  vertical-align: top;
}

.rabbitz_search_result th div,
.rabbitz_search_result td div {
  min-height: 18px;
  min-width: 20px;
}

.rabbitz_search_result h1,
.rabbitz_search_result dt,
.rabbitz_search_result strong {
  font-weight: normal !important;
}