MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

흔히 쓰는 매크로

이 페이지는 MDN에서 사용하기 위해 만든 많은 범용 매크로를 나열합니다. 이 매크로 사용법에 관한 정보는, 매크로 사용하기링크 매크로 사용하기를 참조하세요. 드물게, 특별한 문맥에서만 쓰이거나 사라질(deprecated) 매크로에 관한 정보는 기타 매크로를 참조하세요. MDN의 모든 매크로 전체 목록도 있습니다.

사용 가능 스타일에 관한 CSS 스타일 안내서도 참조하세요.

링크하기

단일 하이퍼링크 생성

  • Glossary 매크로는 MDN 용어사전 내 지정된 용어(term) 항목에 대한 링크를 만듭니다. 이 매크로는 하나는 필수며 둘은 선택인 매개변수를 취합니다:
    1. 용어명 (가령 "HTML").
    2. 용어명 대신 글에 표시할 텍스트 (이건 드물게 쓰임). Optional
    3. 이 매개변수가 지정되고 0이 아닌 경우, 보통 용어사전 링크에 적용된 사용자 정의 스타일링은 적용되지 않습니다. Optional

    예:

    • {{Glossary("HTML")}}은 HTML이 됩니다
    • {{Glossary("CSS", "Cascading Style Sheets")}}는 Cascading Style Sheets가 됩니다
    • {{Glossary("HTML", "", 1)}}은 HTML이 됩니다

참고서 내 페이지에 링크하기

MDN의 특정 참고서(reference) 영역 내 페이지에 링크하는 다양한 매크로가 있습니다.

  • cssxrefCSS 참고서 내 페이지에 링크합니다.
    예: {{cssxref("cursor")}}, 결과: cursor.
  • domxref는 DOM 참고서 내 페이지에 링크합니다; 끝에 괄호를 포함하는 경우, 템플릿은 함수 이름처럼 보이도록 표시해야 함을 압니다. 예를 들어, {{domxref("document.getElementsByName()")}}document.getElementsByName()이 되고 {{domxref("Node")}}Node가 됩니다.
  • event는 DOM Event 참고서 내 페이지에 링크합니다, 예: {{event("change")}}는 change가 됩니다.
  • HTMLElement는 HTML 참고서 내 HTML 요소(element)에 링크합니다.
  • htmlattrxref는 HTML attribute, 전역 attribute 설명 (attribute명만 지정한 경우) 또는 (attribute명 및 요소명을 지정한 경우) 지정 요소와 관련된 attribute에 링크합니다. 예를 들어, {{htmlattrxref("lang")}}은 이 링크를 만듭니다: lang. {{htmlattrxref("type","input")}}은 이 링크를 만듭니다: type.
  • jsxrefJavaScript 참고서 내 페이지에 링크합니다.
  • SVGAttr은 특정 SVG attribute에 링크합니다. 예를 들어, {{SVGAttr("d")}}은 이 링크를 생성합니다: d.
  • SVGElement는 SVG 참고서 내 SVG 요소에 링크합니다.

버그 및 IRC에 링크하기

  • 버그
    • bug는 다음 구문을 사용하여 쉽게 bugzilla.mozilla.org의 버그에 링크할 수 있습니다: {{Bug(123456)}} 이 구문의 결과는: bug 123456.
    • WebkitBug는 WebKit 버그 데이터베이스 내 버그로 링크를 삽입합니다. 예를 들어, {{WebkitBug(31277)}}WebKit bug 31277를 삽입합니다.
  • IRCLink는 지정된 IRC 채널로의 링크를 삽입합니다, 하는 일과 IRC 클라이언트가 필요함을 말하는 툴팁을 갖춘.

여러 페이지 안내서를 위한 내비게이션 보조

Previous, NextPreviousNext는 연속글의 일부인 글을 위한 내비게이션 컨트롤을 제공합니다. 단방향 템플릿의 경우, 필요한 유일한 매개변수는 연속글의 이전 또는 다음 글의 위키 주소입니다. PreviousNext의 경우, 필요한 두 매개변수는 해당 글의 위키 주소입니다. 첫 번째 매개변수는 이전 글이고 두 번째는 다음 글입니다.

코드 샘플

실시간 샘플

