CSS로 웹 테마 꾸미기

입력 폼만으로 웹 테마를 다양하게 설정하기 어렵기 때문에 CSS를 직접 입력할 수 있도 있습니다.

쓰리래빗츠 북 2.0.1 버전부터 제공합니다.

CSS 설정

CSS를 설정하는 방법은 다음과 같습니다.

1

웹 테마에서 <1CSS 설정> 링크를 클릭합니다.

2

2CSS를 입력한 후 <3저장> 버튼을 클릭합니다.

문자 유형

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

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

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

문자 유형

선택자

매우 강조

strong

강조

em

코드

code

키보드

kbd

인라인 주석

small

아래 첨자

sub

위 첨자

sup

삭제

del

콜아웃

span.callout

링크

a

단락 유형

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

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

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

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

텍스트 단락과 관련한 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 선택자는 다음과 같습니다.

그림 단락 유형

선택자

그림 단락

div.image

그림 제목

div.image .caption

그림 제목 번호

span.image_caption_n

그림

div.image .content

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

표 단락 유형

선택자

표 단락

table.table

표 제목

table.table caption

표 제목 번호

span.table_caption_n

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

객체 단락 유형

선택자

수평선

hr.horizontal_line

사용자 스타일 유형

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

사용자 스타일 유형

선택자

보통

p.key

코드

pre.key

정의 목록

dl.key

박스

div.key

표

table.key

문자 유형

span.key

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