Skip to main content

Visit Mozilla.org

MDC:Custom CSS Classes

MDC

프로젝트 참여 방법
항목
문서 요청 목록
할 일 편집 및 관리
목록 이전
가이드
시작하기
작성자 가이드
문서 제목 만들기
Disambiguation pages
새 MDC 다국어 버전 만들기
저작권 및 라이센스
참고 문서
Wiki 마크업 자료
사용자 정의CSS 항목
사용자 정의 템플릿
MediaWiki 확장 기능
외부 이동
이동 필요성

다음은 Devmo 위키를 위해 우리가 정의한 사용자 정의 CSS 클래스입니다. 무슨 이유에서든, 위키를 위해 CSS에 정의할 사용자 정의 클래스가 필요하다면, Dria에게 마음껏 연락하세요.

목차

[편집] 정의한 CSS 클래스

클래스 결과
div.tip 페이지 body 안에 팁 텍스트를 표시하기 위해.
div.bug 페이지 body 안에 버그 텍스트를 표시하기 위해.
.float-left left-float 요소(보통 이미지)를 만들기 위해.
.float-right right-float 요소(보통 이미지)를 만들기 위해.
.figure 나중에 쓰기 위해 정의함, 현재는 아무런 스타일 정보도 포함하지 않음
.standard-table 기본 표준 표 스타일링.
.standard-table td.header 표준 표를 위한 헤더 스타일링.
.fullwidth-table 너비가 100%인 표. (이 표가 보기다.)
.fullwidth-table td.header 최대너비 표를 위한 헤더 스타일링.
div.breadcrumbs 사용자 정의 breadcrumbs 확장을 위한 스타일링.
div.breadcrumbs a.breadcrumbs breadcrumbs 문자열 안 링크를 위한 스타일링.
div.breadcrumbs span.breadcrumbs breadcrumbs 문자열 안 내부 페이지 제목을 위한 스타일링.
div.side-note-left div.side-note-right sidebar를 만들거나 항목 안 옆에 두는데 씁니다. 만든 상자는 부모 상자 너비의 50%입니다(보통 항목 자체의 너비). 더 읽기 쉽도록 항목의 왼쪽과 오른쪽 편 사이에 sidebar 컨텐트를 교체하기 위해 쓰는 것을 권합니다.
div.highlight 왼편에 3px 너비의 파란 막대가 있는 페이지 절을 돋보이게 함.
.highlightred 텍스트 색을 빨강으로 바꿈.
.highlightblue 텍스트 색을 파랑으로 바꿈.
.highlightgreen 텍스트 색을 초록으로 바꿈.

[편집] 보기

[편집] Highlighting parts of code

가끔 우리는 어떤 코드 절에 관심 끌기를 원할 것입니다. 이는 span을 쓰면 가능하고 또한, MediaWiki에 내장된 "indent-at-least-one-space" 코드 formatting 기능을 써도 됩니다. <pre> 블록 안에 span을 쓰는 것은 MediaWiki 파서가 span을 무시하고 단순히 코드 부분으로 출력하기 때문에 쓸모 없다는 점을 주의하세요. 

<span class="highlightred">this doesn't work</span>

대신에, 돋보이고 싶은 코드를 들여쓰고 그 안에 span을 쓰세요. 코드 블럭 안 빈 줄도 들여써야 한다는 점을 주의하세요. 빈 줄의 시작에 공간이 없다면 , 파서는 코드 블럭을 닫고 들여쓴 코드 다음 줄에 다시 열 겁니다. 

here is an example of
   a codeblock with a blank line

   that is not indented.

분명히, 위 보기는 잘못 썼습니다. 이렇게 하는 겁니다. 

here is an example of
   a codeblock with a blank line

   that is indented.

[편집] Breadcrumbs

[편집] table.standard-table

<tr> <td>This is an example of:</td> <td>table.standard-table</td> </tr> </table>

[편집] table.fullwidth-table

table header 1</td>

<th>table header 2</td>

<tr> <td>This is an example of:</td> <td>table.fullwidth-table</td> </tr> </table>

[편집] Divs

[편집] Tips

formatting 팁에 div class="tip"을 쓰세요.

This is a tip

[편집] Bugs

아는 버그 참조에 관련 bugzilla 표제어를 링크하는 div class="bug"를 쓰세요.

[https://bugzilla.mozilla.org/show_bug.cgi?id=176320 Bug 176320: Minimal innerWidth/innerHeight values for popup windows]

[편집] Warnings

문서 안에 경고를 돋보이게 하기 위해 div class="warning"을 쓰세요. 결국 우리가 아이콘이나 뭔가를 더하고 뭔가 멋지게 할 겁니다.

This is a warning.

[편집] Notes

문서 안에 노트를 돋보이게 하려면 div class="note"를 쓰세요.

This is a note. It's not a very interesting note.

[편집] Highlight Section

div class="highlight" 보기.

이것은 절 돋보임 CSS 보기입니다. 어떤 코드 절에 관심을 끌기 위해 쓰세요. 처음에 이것은 XUL Tutorial에 덧붙였습니다. 

an example of a
   preformatted section
   within a highlighted
      div
원본 주소 "http://developer.mozilla.org/ko/docs/MDC:Custom_CSS_Classes"
table header 1</td>

<th>table header 2</td>