첨부된 샘플 파일

  • Embed_text 템플릿은 글 본문 내에 첨부된 텍스트 파일을 삽입할 수 있습니다. 이는 다운로드 가능하지만 글의 콘텐츠에 표시되기도 하는 코드 조각을 갖고 싶은 경우 유용합니다. 구문 강조를 위한 언어를 선택 사항으로 지정할 수도 있습니다; 지정하지 않은 경우, 텍스트는 강조 없이 삽입됩니다. 첫 번째 매개변수는 삽입할 첨부 파일명입니다; 두 번째는, 제공되는 경우 구문 강조기를 적용할 언어입니다, 가령 "javascript", "svg" 또는 "cpp".
  • EmbedSVG는 SVG 이미지로서 첨부된 XML 파일을 삽입합니다, 페이지 위에다. 첨부된 SVG 파일의 파일명을 지정하세요. 소스 그리고 같은 파일의 렌더링된 출력을 표시하기 위해 Embed_text와 동시에 이를 사용할 수 있습니다.

사이드바 생성

거의 모든 대규모 페이지 컬렉션 용 템플릿이 있습니다. 보통은 참고서/안내서(guide)/지도서(tutorial)의 메인 페이지로 다시 링크하고 (이동 경로 표시(breadcrumb)가 때때로 이를 수행할 수 없기에 종종 필요함) 글을 적절한 항목(category)에 둡니다.

  • CSSRef는 CSS 참고서 페이지 용 사이드바를 생성합니다.
  • HTMLRef는 HTML 참고서 페이지 용 사이드바를 생성합니다.
  • APIRef는 Web API 참고서 페이지 용 사이드바를 생성합니다.

범용 형식

API 문서용 인라인 지시자(indicator)

optional_inlineReadOnlyInline은 API 문서에서 보통 객체의 속성 목록 또는 함수의 매개변수를 기술할 때 사용됩니다.

용법: {{optional_inline()}} 또는 {{ReadOnlyInline()}}. 예:

isCustomObject Read only
(true)면, 사용자 정의 객체임을 나타냅니다.
parameterX Optional
어쩌고 저쩌고...

페이지에 스펙 표가 없는 이유 적어두기

웹 문서 페이지 대부분은 API가 지정된 곳을 나타내는 스펙 표가 있습니다. 그러나, 일부 API 용어는 어떤 이유로 스펙이 없습니다; 아마도 API가 공식 스펙보다 먼저 나왔거나 API가 브라우저 전용이라 스펙이 없습니다.

그럼에도 불구하고, 이런 경우일 때를 나타낼 수 있음이 중요합니다, 그래서 표 대신 설명 텍스트를 둡니다. 진행 중임을 도구가 이해할 수 있도록, WhyNoSpecStartWhyNoSpecEnd 매크로를 사용하여 그 텍스트를 감쌀 필요가 있습니다, 다음과 같이:

{{WhyNoSpecStart}}어떤 스펙의 일부도 아닙니다; 이 API는 Firefox OS 전용입니다.

이러한 매크로는 그저 자동화된 도구를 위한 안내서이며 렌더링된 콘텐츠에 눈에 보이는 영향은 없습니다.

상태 및 호환성 지시자

추가 매개변수가 없는 인라인 지시자

비표준

non-standard_inline은 API가 표준화되지 않았고 표준 트랙에 없음을 나타내는 인라인 표시를 삽입합니다.

구문

{{non-standard_inline}}

  • 아이콘:

실험용

experimental_inline은 API가 널리 구현되지 않고 앞으로 변경될 수 있음을 나타내는 인라인 표시를 삽입합니다.

구문

{{experimental_inline}}

  • 아이콘:

기술 지정을 지원하는 인라인 지시자

이 매크로에서 매개변수(지정된 경우)는 버전 번호가 뒤따르는 문자열 "html", "js", "css" 또는 "gecko" 중 하나여야 합니다.

Deprecated

deprecated_inline은 공식으로 사라질 API의 사용을 삼가도록 인라인 사라질(deprecated) 표시를 삽입합니다. 주의: "사라질"은 더 이상 사용되지 않지만 여전히 기능함을 뜻합니다. 전혀 작동하지 않음을 뜻하는 경우, 용어 "안 씀(obsolete)"을 쓰세요.

모든 브라우저에 쓰일 수 있는 영역(HTML, API, JS, CSS, …)에는 매개변수를 사용하지 마세요.

구문

{{deprecated_inline}} 또는 {{deprecated_inline("gecko5")}}

  • 아이콘:
  • 배지: Deprecated Gecko 5

Obsolete

obsolete_inline은 공식으로 안 쓰는(obsolete) 예를 들어 함수, 메서드 또는 속성이 사용을 막기 위해 인라인 안 씀 표시를 삽입합니다. {{ js_obsolete_inline("1.8.5") }}는 {{ obsolete_inline("js1.8.5") }}와 같습니다. js_obsolete_header도 마찬가지입니다.

모든 브라우저에 쓰일 수 있는 영역(HTML, API, JS, CSS, …)에는 매개변수를 사용하지 마세요.

