CSS 추가 방법

브라우저가 스타일 시트를 읽을 때, 스타일 시트 내의 정보를 기반으로 HTML 문서를 포맷합니다。

CSS 사용 방법 세 가지

스타일 시트를 삽입하는 방법이 세 가지 있습니다：

  • 외부 CSS
  • 내부 CSS
  • 행내 CSS

외부 CSS

외부 스타일 시트를 사용하면 하나의 파일만 수정하여 전체 웹사이트의 외관을 바꿀 수 있습니다!

각 HTML 페이지는 head 부분의 <link> 요소 내에 외부 스타일 시트 파일 참조를 포함해야 합니다。

예제

HTML 페이지의 <head> 부분 내의 <link> 요소에서 외부 스타일을 정의합니다：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

본인이 직접 시도해 보세요

외부 스타일 시트는 어떤 텍스트 편집기에서도 작성할 수 있으며, .css 확장자로 저장해야 합니다.

외부 .css 파일은 어떤 HTML 태그도 포함하지 않아야 합니다.

"mystyle.css"은 다음과 같습니다：

"mystyle.css"

body {
  background-color: lightblue;
}
h1 {
  color: navy;
  margin-left: 20px;
}

주의：속성 값과 단위 사이에 공간을 추가하지 마세요(예를 들어 margin-left: 20 px;）。 올바른 작성법은 다음과 같습니다：margin-left: 20px;

내부 CSS

HTML 페이지가 유일한 스타일을 가지고 있다면, 내부 스타일 시트를 사용할 수 있습니다.

내부 스타일은 head 부분의 <style> 요소에서 정의됩니다.

예제

내부 스타일은 HTML 페이지의 <head> 부분 내의 <style> 요소에서 정의됩니다:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}
h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

본인이 직접 시도해 보세요

행내 CSS

행내 스타일(또는 내부 스타일)은 단일 요소에 독특한 스타일을 적용하는 데 사용됩니다.

행내 스타일을 사용하려면, 관련 요소에 style 속성을 추가하세요. style 속성은 어떤 CSS 속성도 포함할 수 있습니다.

예제

행내 스타일은 관련 요소의 "style" 속성 내에서 정의됩니다:

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>

본인이 직접 시도해 보세요

ヒント：행내 스타일은 스타일 시트의 많은 장점을 잃습니다(콘텐츠와 표현을 결합함). 이 방법을 신중하게 사용하세요.

여러 스타일 시트

같은 선택자(요소)에 대해 여러 스타일 시트에서 속성을 정의한 경우, 마지막으로 읽은 스타일 시트의 값을 사용합니다.

어떤 것을 가정해 보겠습니다외부 스타일 시트아래와 같은 스타일을 <h1> 요소에 설정했습니다:

h1 {
  color: navy;
}

그런 다음, 어떤 것을 가정해 보겠습니다내부 스타일 시트아래와 같은 스타일을 <h1> 요소에 설정했습니다:

h1 {
  color: orange;    
}

예제

내부 스타일이 외부 스타일 시트에 링크된 경우그리고 후에정의된 경우 <h1> 요소는 주황색이 될 것입니다:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
  color: orange;
}
</style>
</head>

본인이 직접 시도해 보세요

예제

그러나 외부 스타일 시트에 링크된 경우이전인터널 스타일을 정의하면 <h1> 요소는 깊은 파란색이 됩니다：

<head>
<style>
h1 {
  color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

본인이 직접 시도해 보세요

쌓이 순서

HTML 요소에 여러 스타일이 지정되었을 때, 어떤 스타일을 사용할 것인가요?

페이지에서 모든 스타일은 다음 규칙에 따라 '쌓이'되어 새로운 '가상' 스타일 시트로 변환됩니다. 최고 우선순위는 첫 번째입니다:

  1. 인라인 스타일（HTML 요소에서）
  2. 외부 및 내부 스타일 시트（head 부분에서）
  3. 브라우저 기본 스타일

따라서, 인라인 스타일은 가장 높은 우선순위를 가지며, 외부 및 내부 스타일과 브라우저 기본 스타일을 덮어쓰습니다.

본인이 직접 시도해 보세요