인라인 CSS는 스타일시트(<p style="color:#b91c1c">)가 아닌 style 속성에서 요소 자체에 배치되는 규칙입니다.
이는 일반 규칙 중 가장 높은 특수성을 가지므로 스타일시트에 명시된 모든 내용을 적용하며 요소 간에 공유할 수 없습니다. 이 두 가지 사실이 그것이 어디에 속하는지 결정합니다.
이 가이드에서는 인라인이 올바른 두 가지 경우, 나머지 시간에는 왜 잘못된지, 구체적으로 구체적으로 설명하고 하나의 파일로 전송될 페이지에 대해 인라인, 내부 및 외부 스타일이 어떻게 관련되는지를 다룹니다.
CSS가 존재할 수 있는 세 가지 장소:
<!-- inline: one element -->
<p style="color:#52525b;font-size:14px">…</p>
<!-- a style tag: this document -->
<style> p { color:#52525b; font-size:14px } </style>
<!-- an external file: many documents -->
<link rel="stylesheet" href="styles.css">
Inline은 브라우저가 이를 가능한 가장 구체적인 규칙으로 처리하기 때문에 이들 사이의 충돌에서 승리합니다.
인라인 CSS가 올바른 두 가지 경우
1. 런타임 시 계산된 값
<span class="track"><i class="fill" style="width:78%"></i></span>
78%는 데이터에서 나옵니다. 스타일시트는 이를 알 수 없기 때문에 스타일시트에 존재할 수 없습니다. 색상, 높이, 반경, 전환 등 막대에 관한 다른 모든 항목은 클래스에 속합니다.
.fill { display: block; height: 100%; background: var(--accent); border-radius: 6px; }
이러한 분할은 모든 차트에 적합한 패턴입니다. 숫자는 인라인, 클래스의 모양입니다.
2. 이메일
이메일 클라이언트는 <style> 블록을 예측할 수 없게 제거하고 작고 일관성이 없는 CSS 하위 집합을 지원합니다. 모든 요소에 대한 인라인 스타일이 살아남는 유일한 접근 방식이므로 마케팅 이메일은 여전히 2004 마크업처럼 보입니다. 페이지를 링크로 보내면 전체 영역을 피하는 이유는 이메일로 HTML 보내기를 참조하세요.
나머지 시간에는 왜 잘못된 걸까요?
반복됩니다. 40개 행에 동일한 선언이 40개 복사됩니다. 하나의 클래스는 하나의 사본입니다. 이것이 생성된 페이지가 길이 제한에 도달하는 주된 이유입니다.
조건을 보유할 수 없습니다. 미디어 쿼리 없음, :hover 없음, :focus 없음, prefers-color-scheme 없음. 반응형이거나 대화형인 모든 항목은 인라인으로 접근할 수 없습니다.
<!-- impossible inline -->
<div style="@media (max-width: 600px) { ... }">
재정의하기 어렵습니다. 스타일시트에서 인라인 스타일을 재정의하려면 !important가 필요하며, 그런 다음 다른 !important로 재정의해야 합니다. 거기에서 두 단계만 지나면 캐스케이드를 읽을 수 없습니다.
별도로 캐시할 수 없습니다. 스타일시트는 한 번 다운로드되면 여러 페이지에서 재사용됩니다. 인라인 스타일은 모든 문서의 모든 사본과 함께 제공됩니다.
구체적으로, 구체적으로
| 소스 | 승리 |
|---|---|
스타일시트의 !important |
다른 !important 인라인을 제외한 모든 것 |
style="…" |
모든 일반 선택기 |
#id |
클래스 및 요소 |
.class |
요소 |
p |
아무것도 |
디버깅 참고 사항: 규칙 적용을 거부하고 검사관이 이를 취소한 것으로 표시하는 경우 요소에서 style 속성을 찾으세요. 이것이 특정성 오산보다 더 자주 발생하는 원인입니다.
단일 자체 포함 파일의 경우
혼자 이동해야 하는 페이지는 모든 곳에서 인라인 스타일이 아닌 헤드에 <style> 블록을 사용해야 합니다. 두 가지 속성을 한 번에 얻을 수 있습니다. 하나의 파일 내의 모든 항목과 재사용할 수 있고 미디어 쿼리를 보유할 수 있는 규칙입니다.
<head>
<style>
* { box-sizing: border-box; }
body { font-family: -apple-system, "Segoe UI", sans-serif; margin: 0; }
.card { border: 1px solid #e7e7ea; border-radius: 12px; padding: 15px; }
@media (max-width: 700px) { .cards { grid-template-columns: 1fr; } }
</style>
</head>
이는 모든 프롬프트에서 요청하는 배열입니다. 자체 포함 HTML을 참조하세요.
결정 테이블
| 상황 | 인라인 | <style> 블록 |
외부 파일 |
|---|---|---|---|
| 데이터에서 계산된 너비 | 예 | ||
| 이메일 본문 | 예 | ||
| 한 페이지를 파일로 보냈습니다. | 예 | ||
| 포함되거나 미리 볼 페이지 | 예 | ||
| 어시스턴트가 생성한 페이지 | 예 | ||
| 여러 페이지로 구성된 사이트 | 예 | ||
| 호버 또는 포커스 상태 | 예 | 예 | |
| 미디어 쿼리 | 예 | 예 | |
| 다크 모드 | 예 | 예 |
아래쪽 세 행은 인라인이 불가능하며 이는 선호 사항이 아닌 하드 제한입니다.
특이성 결과
인라인 스타일은 스타일시트의 모든 선택기보다 우수하므로 하나를 재정의하려면 !important가 필요하고 그를 재정의하려면 또 다른 !important가 필요합니다. 두 단계만 거치면 어느 규칙이 승리할지 누구도 예측할 수 없습니다.
실용적인 디버깅 참고 사항: 규칙 적용을 거부하고 검사관이 해당 규칙을 적용한 것으로 표시하면 특이성을 다시 계산하기 전에 요소에서 style 속성을 찾으세요. 이것이 선택기 실수보다 더 자주 발생하는 원인입니다.
단일 파일 페이지의 경우 헤드의 <style> 블록은 인라인이 제공하는 모든 것을 제공합니다. 즉, 가져올 것이 없고 자체 포함이며 미디어 쿼리와 상태를 계속 사용할 수 있습니다. 이메일을 제외하고 문서를 통해 인라인 스타일을 분산시키는 것이 그보다 나은 경우는 없습니다.
인라인 스타일이 다른 모든 것과 상호 작용하는 방식
인라인 규칙은 스타일시트 규칙이 !important를 포함하지 않는 한 스타일시트의 모든 선택기보다 구체적이지만 더 우수합니다.
이것이 인라인 스타일로 가득 찬 생성된 페이지의 스타일을 다시 지정하기가 매우 어려운 이유입니다. 새 스타일시트는 모든 속성이 하나씩 제거되거나 재정의될 때까지 아무 작업도 수행하지 않습니다.
또한 막대 차트의 너비가 인라인에 속하고, 스타일시트가 재정의되어서는 안 되는 요소별 값이며, 색 구성표가 재정의되지 않는 이유도 있습니다. 한 곳에서 변경할 수 있어야 하기 때문입니다.
이메일 예외에 대한 자세한 내용
메일 클라이언트는 CSS의 작은 하위 집합을 렌더링하고 그 중 다수는 헤드에서 <style> 블록을 제거하므로 마케팅 이메일은 적용되는 요소에 인라인된 모든 규칙을 사용하여 구축됩니다.
이는 스타일 선택이 아니라 매체의 제약이며, 보내기 전에 자동으로 스타일시트를 인라인하는 도구가 있습니다.
브라우저에서 읽는 페이지의 경우 동일한 기술이 순수 비용입니다. 이메일 대 링크는 받은편지함에 남아 있는 내용을 다룹니다.
규칙이 있는 위치 선택: 4단계
- 요소별로 계산된 값에는 인라인을 사용합니다. 막대의 너비, 데이터에 따라 결정되는 색상입니다. 값은 해당 요소에 속하며 다른 요소에는 속하지 않습니다.
- 이메일에는 인라인을 사용하세요. 메일 클라이언트는 대부분의 경우 스타일 블록을 제거합니다. 인라인은 페이스트에서 살아남는 것입니다.
- 보내려는 페이지의 다른 모든 항목에는
<style>블록을 사용하세요. 재사용 가능하고 읽기 가능하며 파일과 함께 이동합니다. 이것이 바로 자체 포함 페이지에 필요한 것입니다. - 외부 파일은 페이지가 많은 사이트에만 사용하세요. 단일 페이지가 단독으로 전송되는 경우 파일이 함께 오지 않으므로 절대 사용하지 마세요.