인라인 <style> 블록과 표준 CSS를 사용하여 Gmail로 전송되는 이메일의 스타일을 지정할 수 있습니다. 대부분의 CSS 선택 도구, 속성, 미디어 쿼리가 지원됩니다.
지원되지 않는 CSS 속성 및 선택기는 Gmail에서 무시될 수 있습니다.
지원되는 CSS 속성 및 쿼리의 전체 목록은 참조 가이드를 참고하세요.
CSS 선택자
CSS 선택기의 하위 집합을 사용하여 스타일을 적용할 수 있습니다. Gmail은 클래스, 요소, ID 선택기를 지원합니다.
예
<html>
<head>
<style>
.colored {
color: blue;
}
#body {
font-size: 14px;
}
</style>
</head>
<body>
<div id='body'>
<p>Hi Pierce,</p>
<p class='colored'>This text is blue.</p>
<p>Jerry</p>
</div>
</body>
</html>
CSS 미디어 쿼리
표준 CSS 미디어 쿼리를 사용하여 사용자의 현재 기기에 맞게 이메일의 스타일을 조정할 수 있습니다. Gmail은 화면 너비, 방향, 해상도에 대한 쿼리를 지원합니다.
예
<html>
<head>
<style>
.colored {
color: blue;
}
#body {
font-size: 14px;
}
@media screen and (min-width: 500px) {
.colored {
color:red;
}
}
</style>
</head>
<body>
<div id='body'>
<p>Hi Pierce,</p>
<p class='colored'>
This text is blue if the window width is
below 500px and red otherwise.
</p>
<p>Jerry</p>
</div>
</body>
</html>
지원되는 CSS 속성 및 쿼리
Gmail에서는 다음 CSS 속성이 지원됩니다.
- azimuth
- background
- background-blend-mode
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-repeat
- background-size
- border
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- border-collapse
- border-color
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-spacing
- border-style
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- border-width
- box-sizing
- break-after
- break-before
- break-inside
- caption-side
- clear
- 색상
- column-count
- column-fill
- column-gap
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- column-span
- column-width
- 열
- direction
- 화면 표시
- elevation
- empty-cells
- float
- 글꼴
- font-family
- font-feature-settings
- font-kerning
- font-size
- font-size-adjust
- font-stretch
- font-style
- font-synthesis
- font-variant
- font-variant-alternates
- font-variant-caps
- font-variant-east-asian
- font-variant-ligatures
- font-variant-numeric
- font-weight
- 높이
- image-orientation
- image-resolution
- ime-mode
- 격리
- layout-flow
- layout-grid
- layout-grid-char
- layout-grid-char-spacing
- layout-grid-line
- layout-grid-mode
- layout-grid-type
- letter-spacing
- line-break
- line-height
- list-style
- list-style-position
- list-style-type
- margin
- margin-bottom
- margin-left
- margin-right
- margin-top
- marker-offset
- max-height
- max-width
- min-height
- min-width
- mix-blend-mode
- object-fit
- object-position
- opacity
- 개요
- outline-color
- outline-style
- outline-width
- overflow
- overflow-x
- overflow-y
- 패딩
- padding-bottom
- padding-left
- padding-right
- padding-top
- page-break-after
- page-break-before
- page-break-inside
- 일시중지
- pause-after
- pause-before
- 투구
- pitch-range
- 인용문
- richness
- 말하기
- speak-header
- speak-numeral
- speak-punctuation
- speech-rate
- stress
- table-layout
- text-align
- text-align-last
- text-autospace
- text-combine-upright
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-skip
- text-decoration-style
- text-emphasis
- text-emphasis-color
- text-emphasis-style
- text-indent
- text-justify
- text-kashida-space
- text-orientation
- text-overflow
- text-transform
- text-underline-position
- unicode-bidi
- vertical-align
- voice-family
- white-space
- width
- word-break
- word-spacing
- word-wrap
- writing-mode
- 확대/축소
지원되는 미디어 쿼리
지원되는 유형
- 모두
- 화면
지원되는 쿼리
- min-width
- max-width
- min-device-width
- max-device-width
- 방향
- min-resolution
- max-resolution
지원되는 키워드
- 및
- 전용