Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. AMP
Webdesign

기본 AMP 페이지를 처음부터 만드는 방법

by
Difficulty:IntermediateLength:LongLanguages:

Korean (한국어) translation by h1ghqlty. (you can also view the original English article)

AMP 프로젝트는 사이트를 더 빠르게, 특히 미디어를 많이 사용하거나 수익 창출을 필요로하는 사람들을 돕는 것을 목표로 Google이 지원하는 새로 배포된 오픈 소스 이니셔티브입니다. 이는 본질적으로 다소 복잡한 최적화 방법이 될 수있는 것을 압도 할 수있는 "불편 함없는"방법입니다. 대부분의 프로세스가 사용자를 대신하여 처리합니다.

AMP 프로젝트 : 귀하의 사이트를 더 빠르게 만들 수 있습니까?에서 AMP가 개발자의 관점에서 의미하는 바를 상세히 설명하고 AMP가 어떤 종류의 속도 이득을 줄 수 있는지에 대한 원시 번호를 알려줍니다.

이 튜토리얼에서는 처음부터 실제로 AMP 페이지를 작성하고, AMP 방식으로 일반적인 작업을 수행하는 방법을 설명하고, 간략하게 몇 가지 팁을 공유하는 단계별 가이드로 보다 실용적입니다.

시작 합시다!

상용구 코드 추가

표준 상용구 코드를 추가하면 모든 AMP 템플릿이 시작됩니다. 모든 AMP 템플릿에 있어야 하는 코드 세트가 있거나 유효성 검증에 실패합니다.

index.html이라는 이름의 새 HTML 파일을 만들고 다음 코드를 추가합니다.

위의 코드에서 각 요소에 대한 분석을 읽을 수 있습니다.

localhost 미리보기 설정

새로 만든 AMP 템플릿을 브라우저에서 직접 열어 미리 볼 수 있습니다 (선택할 경우). 그러나 항상 로컬 호스트에서 미리 보는 것이 좋습니다. 이 접근 방식은 웹 호스트를 시뮬레이트 하므로 템플릿을 미리 보는 환경은 배포 될 라이브 환경에 최대한 가깝습니다.

이를 위해 Windows 또는 Mac 용 MAMP를 사용하는 것이 좋습니다. MAMP가 설치되어 있지 않은 경우 MAMP 웹 사이트로 가서 사본을 다운로드하십시오.

MAMP가 설치되면 htdocs 폴더를 찾으십시오. Mac에서는 일반적으로 /Applications/MAMP/htdocs와 Windows의 C:\MAMP\htdocs\에서 찾을 수 있습니다.

그 안에 프로젝트를 저장할 새 폴더를 만드십시오. e.g. myproject. 그런 다음 이전 단계에서 만든 index.html 파일을 해당 폴더로 이동합니다.

MAMP를 실행하면 Chrome의 http://localhost:8888/myproject/ URL로 이동하여 AMP 템플릿을 미리 볼 수 있습니다. 다른 브라우저를 선호하더라도 Chrome을 사용하여 다음 단계에서 Chrome 개발자 도구를 사용하게 됩니다.

AMP 페이지는 현재 다음과 같이 보입니다 :

이 URL로 이동해도 작동하지 않으면 위의 URL에서 볼 수있는 8888과 다른 포트 번호에서 MAMP가 실행 중일 수 있습니다. 이런 경우인지 확인하려면 MAMP 인터페이스에서 WebStart 열기 페이지가 표시된 버튼을 클릭하십시오. 그러면 MAMP에 대한 정보가있는 페이지로 이동하게되며 대신 URL에 정확한 포트 번호가 표시됩니다.

디버그 켜기

더 나아 가기 전에, AMP의 디버그 모드를 켜고 싶습니다. 따라서 우연히 검증을 통과하지 못하는 무언가를 실수로 수행한다면 즉시 알 수 있습니다.

이렇게하려면 미리보기 URL 끝에 #development=1을 추가하십시오 (예 : http://localhost:8888/myproject/#development=1.

그런 다음 Chrome 개발자 도구를 열고 콘솔 탭으로 이동하여 다음이 표시됩니다. Powered by AMP ⚡ HTML...  메시지가 표시됩니다.

페이지를 개발할 때 AMP 유효성 검사를 통과하지 못하면 콘솔에 오류 메시지가 표시됩니다. 지금 우리는 오류 메시지가없고 대신 "AMP 유효성 검사 성공"을 보고 모든 것이 정상적으로 작동하고 있음을 알려줍니다.

