웹 테마 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

버튼

button

콜아웃

span.callout

링크

a

단락 유형

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

div.note {
  border-radius: 0.5rem;
}

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

div.note, div.tip, div.caution {
  border-radius: 0.5rem;
}

텍스트 단락과 관련한 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에 해당하는 값은 <서식 | 테마>의 “사용자 스타일 유형”에서 확인할 수 있습니다.