이메일용 AMP 지원 CSS
Important: this documentation is not applicable to your currently selected format websites!
이 문서는 현재 AMP 이메일에서 지원되는 CSS 기능을 간략하게 설명합니다.
CSS 적용
내부 스타일시트
내부 스타일시트를 사용할 경우 이메일의 <head> 태그에 포함된 단일한 <style amp-custom> 태그 내부에 CSS가 지정됩니다.
인라인 스타일
내부 스타일시트에 추가로 style 속성을 사용하여 모든 요소에 인라인 스타일을 지정할 수 있습니다.
외부 스타일시트
이메일용 AMP에서 외부 스타일시트는 지원되지 않습니다.
이메일 어디에도 <link rel="stylesheet" href="...">는 허용되지 않습니다.
지원되는 CSS 선택자
단순 선택자
결합자
의사 클래스
:active:checked:default:disabled:empty:enabled:first-child:first-of-type:focus:focus-within:hover:in-range:indeterminate:invalid:last-child:last-of-type:last-of-type:not:nth-child:nth-last-child:nth-last-of-type:nth-of-type:only-child:only-of-type:optional:out-of-range:read-only:read-write:required:valid
지원되는 CSS 속성
-moz-appearance-webkit-appearance-webkit-tap-highlight-coloralign-contentalign-itemsalign-selfappearanceazimuthbackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-colorclearcolorcolor-adjustcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscounter-incrementcounter-resetcursordirectiondisplayelevationempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfontfont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-synthesisfont-variantfont-variant-alternatesfont-variant-capsfont-variant-east-asianfont-variant-ligaturesfont-variant-numericfont-variation-settingsfont-weightgapgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-startgrid-rowgrid-row-endgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowsheighthyphensimage-orientationimage-resolutioninline-sizeisolationjustify-contentjustify-itemsjustify-selfleftletter-spacingline-breakline-heightlist-stylelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-widthmin-heightmin-widthmix-blend-modeobject-fitobject-positionoffset-distanceopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-yoverflow-wrappaddingpadding-bottompadding-leftpadding-rightpadding-toppausepause-afterpause-beforeperspectiveperspective-originpitchpitch-rangeplace-itemspositionquotesresizerichnessrightrow-gapspeakspeak-headerspeak-numeralspeak-punctuationspeech-ratestresstable-layouttext-aligntext-align-lasttext-combine-uprighttext-decorationtext-decoration-colortext-decoration-linetext-decoration-skiptext-decoration-styletext-emphasistext-emphasis-colortext-emphasis-positiontext-emphasis-styletext-indenttext-justifytext-orientationtext-overflowtext-shadowtext-transformtext-underline-positiontoptransformtransform-boxtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidivertical-alignvisibilityvoice-familywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index
추가 제한 사항
다음 CSS 속성에는 추가 제한 사항이 있습니다.
| 속성 | 제한 사항 |
|---|---|
cursor |
허용되는 값은 pointer 및 initial뿐입니다. |
filter |
url()은 허용되지 않습니다. |
transition |
opacity, transform, visibility 및 offset-distance에만 애니메이션 적용이 가능합니다. |
visibility |
허용되는 값은 hidden, visible 및 initial뿐입니다. |
z-index |
-100~100 사이의 값만 허용됩니다. |
@-규칙
현재 지원되는 @-규칙은 @media뿐입니다. 자세한 내용은 미디어 기능을 참조하세요.
사용자 지정 글꼴(@font-face)
이메일용 AMP에서 사용자 지정 글꼴은 지원되지 않습니다.
미디어 기능
@media 쿼리를 통한 조건부 적용 규칙에 지원되는 미디어 기능 목록입니다.
device-widthmax-device-widthmin-device-widthhoverorientationpointerresolutionmax-resolutionmin-resolutionwidthmax-widthmin-width