선택적 JSON 메타 데이터

이미 추가 한 상용구 코드와 함께 다음과 같이 Schema.org 형식의 헤드 섹션에 일부 JSON 메타 데이터를 추가할 수 있습니다.

이것은 AMP 유효성 검사를 통과하는 데 필수적이지는 않지만 Google 검색 뉴스와 같은 다양한 장소에서 받아 들여지려면 필수적입니다.

이 메타 데이터에 대한 자세한 내용은 다음을 방문하십시오.

인라인 CSS 다루기

AMP의 요구 사항 중 하나는 모든 맞춤 CSS가 <style amp-custom>...</style> 태그 사이의 head 섹션에 인라인으로 배치되어야 한다는 것입니다.

이 요구 사항에도 불구하고 실제로 CSS를 헤드 섹션에 직접 작성하는 것이 이상적인 워크 플로가 아닙니다. 정말로 필요한 것은 외부 스타일 시트에 CSS를 작성한 다음 평소와 같이 CSS를 모든 사이트 템플릿 파일의 head 섹션에서 적절한 위치로 옮기는 것입니다.

여기서 어떻게해야 할지를 설명하지는 않겠지만 외부 스타일 시트를 사용하고 AMP 유효성 검사를 통과하는 방법을 알고 싶다면 빠른 팁 자습서의 단계를 따르십시오. AMP의 인라인 CSS를보다 쉽게 ​​만들기 계속하기 전에 Jade 나 PHP를 통해.

이미지 추가하기

이제 필수 코드를 제자리에 두고 개발 모드를 활성화하고 외부 스타일 시트 관리를 준비 했으므로 이제 페이지에 일부 미디어를 추가할 수 있습니다. 가장 일반적인 미디어 유형인 이미지부터 시작하겠습니다.

AMP에서는 <img> 태그를 사용하여 이미지를 로드하지 않습니다. 대신 사용자 정의 요소 <amp-img>를 사용하면 페이지의 모든 이미지에서로드 최적화가 처리됩니다.

이 튜토리얼의 다음부터는 기존 템플릿 디자인을 사용하여 작업 속도를 높이기 위해 노력할 것입니다. 지금 가서 StyleShout의 무료 Ceevee 템플릿 사본을 가져 오십시오. 이 템플릿에는 AMP 문서에 삽입하는 연습에 사용할 수 있는 이미지가 포함되어 있습니다.

Ceevee 템플릿 이미지 폴더에서 야간에 모래 언덕의 큰 이미지를 볼 수 있습니다. 이것을 템플릿에 넣음으로써 시작하겠습니다. 이미지 폴더를 복사하여 프로젝트 폴더에 붙여 넣으십시오.

그런 다음 이미 HTML에 있는 h1 태그 위에 이미지를 포함 시키려면 다음 코드를 추가하십시오.

AMP 페이지에 배치된 모든 형태의 미디어는 초기 높이가 설정되어야하므로 img 태그와 달리 amp-img 태그에서 이러한 속성을 그대로 둘 수는 없습니다.

입력한 값이 종횡비를 정확하게 나타내는 한 이미지의 크기가 정확히 될지 확실하지 않은 경우 괜찮습니다. 너비높이 값은 AMP가 제공한 값으로 페이지를 레이아웃 한 다음 이미지가 완전히 로드된 후 조정할 수 있으므로 자리 표시 자로 간주 될 수 있습니다.

레이아웃 속성은 AMP가로드 된 후 이미지의 디스플레이를 조정할 수 있게 해줍니다. 값을 반응형으로 설정했습니다. 즉, 이미지가 너비와 높이 값에서 파생 된 종횡비를 유지하지만 컨테이너를 채우려면 축소되거나 확장됩니다. 이것은 이미지의 정확한 크기를 알지 못하는 경우에도 가로 세로 비율을 가지고있는 한 좋은 결과를 얻는 이유입니다.

미리보기를 저장하고 새로 고치면 이미지가 뷰포트를 가득 채워야합니다.

amp-img레이아웃 속성에 대한 자세한 내용은 다음을 참조하십시오.

"표지" 배경 이미지 근사치