구문

{{obsolete_inline}} 또는 {{obsolete_inline("js1.8.5")}}

템플릿 배지

이 매크로는 대부분 WebAPI 페이지에 사용됩니다. 새 배지 생성 정보는 Creating new badges 참조.

Privileged

PrivilegedBadge는 특권(privileged) API를 나타내기 위해 Firefox OS 문서화에 사용됩니다.

구문

{{PrivilegedBadge}}

Privileged

페이지 또는 절 표제 지시자

이 템플릿들은 위에 설명한 자신의 인라인 짝(counterpart)과 같은 의미(semantics)를 갖습니다. 템플릿은 참고 페이지 내 메인 페이지 제목 (또는 가능한 경우 이동 경로 표시(breadcrumb) 내비게이션) 바로 아래에 놓여야 합니다. 페이지 상 절(section)에 표시하는데 사용될 수도 있습니다.

  • non-standard_header: {{Non-standard_header()}}

    Non-standard
    This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

  • SeeCompatTable은 "브라우저 호환성" 절을 제공하는 페이지에 사용되어야 합니다. 예: {{SeeCompatTable()}}

    This is an experimental technology
    Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

  • deprecated_header: {{deprecated_header()}}

    Deprecated
    This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Do not use it in old or new projects. Pages or Web apps using it may break at any time.

  • 매개변수 있는 deprecated_header: {{deprecated_header("gecko5")}}

    Deprecated Gecko 5 (Firefox 5 / Thunderbird 5 / SeaMonkey 2.2)
    This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Do not use it in old or new projects. Pages or Web apps using it may break at any time.

    모든 브라우저에 쓰일 수 있는 영역(HTML, APIs, JS, CSS, …)에는 매개변수를 사용하지 마세요.
  • obsolete_header: {{obsolete_header()}}

    안씀
    This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

  • 매개변수 있는 obsolete_header: {{obsolete_header("gecko30")}}

    안씀 Gecko 30 (Firefox 30 / Thunderbird 30 / SeaMonkey 2.27 / Firefox OS 1.4)
    This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

    모든 브라우저에 쓰일 수 있는 영역(HTML, APIs, JS, CSS, …)에는 매개변수를 사용하지 마세요.

기능을 웹 워커에서 이용가능한 지 나타내기

AvailableInWorkers 매크로 기능이 웹 워커 컨텍스트에서 이용 가능한지를 나타내는 지역화된 메모 상자를 삽입합니다.

버전 정보 매크로

이 매크로는 콘텐츠가 특정 버전의 제품에만 해당됨을 나타내기 위해 사용됩니다.

특별한 페이지에 사용되는 매크로

다운로드 버튼

DownloadButton은 페이지에 녹색 "Download" 버튼을 삽입합니다. 두 매개변수를 취합니다:

  1. 대상 링크의 URL
  2. 버튼 자체의 텍스트

예를 들어, {{DownloadButton("http://nightly.mozilla.org/", "Download Nightly")}}의 결과: Download Nightly

FirefoxChannelLink는 특정 Firefox 채널을 다운로드하는 링크를 삽입합니다. 링크는 텍스트 또는 채널 아이콘일 수 있습니다. 이 매크로 뒤의 생각은 아마도 이러한 다운로드용 "최상의 소스"를 변경 처리해야 함 없이 또한 아이콘 변경에 대한 걱정없이 아이콘 버튼을 사용할 수 있게 하여 Firefox 다운로드에 링크하는 쉬운 방법을 제공하는 것입니다. 매크로를 쉽게 업데이트 할 수 있고 동시에 아이콘을 사용한 모든 곳이 업데이트 됩니다.

이런 매개변수를 취합니다:

  1. 채널명. 이는 대소문자를 구별하지 않는 문자열로 "nightly", "aurora", "beta" 또는 "release" 중 하나여야 합니다(마지막은 "firefox"일 수도 있습니다).
  2. 아이콘 크기, 픽셀로. 아이콘의 너비는 이걸로 설정됩니다, 높이는 어울리게 가로로 조정된 채로. 이 값이 0인 경우, 링크는 대신 텍스트 링크로서 표시됩니다.
  3. 링크용 텍스트. 아이콘 크기를 지정하여 링크가 아이콘이 되도록 요청한 경우 이 매개변수를 뺄 수 있습니다.

예를 들어, {{FirefoxChannelLink("aurora", 96)}}의 결과:

그리고 {{FirefoxChannelLink("beta", 0, "Download Firefox Beta")}}의 결과: Download Firefox Beta

문서 태그 및 공헌자

태그: 
 이 페이지의 공헌자: Netaras
 최종 변경: Netaras,