Amp 태그 amp-fit-text는 디스플레이를 렌더링하기에 공간이 충분하지 않은 경우 글꼴 크기를 줄입니다. 이 글에서는 이 태그에 대해 자세히 설명합니다.
amp-fit-text가 작동하도록 하려면 다음 스크립트를 추가해야 합니다.
<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>
AmpFit-Text 태그
amp-fit-text 태그의 형식은 다음과 같습니다.
<amp-fit-text width="200"
height="200"
layout="responsive">
Text here
</amp-fit-text>
예제
예제를 통해 이 태그를 더 잘 이해하도록 하겠습니다.
<!doctype html>
<html ⚡ lang="ko">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Fit-Text</title>
<link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-fit.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>
<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>
</head>
<body>
<h1>Google AMP - Amp Fit-Text</h1>
<div style="width:150px;height:150px;">
<amp-fit-text width="150"
height="150"
layout="responsive">
<b>Welcome To TutorialsPoint - You are browsing the best resource for Online Education</b>
</amp-fit-text>
</div>
</body>
</html>
결과
위에 주어진 코드의 출력은 다음과 같습니다.
amp-fit-text를 사용하는 디스플레이가 표시되면 콘텐츠가 사용 가능한 공간에 따라 조정을 시도합니다.
Amp-fit-text에는 max-font-size 및
min-font-size 2개의 속성이 있습니다.
- max-font-size를 사용하고 텍스트를 렌더링하는 데 공간을 사용할 수 없는 경우 크기를 줄이고 사용 가능한 공간 내에서 조정하려고 합니다.
- min-font-size를 지정하고 공백을 사용할 수 없는 경우 텍스트를 자르고 텍스트가 숨겨진 곳에 점을 표시합니다.
예제
max-font-size와 min-font-size를 모두 amp-fit-text에 지정하는 작업 예제를 살펴보겠습니다.
<!doctype html>
<html ⚡ lang="ko">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Fit-Text</title>
<link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-fit.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>
<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>
</head>
<body>
<h1>Google AMP - Amp Fit-Text</h1>
<div style="width:150px;height:150px;">
<amp-fit-text width="150"
height="150"
layout="responsive"
max-font-size="30"
min-font-size="25">
<b>Welcome To TutorialsPoint - You are browsing the best resource for Online Education</b>
</amp-fit-text>
</div>
</body>
</html>