실행 가능한 CSS 문서: 인라인 CSS

Q: 인라인 CSS란 무엇인가요?

요소의 style 속성에 적은 CSS예요. 처럼 쓰고, 선택자 없이 그 요소 하나에만 적용돼요.

Q: HTML에 CSS를 적용하는 3가지 방법은 무엇인가요?

요소의 style 속성에 쓰는 인라인, 페이지 안의 요소에 쓰는 내부, 그리고 에서 로 불러오는 별도 .css 파일인 외부 방식이 있어요. 사이트 전체에는 보통 외부 파일을 써요.

Q: 인라인 CSS가 외부 CSS보다 우선하나요?

대부분 그래요. style 속성의 선언은 명시도와 상관없이 스타일시트의 어떤 선택자보다 이겨요. 스타일시트가 이기는 방법은 !important뿐이고, 인라인에 !important를 쓰면 그것마저 이겨요.

Q: 인라인 CSS는 나쁜 습관인가요?

사이트 전체를 꾸미는 용도라면 그래요. 같은 코드가 반복되고, :hover나 미디어 쿼리를 쓸 수 없고, 덮어쓰기도 어려워요. 진행 막대의 너비나 사용자가 고른 색처럼 JavaScript나 템플릿이 넣는 개별 값에는 괜찮아요.

Q: 인라인 CSS에서 hover를 쓸 수 있나요?

없어요. style 속성은 선언만 받기 때문에 :hover 같은 가상 클래스, ::before 같은 가상 요소, @media 규칙은 쓸 수 없어요. 요소나 스타일시트에 넣으세요.

인라인 CSS: style 속성과 CSS를 적용하는 3가지 방법

인라인 CSS는 style 속성으로 요소에 선언을 직접 적어요. 문법, 인라인 스타일이 맞는 상황, 스타일시트보다 우선하는 이유, 내부 CSS와 외부 CSS와의 차이를 알아봐요.

이 페이지에는 실행 가능한 에디터가 있습니다 - 편집하고 실행하면 결과를 바로 볼 수 있습니다.

작성자 Kevin Spektor, Co-founder & CTO

Sep 24, 2026 게시됨

인라인 CSS란

인라인 CSS는 style 속성으로 HTML 요소에 직접 적는 CSS예요. 값은 property: value; 형태의 선언 목록이고, 그 요소에만 적용돼요.

<p>A normal paragraph.</p>

<p style="color: #2563eb;">A blue paragraph.</p>

<p style="color: #16a34a; font-weight: bold; font-size: 20px;">
  Green, bold and 20px.
</p>

선택자도 중괄호도 없어요. 속성이 붙은 요소가 곧 대상이에요. 선언은 세미콜론으로 구분해요. 마지막 세미콜론은 생략할 수 있지만, 남겨 두면 다음 선언을 안전하게 추가할 수 있어요.

문법

<element style="property: value; property: value;">

부분	예시	설명
속성	`style="..."`	전역 속성이라 모든 HTML 요소에 쓸 수 있어요
선언	`color: #2563eb;`	스타일시트 규칙 안과 같은 문법이에요
여러 선언	`padding: 8px; border: 1px solid #e5e7eb;`	`;`로 구분해요
안쪽 따옴표	`style="font-family: 'Courier New', monospace;"`	큰따옴표로 감싼 속성 안에서는 작은따옴표를 써요

선언이 아닌 것은 쓸 수 없어요. :hover, ::before, @media, 선택자는 style 속성에 들어갈 자리가 없어요.

HTML에 CSS를 적용하는 3가지 방법

CSS가 페이지에 들어가는 방법은 세 가지예요. 이 페이지는 첫 번째를 다루고, 외부 CSS와 내부 CSS는 따로 설명해요.

방법	CSS가 있는 곳	범위	주로 쓰는 곳
인라인	요소 하나의 `style` 속성	그 요소	개별 값, JavaScript가 넣는 값
내부	페이지 안의 `<style>` 요소	그 페이지	한 페이지짜리 데모, 이메일 템플릿, 핵심 CSS
외부	`<link>`로 연결한 `.css` 파일	파일을 연결한 모든 페이지	사이트 전체 스타일

같은 문단을 세 가지 방법으로 꾸며 봤어요(미리보기는 두 번째 파일을 불러올 수 없어서 외부 파일은 주석으로 보여 줘요).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Three ways</title>
  <!-- External: <link rel="stylesheet" href="styles.css"> -->
  <style>
    /* Internal: one rule styles every matching element */
    .note {
      background: #e5e7eb;
      padding: 8px 12px;
      border-radius: 6px;
    }
  </style>
</head>
<body>
  <p class="note">Styled by the internal rule.</p>
  <p class="note">Same rule, second paragraph.</p>
  <p class="note" style="background: #f59e0b;">Inline background wins here.</p>
</body>
</html>

세 번째 문단은 .note 규칙의 padding과 radius를 그대로 유지하고 배경만 바꿔요. 인라인 스타일이 그 속성 하나만 지정하기 때문이에요.

인라인 스타일이 이기는 이유