오늘날 웹 디자인의 공통 요소는 뷰포트의 높이와 너비를 채우는 배경 이미지를 사용하여 페이지에 대한 항목 프리젠테이션을 만듭니다. 일반적으로 CSS background-size: cover; 가 있는 배경 이미지를 사용하여 이 작업을 수행합니다. 그것에 적용됩니다. 그러나 AMP 사이트에서는 CSS를 통해 큰 배경 이미지를 가져오고 싶지 않습니다. 시스템의 로딩 최적화를 우회 할 수 있기 때문입니다.

이제 큰 배경 이미지를 로드 하는것이 로드 속도를 높이는 데 이상적이지 않다는 주장을 분명히 할 수 있습니다. 따라서 큰 이미지를 모두 함께 내보내는 것이 더 나을 것입니다.

그러나 어쩔 수없이 큰 뷰포트 이미지가 있는 디자인을 만들어야하는 경우, 배경이 아닌 amp-img 태그를 통해 AMP의 로딩 우선 순위를 추가 할 수 있습니다. 이 과정에서 백그라운드 "커버"기술을 근사치로 설명하는 방법은 다음과 같습니다.

방금 삽입 한 이미지를 표지 이미지로 변환할 것입니다. 먼저 doc_header 클래스를 사용하여 div 태그로 이미지를 래핑하면 다음과 같이됩니다.

그런 다음 아직 작성하지 않았다면 head 섹션에 <style amp-custom>...</style>태그를 추가하여 사용자 정의 CSS를 포함시킬 수 있습니다. 태그 사이에 다음을 추가하십시오.

일반적으로 위에서 보는 것 대신에 표지 이미지를 만들 때 디자이너는 htmlbody 요소의 높이를 100%로 설정 한 다음 커버 섹션을 100% 높이로 설정하여 뷰포트를 채웁니다.

그러나로드하는 CSS가 스타일 높이를 적용하기 때문에 이 접근법은 AMP에서 작동하지 않습니다 height: auto!important; body 구성 요소에서 높이 설정을 방지 height: 100%; 일하는 것에서.

그래서 뷰포트의 높이가 될 무언가가 정말로 필요하다면 height: 100vh;를 사용할 수 있습니다. 우리가 doc_header 클래스를 사용했을 때처럼. vh 단위는 "뷰포트 높이"를 나타내고 100vh 값은 뷰포트 높이의 100 %와 같습니다.

이제 사이트를 저장하고 새로 고침하면 "doc_header"div가 뷰포트를 정확히 채우는 것을 볼 수 있습니다.

현재 이미지가 반드시 "doc_header"div를 채울 필요는 없습니다. 뷰포트의 너비가 너비보다 크면 그 아래에 빈 검은색 영역이 나타납니다.

이 문제를 해결하려면 다음과 같이 amp-img 태그에 doc_header_bg 클래스를 추가하십시오 :

그런 다음 CSS에 추가하십시오.

이 코드는 이미지 높이가 결코 뷰포트의 높이보다 작지 않도록 합니다.

불행하게도, 더 좁은 너비로 여전히 부숴지기 때문에 배경 이미지를 사용할 때처럼 우아하지는 않습니다. 그러나, 여전히 amp-img 요소를 사용하면서 얻을 수있는 근사치와 비슷합니다.

웹 폰트 사용하기

이제 우리는 사용자 정의 웹 글꼴을 템플릿에 추가 할 것입니다. AMP로 이 작업을 수행할때 유효성 검사를 통과하는 세 가지로드 메소드가 있습니다.

Google 폰트 추가하기

Google 폰트 로드는 https://www.google.com/fonts에서 원하는 폰트로 제공되는 URL을 사용하여 머리글의 링크 요소를 통해 수행해야 합니다.

우리는 Open Sans와 Libre Baskerville을 사용할 것입니다.

이 두 글꼴을 로드하려면 머리 부분에 다음 코드를 추가하십시오.

우리는 이제 새로운 웹 글꼴을 적용 할 사이트 표지 영역에 텍스트를 추가 할 것입니다. 기존 "doc_header"div에서 이미지 아래에 doc_header_inner 클래스로 새 div를 추가합니다.

해당 div 안에 다음 코드를 추가하십시오.

이제 사용자 정의 CSS에 다음을 추가하십시오.

