CSS를 직접 사용해서 웹 뷰어를 꾸밀 수 있습니다. 폼에 기반한 웹 뷰어 레이아웃과 테마의 한계를 극복할 수 있습니다. 웹 테마에 CSS를 설정하는 방법은 사용자 가이드를 참고합니다.

노트, 팁, 주의 단락 테두리 모서리 둥글게 하기

노트(note), 팁(tip), 주의(caution) 단락 모서리를 둥글게 하려면 다음과 같이 CSS를 작성합니다.

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

결과는 다음과 같습니다. border-radius로 모서리 원 반지름을 설정합니다.

노트, 팁, 주의 단락 유형을 텍스트로 표시하기

노트(note), 팁(tip), 주의(caution) 단락 유형을 표시하려면 다음과 같이 CSS를 작성합니다.

.note::before {
  content: '노트:';
  font-weight: bold;
}

.tip::before {
  content: '팁:';
  font-weight: bold;
}

.caution::before {
  content: '주의:';
  font-weight: bold;
}

결과는 다음과 같습니다. cotnent 속성으로 단락 유형을 설정합니다.

정의 목록 단락의 용어와 설명 같은 줄에 위치시키기

정의 단락에서 용어와 설명을 같은 줄에 표시하려면 다음과 같이 CSS를 작성합니다.

.definition_list dt {
  clear: both;
  float: left;
  margin-right: 1em;
}

.definition_list dt::after {
  content: ':';
  padding-left: 3px;
}

.definition_list dd {
  margin-bottom: 1em;
}

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

결과는 다음과 같습니다.

단계 단락 텍스트로 처리하기

단계 단락에 '단계'을 표시하려면 다음과 같이 CSS를 작성합니다.

.step1_n {
  box-shadow: none !important;
  font-family: 'Malgun Gothic', 굴림, Gulim, sans-serif !important;
  font-weight: bold !important;
  width: auto !important;
}

.step1_n::after {
  content: '단계:';
  margin: 0 12px 0 3px;
}

결과는 다음과 같습니다.