공지 (강조, 메모, 경고 등)

DevSite는 다양한 배경 색상의 상자로 표시되는 여러 알림 스타일을 지원합니다. 배경 색상은 사전 정의되어 있으며 HTML 또는 마크다운을 사용하여 알림을 만들 수 있습니다.

사용 가능한 알림 유형

참고

HTML

<aside class="note">
<b>Note:</b> An ordinary note.
</aside>

마크다운

Note: An ordinary note.

HTML

<aside class="tip">
<b>Tip:</b> An ordinary tip.
</aside>

마크다운

Tip: An ordinary tip.

주의

HTML

<aside class="caution">
<b>Caution:</b> Suggests proceeding with caution.
</aside>

마크다운

Caution: Suggests proceeding with caution.

경고

HTML

<aside class="warning">
<b>Warning:</b> Stronger than caution; it means "Don't do this."
</aside>

마크다운

Warning: Stronger than caution; it means "Don't do this."

중요

HTML

<aside class="special">
<b>Important:</b> Defines an important concept.
</aside>

마크다운

Important: Defines an important concept.

핵심 사항

HTML

<aside class="key-point">
<b>Key Point:</b> Defines an important takeaway.
</aside>

마크다운

Key Point: Defines an important takeaway.

주요 용어

HTML

<aside class="key-term">
<b>Key Term:</b> Defines important terminology.
</aside>

마크다운

Key Term: Defines important terminology.

목표

HTML

<aside class="objective">
<b>Objective:</b> Defines the goal of a procedure.
</aside>

마크다운

Objective: Defines the goal of a procedure.

성공

HTML

<aside class="success">
<b>Success:</b> Describes a successful action or an error-free status.
Used only in interactive or dynamic content; don't use in ordinary
static pages.
</aside>

마크다운

Success: Describes a successful action or an error-free status. Used only
in interactive or dynamic content; don't use in ordinary static pages.

베타

HTML

<aside class="beta">
<b>Beta:</b> A notice that describes a beta-release feature, which is
subject to change or removal in new minor versions of the product.
</aside>

마크다운

Beta: A notice that describes a beta-release feature, which is subject to
change or removal in new minor versions of the product.

미리보기

HTML

<aside class="preview">
<b>Preview:</b> A note or tip for a feature preview.
</aside>

마크다운

Preview: A note or tip for a feature preview.

Dogfood

HTML

<aside class="dogfood">
<b>Dogfood:</b> A notice that applies only temporarily, during internal
dogfood testing. Remove all Dogfood notices before making a document
publicly visible.
</aside>

마크다운

Dogfood: A notice that applies only temporarily, during internal dogfood
testing. Remove all Dogfood notices before making a document publicly
visible.

지원 중단됨

HTML

<aside class="deprecated">
<b>Deprecated:</b> A note or tip for a deprecated feature, product, or
service.
</aside>

마크다운

Deprecated: A note or tip for a deprecated feature, product, or service.

사용 참고사항

HTML 사용

이러한 클래스는 HTML5 <aside> 요소와 함께 사용하는 것이 좋지만 대신 다른 블록 수준 요소 (예: <p>)를 사용할 수도 있습니다.

HTML 클래스는 알림의 색상과 아이콘을 결정하지만 첫 번째 단어를 굵게 표시하지는 않습니다. 예와 같이 해당 단어를 직접 작성해야 합니다. 이론적으로는 클래스에 해당하는 단어 이외의 단어를 사용할 수 있지만 위에 표시된 첫 번째 단어를 사용하는 것이 좋습니다.

이전 문서에서는 class="note" 대신 class="special" 또는 비표준 클래스 이름이 표시될 수 있습니다. 이러한 클래스 이름은 note 알림과 시각적으로 동일한 알림을 생성하지만, 특수하거나 비표준 클래스 이름 대신 class="note"를 사용하는 것이 좋습니다.

마크다운 사용

Markdown 스타일은 알림의 색상과 아이콘을 결정하고 알림의 첫 번째 단어를 자동으로 굵게 설정합니다. 예를 들어 마크다운의 메모는 항상 '메모:'라는 단어로 시작하며 굵게 표시됩니다.

두 개 이상의 단락이 있는 알림의 경우 HTML <aside> (및 <p>)를 대신 사용하세요.

Note: 대신 중요: 가 표시될 수 있습니다. 이 마크다운 스타일은 Note: 알림과 시각적으로 동일한 알림을 생성합니다.

권장사항

DevSite에서는 문서에 고지를 추가할 때 다음 권장사항을 따르는 것이 좋습니다.

추천

  • 간결하게 작성합니다 (공지사항은 한두 문장으로 작성하는 것이 좋습니다).
  • 가능하다면 페이지당 하나 (또는 필요한 경우 섹션당 하나)로 고지사항을 제한합니다.
  • 알림에는 강조 표시하려는 중요한 콘텐츠만 포함해야 합니다. 알림에 어떻게 처리해야 할지 잘 모르는 콘텐츠는 포함하지 마세요.
  • 사용자가 정보가 필요해지기 전에 알림을 사용하세요.

권장하지 않음

  • 알림에 코드 예시, 표 또는 이미지를 포함하지 마세요.
  • 알림 유형이 다르더라도 알림을 서로 겹쳐 표시하지 마세요.
  • 제목 바로 뒤에 고지를 삽입하지 마세요.
  • 절차 전에 기본 요건을 지정하기 위해 알림을 사용하지 마세요.

대부분의 경우 이러한 권장사항은 note, caution, warning 유형의 알림에 적용되지만 다른 유형에도 적용될 수 있습니다.

좋은 예

간단하게 표현:

데이터 손실 가능성이 있는 경우 cautions를 사용합니다.

상해 가능성이 있는 경우 warning를 사용합니다.

콘텐츠에 적절한 알림 유형(예: key-term 또는 success)을 사용합니다.

잘못된 예

알림은 지나치게 장황하거나 핵심 콘텐츠에 속하는 정보를 전달해서는 안 됩니다.

알림은 절차 전에 기본 요건을 지정해서는 안 됩니다 (대신 '기본 요건' 섹션을 사용하세요).