위의 코드는 새로 추가된 텍스트를 레이아웃하기 위한 목적으로 사용되는 일반적인 CSS이지만 Google 글꼴을 AMP 템플릿에 적용하는 과정은 평소와 다를 바 없습니다. 선택한 글꼴 값과 함께 font-family 속성을 사용합니다 예 : font-family: 'Libre Baskerville';

사이트를 저장하고 새로 고침하면 두 Google 글꼴이 표지 섹션의 텍스트에 적용됩니다.

사용자 정의 폰트 추가하기

다음으로 Google Fonts 또는 Fonts.com에서 사용할 수 없는 사용자 정의 폰트를 추가하겠습니다.이 폰트는 Font Awesome입니다. 글꼴 Awesome을 사용하는 경우 MaxCDN을 통해 폰트를 로드 할 수도 있지만 AMP는 허용 된 두 폰트 중 하나가 아닌 CDN이므로 허용하지 않습니다. 따라서 우리는 @font-face를 통해 로드를 처리 할 것입니다.

폰트 파일 다운로드

폰트를 직접 로드하려면 먼저 폰트 파일을 다운로드해야 합니다. 폰트 파일은 https://fortawesome.github.io/Font-Awesome/에서 다운로드 할 수 있습니다. 다운로드 할 때 제공되는 추가 "Fort Awesome"도구가 아니라 "Font Awesome"만 필요합니다.

일단 다운로드 한 Font Awesome zip 파일을 추출한 다음, 포함된 폰트 폴더를 프로젝트 폴더에 복사하십시오.

CSS에 다음 코드를 추가합니다.

위의 코드를 사용자 정의 CSS 상단에 삽입하여 정리하는 것이 좋습니다. 이 코드는 사용자 정의 폰트 파일에 로드되며 폰트 Awesome에서 사용하기 위해 제공되는 표준 CSS 인 폰트 아이콘을 디자인에 추가하는데 사용할 수 있는 클래스를 만듭니다.

그런 다음 이 CSS를 추가하십시오.

이 추가 CSS는 링크 된 소셜 아이콘의 행을 설정하는 데 사용할 템플릿에 특정한 스타일을 추가합니다.

"doc_header_inner"div 안에 <hr> 뒤에 이 HTML을 추가하십시오.

사이트를 새로 고침하면 이전에 추가 한 텍스트 하단에 @font-face로 표시된 소셜 아이콘이 표시됩니다.

amp-font요소 통합

사용자 정의 폰트가 성공적으로 로드되지 않으면 방문자가 부러진 사이트를 보지 않게하려면 AMP가 대체 폰트를 만들 수있는amp-font 요소를 제공합니다.

이 요소를 작동 시키려면 먼저 활성화해야 하는 AMP 스크립트를 로드해야합니다. 머리 부분에 다음 코드를 추가하십시오.

이제 amp-font 요소를 사용할 준비가 되었으므로 폰트 로드에 실패하면 html 또는 body 태그에 클래스를 추가할 수 있습니다. 이 코드를 닫는 </body> 태그 앞에 템플릿 아래쪽에 추가하십시오.

이 요소에 설정된 속성을 간단히 살펴 보겠습니다. 먼저 layout="nodisplay"를 설정하여 요소가 보이지 않도록 합니다.

다음으로 속성 font-familyFontAwesome으로 설정됩니다.이 폰트는 AMP에 "FontAwesome"이라는 폰트의 로드를 추적하려고합니다. 이 값이 @font-face CSS 코드의 font-family 설정과 정확히 일치하는지 확인하십시오.

속성 timeout3000으로 설정되어 있습니다. 이는 폴백으로 이동하기 전에 폰트를 로드하는 데 최대 3초를 허용한다는 것을 의미합니다. 원하는 값으로 변경할 수 있습니다.

마지막으로, on-error-add-classfont-awesome-missing으로 설정했습니다. 폰트가 3초 후에 로드되지 않으면 이 클래스가 html 또는 body 요소에 추가됩니다. 이 코드를 맞춤 CSS에 추가하여 이 클래스를 타겟팅하여 폴백 (fallback) 동작을 만들 수 있습니다.

폰트가 3초 후에 로드되지 않으면 위에 표시된 CSS가 전체 소셜 아이콘 표시 줄을 활성화하고 숨김으로써 표시가 깨져 보이지 않게합니다.

