구글 AMP – 스타일 및 CSS - 구글 블로그 AMP

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 – 레이아웃에서 자세히 설명합니다.

구글 블로그 AMP

이 블로그 검색

구글 AMP – 스타일 및 CSS

Amp 스타일 태그

외부 스타일 시트 태그

예제

관심 있을 만한 글

댓글 쓰기

Live Blogger