AMP

서식 지정 가이드 & 튜토리얼

가이드 및 튜토리얼은 마크다운에 추가 프론트매터 및 숏코드 서식 지정과 함께 제시되어 있습니다.

문서 위치

amp.dev 콘텐츠는 amp.devAMPHTML의 저장소 두 곳에서 가져옵니다. 컴포넌트의 모든 참조 문서는 AMPHTML의 'builtins' 또는 'extensions'에 포함되어 있습니다.

AMPHTML에서 amp.dev로 가져온 기타 여러 문서들이 있습니다. 해당 문서는 다음 파일에서 제공됩니다. amp.dev 저장소에서 문서를 업데이트하지 마세요. 변경 사항이 후속 빌드에 덮어쓰기 될 수 있습니다!

프론트매터

프론트매터는 각 가이드 및 튜토리얼의 최상단에 위치합니다.

예제:

$title: Include Custom JavaScript in AMP Pages
$order: 7
formats:
  - websites
author: CrystalOnScript
contributors:
  - fstanis
description: For web experiences requiring a high amount of customization AMP has created amp-script, a component that allows the use of arbitrary JavaScript on your AMP page without affecting the page's overall performance.
$title 콘텐츠 목차에 표시되는 문서의 제목입니다. "AMP" 및 기타 고유 명사를 제외한 첫 번째 단어의 첫 번째 문자는 대문자로 처리합니다. and라는 단어 대신 앰퍼샌드 & 기호를 사용합니다.
$order 문서의 콘텐츠 목차가 표시되는 위치를 정의합니다. 올바른 위치에 표시되게 하려면 다른 문서의 $order를 편집해야 할 수도 있습니다.
formats 문서와 관련된 AMP 경험을 나열합니다. 문서가 AMP 웹사이트 및 AMP 스토리와 관련되었으나 AMP 광고 또는 AMP 이메일과는 관련이 없을 시 Frontmatter는 다음과 같이 작성됩니다: yaml formats: - websites - stories
author 작성자는 여러분입니다! GitHub 사용자 이름을 사용하세요.
contributors 문서 기여자 목록이 나열됩니다. 이 필드는 선택 사항입니다.
description 가이드 또는 튜토리얼에 대한 간략한 설명을 작성합니다. 검색 엔진 최적화에 도움이 되므로, 여러분의 작업을 필요한 사람이 발견할 수 있습니다!
tutorial 웹사이트에서 프론트매터 옆에 튜토리얼 아이콘을 추가하려면 tutorial: true를 추가합니다. 튜토리얼은 콘텐츠 목차의 섹션 하단에 있습니다.

숏코드

숏코드 목록 및 활용 사례는 GitHub의 documentation.md에서 확인하실 수 있습니다.

이미지

amp.dev는 AMP로 작성되었습니다! 그렇기에 이미지는 amp-img 기준에 부합합니다. 빌드 프로세스에서 이미지를 amp-img 형식으로 변환하는 데 다음 구문이 활용되었습니다.

Image of basic amp script tutorial starter app

섹션 필터링

일부 문서는 여러 AMP 형식과 연관되었을 수 있지만 이러한 형식에는 다른 것들과 연관성 없는 추가 설명 또는 정보가 필요할 수도 있습니다. 다음 숏코드로 섹션을 래핑하여 필터링할 수 있습니다.

[filter formats="websites"]
This is only visible for [websites](?format=websites).
[/filter]

[filter formats="websites"]
This is only visible for [websites](?format=websites).
[/filter]

[filter formats="websites, email"]
This is visible for [websites](?format=websites) & [email](?format=email).
[/filter]

[filter formats="stories"]
This is visible for [stories](?format=stories).
[/filter]

다음 숏코드에 텍스트를 래핑하여 팁과 콜아웃을 추가할 수 있습니다.

[tip type="default"]
Default tip
[/tip]

[tip type="important"]
Important
[/tip]

[tip type="note"]
Note
[/tip]

[tip type="read-on"]
Read-on
[/tip]

코드 조각

백틱(`) 기호 3개 사이에 코드 조각을 배치하고 첫 번째 백틱 세트 끝부분에서 언어를 지정합니다.

```html
  // code sample

wzxhzdk:1



wzxhzdk:2




인라인 샘플은 페이지에 바로 임베드 되므로 컴포넌트가 해당 페이지에 이미 사용된 경우 충돌이 발생할 수 있습니다(예: `amp-consent`).
### 탑프레임 미리보기 헤더 요소를 제정하거나 `

Hello AMP

``` [/example]
다음과 같이 표시되어야 합니다: [example preview="top-frame" playground="true"] wzxhzdk:3
이 코드 조각을 Playground에서 열기
### AMP 스토리 AMP 스토리 미리보기 시 `preview="top-frame"`과 `orientation="portrait"`을 함께 사용합니다.
```html

Hello World

This is the cover page of this story.

First Page

This is the first page of this story.

``` [/example]
다음과 같이 표시되어야 합니다: [example preview="top-frame" orientation="portrait" playground="true"] wzxhzdk:4
이 코드 조각을 Playground에서 열기
### AMP 이메일의 절대 URL AMP 이메일에 엔드포인트 URL이 임베드 될 경우 를 활용하여 절대 경로로 지정하는 방법을 참조하세요.
```html
``` [/example]
다음과 같이 표시되어야 합니다: [example preview="top-frame" playground="true"] wzxhzdk:5
이 코드 조각을 Playground에서 열기
### 이스케이핑 mustache 템플릿 원격 엔드포인트를 사용한 `top-frame` 샘플입니다. 을 활용하여 Mustache 템플릿을 이스케이핑 처리해야 합니다.
```html ``` [/example]
다음과 같이 표시되어야 합니다: [example preview="top-frame" playground="true" imports="amp-list:0.1" template="amp-mustache:0.2"] wzxhzdk:6
이 코드 조각을 Playground에서 열기
## 링크 표준 마크다운 링크 구문으로 다른 페이지로 연결할 수 있습니다. wzxhzdk:7 amp.dev에 다른 페이지를 연결할 경우 참조는 대상 파일에 상대 파일 경로가 됩니다. ### 앵커 문서에서 앵커를 사용해 특정 섹션으로 연결합니다. wzxhzdk:8 앵커가 없는 섹션으로 연결하기 전 `