이제 프로젝트의 폰트 폴더의 이름을 변경하여 폰트 로드에 실패한 다음 페이지를 새로 고침하면 사회 아이콘 영역이 숨겨져 보일 것입니다. 또한 html 또는 body 태그에 font-awesome-missing 클래스가 추가된 것을 볼 수 있습니다. 글꼴 폴더를 올바른 이름으로 복원하면 새로고침 시 글꼴 아이콘이 다시 나타납니다.

amp-font 요소에 대한 자세한 내용은 다음을 참조하십시오.

YouTube 동영상 추가

다음으로 YouTube 동영상을 AMP 방식으로 추가하는 방법에 대해 알아 보겠습니다. 먼저 동영상을 위한 섹션을 만들려면 간단한 정리 코드를 추가해야합니다.

"doc_header"div 다음에 기존 h1 태그를 다음 HTML로 바꿉니다.

그런 다음 사용자 정의 CSS에 추가하십시오.

팁 : AMP 페이지에서 상자 모델 다루기

위의 CSS에서 box-sizing:border-box;를 설정할 수 있습니다. standard_padding 클래스에서.

그 이유는 AMP에서 * selector가 너무 배가 고픈 것으로 간주되기 때문에 * {box-sizing : border-box}를 포함하는 일반적인 기술을 사용할 수 없기 때문입니다. 따라서 box-sizing: border-box;를 설정해야합니다. 당신이 필요로 하는 특정 요소들에 대해, 또는 옛날 방식으로 패딩을 처리하고 계산기를 사용하거나 손가락을 세면됩니다.

amp-youtube 요소 통합

섹션이 설정되고 콘텐츠 준비가 완료 되었으므로 AMP의 맞춤 amp-youtube 요소를 사용하여 YouTube 동영상을 추가할 예정입니다. 표준 YouTube 삽입 코드 대신이 요소를 사용하여 amp-img와 유사한 로딩 최적화 기술을 사용할 수 있습니다.

먼저 새 요소를 활성화하는 데 필요한 AMP JavaScript를 추가해야합니다. 헤드 섹션에 다음을 붙여 넣습니다.

이제 방금 추가한 div 안에 h2 태그 아래에 다음 HTML을 추가하십시오.

로드하려는 동영상을 지정하려면 속성 data-videoid에서 YouTube ID를 설정하십시오. 이 속성 외에도 amp-youtube 요소는 amp-img 요소와 거의 같습니다.

높이를 각각 600270으로 설정했습니다. 이미지와 마찬가지로 동영상의 너비와 높이가 초기 설정되어 있어야 합니다.

그런 다음 layout="responsive"를 사용하여 높이와 너비 설정에서 가로 세로 비율을 유지하면서 비디오가 컨테이너 크기에 맞도록합니다.

사이트를 저장하고 새로 고치고 뷰포트의 크기를 조정하십시오. YouTube 동영상은 올바른 가로 세로 비율을 유지하면서 크기에 맞게 확대 또는 축소됩니다.

amp-youtube 요소에 대한 자세한 내용은 다음을 참조하십시오.

iframe 기반 콘텐츠 추가

AMP에는 amp-twitteramp-instagram 및 기타 몇 가지 항목과 같은 특정 사이트의 콘텐츠를 로드하기 위한 추가 맞춤 구성 요소가 있습니다. 전용 AMP 요소가 없는 타사 사이트의 콘텐츠에는 amp-iframe 요소가 대신 있습니다. 이제 이 요소를 사용하여 Google지도를 페이지에 로드 할 것입니다.

'video_wrap'div 아래에 이 코드를 추가하여 지도 컨테이너를 만듭니다.

이제 amp-fontamp-youtube 요소와 마찬가지로 amp-iframe 요소를 구동하는 AMP 스크립트를  로드해야 합니다. 이것을 머리 부분에 추가하십시오 :

다음으로 새 div 및 h2 태그 아래에 다음 코드를 추가하십시오.

사이트를 새로 고침하면 현재 Google지도가 표시됩니다.

로드를 최적화 하는것 외에도 amp-iframe 요소를 사용하면 느린로드 또는 팝업 광고를 유발할 수있는 자바 스크립트 실행과 같이 iframe을 통해 볼 수 있는 콘텐츠가 원치 않는 방식으로 작동하지 않도록 할 수 있습니다. sandbox 속성을 사용하면 iframe 내용에 적용 할 컨트롤의 수준을 결정할 수 있습니다.