스타일시트 규칙과 인라인 스타일이 같은 속성을 지정하면 인라인 스타일이 이겨요. 선택자가 얼마나 구체적인지는 상관없어요. ID 선택자도 져요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inline wins</title>
  <style>
    #title { color: #16a34a; }
    p { color: #111827; }
  </style>
</head>
<body>
  <p id="title" style="color: #2563eb;">Blue: the inline style beats the ID selector.</p>
</body>
</html>

예외는 !important 하나예요. 스타일시트에서 !important를 붙인 선언은 일반 인라인 선언을 이기고, 인라인 !important는 둘 다 이겨요. 인라인 스타일이 사이트 유지보수를 어렵게 만드는 이유가 여기 있어요. 스타일시트에서 바꾸려면 !important가 필요하고, 그러면 경쟁이 시작돼요. 전체 우선순위는 !important 페이지에서 다뤄요.

인라인 CSS가 맞는 경우

값이 디자인이 아니라 데이터일 때 인라인 스타일이 잘 맞아요. 요소마다 달라지고 템플릿이나 JavaScript가 적는 값이에요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Progress</title>
  <style>
    .track { background: #e5e7eb; border-radius: 999px; height: 12px; }
    .bar { background: #2563eb; height: 100%; border-radius: 999px; }
  </style>
</head>
<body>
  <p>Upload</p>
  <div class="track"><div class="bar" style="width: 35%;"></div></div>
  <p>Download</p>
  <div class="track"><div class="bar" style="width: 80%;"></div></div>
</body>
</html>

모양(색, 높이, radius)은 스타일시트에 있어요. 막대마다 다른 너비만 인라인이에요. JavaScript는 element.style로 같은 속성을 적어요.

<button id="btn">Make it amber</button>
<p id="msg">Watch this text.</p>
<script>
  document.getElementById('btn').addEventListener('click', () => {
    const msg = document.getElementById('msg');
    msg.style.color = '#f59e0b';
    msg.style.fontWeight = 'bold';
  });
</script>

클릭하고 나면 문단의 HTML은 style="color: rgb(245, 158, 11); font-weight: bold;"가 돼요. 하이픈이 들어간 속성 이름은 JavaScript에서 camelCase가 돼요(font-weight는 fontWeight).

CSS 변수가 가장 깔끔한 절충안일 때가 많아요. 인라인에는 변수만 style="--progress: 35%"처럼 지정하고, 스타일시트가 그 변수를 쓰게 하세요. CSS 변수를 참고하세요.

인라인 CSS의 한계

상태와 가상 요소를 쓸 수 없어요. style 속성에는 :hover, :focus, ::before를 적을 수 없어요.
미디어 쿼리를 쓸 수 없어요. 인라인 너비는 휴대폰에서 바뀌지 않아요.
반복돼요. 같은 인라인 스타일을 가진 버튼이 열 개면 고칠 곳도 열 군데예요.
덮어쓰기 어려워요. 스타일시트의 !important만 이길 수 있어요.
Content Security Policy. style-src에 'unsafe-inline'이 없는 엄격한 CSP는 HTML에 적은 style 속성을 막아요.

자주 하는 실수

style 안에 선택자나 중괄호 쓰기. style="p { color: red }"는 무시돼요. 선언만 넣을 수 있어요.
: 대신 = 쓰기. color=red가 아니라 color: red예요.
큰따옴표 중첩. style="font-family: "Arial""은 속성을 일찍 끝내요. 안쪽에는 작은따옴표를 쓰세요.
단위 빠뜨리기. style="width: 200"은 무시돼요. 200px로 쓰세요. 단위를 생략할 수 있는 길이는 0뿐이에요.
사이트 전체를 인라인으로 꾸미기. 반복되는 스타일은 스타일시트의 클래스로 옮기고, 인라인 스타일은 요소마다 다른 값에만 쓰세요.

자주 묻는 질문

인라인 CSS란 무엇인가요?

요소의 style 속성에 적은 CSS예요. <p style="color: red;">처럼 쓰고, 선택자 없이 그 요소 하나에만 적용돼요.

HTML에 CSS를 적용하는 3가지 방법은 무엇인가요?

요소의 style 속성에 쓰는 인라인, 페이지 안의 <style> 요소에 쓰는 내부, 그리고 <head>에서 <link rel="stylesheet" href="styles.css">로 불러오는 별도 .css 파일인 외부 방식이 있어요. 사이트 전체에는 보통 외부 파일을 써요.

인라인 CSS가 외부 CSS보다 우선하나요?

대부분 그래요. style 속성의 선언은 명시도와 상관없이 스타일시트의 어떤 선택자보다 이겨요. 스타일시트가 이기는 방법은 !important뿐이고, 인라인에 !important를 쓰면 그것마저 이겨요.

인라인 CSS는 나쁜 습관인가요?

사이트 전체를 꾸미는 용도라면 그래요. 같은 코드가 반복되고, :hover나 미디어 쿼리를 쓸 수 없고, 덮어쓰기도 어려워요. 진행 막대의 너비나 사용자가 고른 색처럼 JavaScript나 템플릿이 넣는 개별 값에는 괜찮아요.

인라인 CSS에서 hover를 쓸 수 있나요?

없어요. style 속성은 선언만 받기 때문에 :hover 같은 가상 클래스, ::before 같은 가상 요소, @media 규칙은 쓸 수 없어요. <style> 요소나 스타일시트에 넣으세요.