CSS 추가 방법

CSS를 삽입하는 3가지 방법

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

  • 외부 CSS
  • 내부 CSS
  • 인라인 CSS

외부 CSS

외부 스타일시트를 사용하면 파일 1개만 변경해도 웹사이트 전체의 스타일을 바꿀 수 있습니다!

각 HTML 페이지에는 <head> 섹션의 <link> 요소로 외부 스타일시트 파일에 대한 참조가 포함되어 있어야 합니다.

예제 1 - 외부 스타일은 HTML 페이지의 <head> 섹션의 <link> 요소에 정의되어 있습니다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" 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;
}

주의: 속성 값과 단위 사이에 공백을 추가하지 마십시오.
올바르지 않음(스페이스): 여백 왼쪽: 20 px;
올바름(스페이스 없음): 여백 왼쪽: 20px;

내부 CSS

하나의 HTML 페이지가 고유한 스타일을 가질 경우 내부 스타일시트를 사용할 수 있습니다.

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

예제 2 - 내부 스타일은 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 속성에는 임의의 CSS 속성을 포함할 수 있습니다.

예제 3 - 인라인 스타일은 관련 요소의 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>

Tip: 인라인 스타일은 (내용과 프레젠테이션을 혼합함으로써) 스타일시트의 많은 장점을 잃습니다. 이 방법은 신중하게 사용해 주세요.

다중 스타일 시트

다른 스타일 시트의 동일한 셀렉터(요소)에 대해 일부 특성이 정의된 경우 마지막으로 정의된 스타일 시트의 값이 사용됩니다.

외부 스타일시트의 <h1> 요소의 스타일은 다음과 같습니다.

h1 {
  color: navy;
}

다음으로 내부 스타일시트에 <h1> 요소에 대해 다음과 같은 스타일도 있다고 가정합니다.

h1 {
  color: orange;   
}
예제 3 - 외부 스타일 시트에 대한 링크 후에 내부 스타일이 정의되면 <h1> 요소는 “주황색”이 됩니다.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
  color: orange;
}
</style>
</head>
예제 4 - 단, 외부 스타일시트에 링크하기 전에 내부 스타일이 정의되어 있는 경우 <h1> 요소는 “네이비”가 됩니다.
<head>
<style>
h1 {
  color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

캐스케이딩 순서

HTML 요소에 대해 두 개 이상의 스타일이 지정된 경우 어떤 스타일이 사용될까요?

페이지의 모든 스타일은 다음 규칙에 따라 새로운 “가상” 스타일 시트로 “캐스케이드”됩니다. 우선순위는 다음과 같습니다.

  • 인라인 스타일(HTML 요소 내부)
  • 외부 및 내부 스타일 시트(헤드 섹션)
  • 브라우저 기본값

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