웹 테마 CSS로 꾸미기

CSS 웹 페이지 만들기

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

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

  2. <1웹 페이지 만들기> 링크를 클릭한 후 “2CSS”를 선택합니다.

  3. “이름”, “언어” 등 기본 정보를 입력한 후 버튼을 클릭합니다.

CSS 설정

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

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

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

  3. <테마 변경> 링크를 클릭합니다.

  4. CSS를 선택한 후 버튼을 클릭합니다.

CSS 편집

문자 유형

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

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

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

문자 유형 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 선택자는 다음과 같습니다.

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

그림 단락 CSS 선택자

그림 단락 유형

선택자

그림 단락

div.image

그림 제목

div.image .caption

그림 제목 번호

span.image_caption_n

그림

div.image .content

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

표 단락 CSS 선택자

표 단락 유형

선택자

표 단락

table.table

표 제목

table.table caption

표 제목 번호

span.table_caption_n

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

객체 단락 CSS 선택자

객체 단락 유형

선택자

수평선

hr.horizontal_line

사용자 스타일 유형

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

사용자 스타일 유형 CSS 선택자

사용자 스타일 유형

선택자

보통

p.key

코드

pre.key

정의 목록

dl.key

박스

div.key

table.key

문자 유형

span.key

key에 해당하는 값은 <서식 | 테마>의 “사용자 스타일 유형”에서 확인할 수 있습니다.