amp-iframe 및 해당 "샌드 박스"컨트롤에 대한 자세한 내용은 다음 사이트를 참조하십시오.

라이트 박스가있는 이미지 갤러리 설정

AMP로 작업 할 때 제한을 느끼는 것 중 하나는 사용자 정의 JavaScript가 허용되지 않는 규칙입니다. 반면에 AMP에는 맞춤 자바 스크립트를 통해 일반적으로 구현할 수 있는 일부 기능을 제공하는 맞춤 요소가 포함되어 있습니다.

예를 들어, 사용자 정의 라이트 박스 스크립트를로드하는 대신 amp-image-lightbox 요소를 사용할 수 있습니다. 이제 이 요소를 사용하는 이미지 갤러리를 만들 것입니다.

amp-font 태그 바로 위에 다음 코드를 추가하여 갤러리 용 컨테이너를 만듭니다.

또한 이것을 사용자 정의 CSS에 추가하십시오.

마지막 몇 가지 맞춤 구성 요소처럼 amp-image-lightbox 요소를 사용하려면 AMP 스크립트를 로드해야 합니다. 이것을 머리 부분에 추가하십시오 :

이제 라이트 박스 갤러리를 설치할 준비가 되었습니다. h2 태그 아래에 새 div 안에 이 코드를 추가하여 시작하십시오.

amp-image-lightbox 요소는 확대 된 이미지가 포함된 실제 라이트 박스 디스플레이를 만듭니다. 사용자가 확대하려는 이미지를 클릭 할 때까지 숨기기를 원하므로 layout="nodisplay"로 설정합니다.

참고: 이 요소의 ID를 lightbox1로 설정했습니다.

갤러리에 항목을 추가하려면 이 div를 amp-image-lightbox 요소 아래에 추가하십시오.

그런 다음 내부에 이 amp-img 코드를 추가하십시오.

대부분 이 amp-image 요소는 이전에 추가 한 것과 동일하지만 on="tap:lightbox1" 이 추가 되었음을 알 수 있습니다. 이미지가 탭/클릭되었을 때 AMP는 id가 lightbox1인 라이트 박스, 즉 방금 만든 amp-image-lightbox 요소에서 더 큰 버전을 열어야한다고 알려줍니다.

다음 코드를 사용하여 갤러리에 7개의 이미지를 추가하십시오.

저장하고 새로 고침하면 페이지에 다음과 같은 갤러리가 표시됩니다.

이미지 중 하나를 클릭하면 다음과 같은 라이트 박스에서 열립니다.

amp-image-lightbox에 대한 자세한 내용을 보려면 다음 사이트를 방문하십시오.

마무리

이제 가장 일반적인 유형의 컨텐츠가 포함된 기본 AMP 페이지와 효율적으로 작업하고 AMP의 유효성 검사 규칙을 유지하는 데 도움이되는 몇 가지 간단한 트릭이 있습니다.

우리가 다룬 내용의 요점을 되짚어 보겠습니다.

  • 상용구 코드로 시작하십시오.
  • 로컬 호스트 미리보기를 사용하십시오. MAMP 권장
  • 미리보기 URL에 #development=1을 추가하고 Chrome 개발자 도구 콘솔을 보고 디버그를 사용합니다.
  • JSON 메타 데이터를 포함 시키려면 Schema.org를 선택하십시오.
  • 빠른 팁을 통해 인라인 CSS를 보다 쉽게 ​​처리하십시오.
  • 사용 가능한 경우 기본 HTML 요소 대신 AMP 사용자 정의 요소 사용
  • 필요한 경우 사용자 정의 요소를 구동하는 추가 AMP JavaScript로드
  • amp-font 요소를 사용하여 Google 폰트, Fonts.com 또는 @font-face를 통해 맞춤 폰트로드
  • 맞춤 자바 스크립트 대신 내장 된 AMP 맞춤 요소에서 사용합니다 (예 : lightbox 스크립트 대신에 amp-image-lightbox

이 모든 것이 AMP 페이지를 만드는 과정을 명확히하여 라이브 사이트를 처음부터 구축 할 수 있다고 확신 할 수 있기를 바랍니다. 이제 나가서 AMP로 가속화 된 웹 사이트를 만드십시오!

연습 할 HTML 템플릿

이 튜토리얼의 내용 이외에 다른 연습을 원할 경우 방문 페이지 템플릿 중 일부를 살펴보십시오.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.