Amp는 많은 주의를 기울인 후 화면에 페이지를 렌더링합니다. 로드된 페이지에는 http 요청이 더 많은 이미지, 동영상, iframe 등이 포함됩니다. 따라서 수행해야 할 http 요청이 지연되어 페이지의 콘텐츠가 표시되고 이미지, 동영상, iframe이 로드되는 데 필요한 공간이 생성됩니다.
Amp에는 페이지가 반응하도록하고 페이지의 콘텐츠가 방해받지 않도록 하는 placeholder, fallback, srcset 및 layout 속성과 같은 기능이 있습니다. 이 글에서는 이 모든 것에 대해 자세히 설명하겠습니다.
Amp 스타일 태그
Amp에는 아래와 같이 amp-custom이 있는 스타일 태그가 있습니다.
<style amp-custom>
button{
background-color: #ACAD5C;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: left;
}
amp-img {
border: 1px solid black;
border-radius: 4px;
padding: 5px;
}
p {
padding: 1rem;
font-size:25px;
}
largeText {
font-size:30px;
background-color:red;
}
</style>
amp-custom 속성은 기본적으로 amp 페이지에 필요한 사용자 정의 CSS를 작성하는 데 사용됩니다. amp-custom 속성을 추가하는 것을 잊지 마십시오. 그렇지 않으면 아래와 같이 amp 유효성 검사에 실패합니다.
Amp는 또한 아래와 같이 HTML 요소에 대한 인라인 CSS를 지원합니다.
<p style="color:green;margin-left:30px;">Welcome to TutorialsPoint</p>
외부 스타일 시트 태그
Amp는 외부 스타일 시트를 지원하지 않으며 amp에 대해 유효성을 검사할 때 유효성 검사에 실패합니다.
예제
<!doctype html>
<html ⚡ lang="ko">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Styles and Custom CSS</title>
<link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-styles-and-custom-css.html">
<meta name="viewport" content="width=device-width,minimum-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
<style amp-custom>
p {
padding: 1rem;
font-size:25px;
}
</style>
</head>
<body>
<h3>Google AMP - Styles and Custom CSS</h3>
<p style="color:green;margin-left:30px;">Welcome to TutorialsPoint</p>
</body>
</html>
AMP 유효성 검사기로 유효성을 검사하면 다음 오류가 발생합니다.
페이지의 요소를 반응형으로 표시하려면 amp 요소가 페이지에서 요소가 차지할
너비와 높이를 지정해야 합니다. layout="responsive"을 추가하면
페이지에서 요소가 종횡비를 유지하면서 반응하게 됩니다.
레이아웃 속성에 대한 자세한 내용은 Google AMP – 레이아웃에서 자세히 설명합니다.