CSS How To...

« Previous Next Chapter »

브라우저는 스타일 시트를 읽을 때, 스타일 시트의 정보에 따라서 문서를 포맷 한다.

CSS를 삽입하는 세 가지 방법

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

  • External style sheet
  • Internal style sheet
  • Inline style

External Style Sheet

스타일을 많은 페이지에 적용 할 때는 외부 스타일 시트가 이상적이다. 외부 스타일 시트를 사용하면 하나의 파일을 변경하여 전체 웹 사이트의 모양을 변경할 수 있습니다.

각 페이지는 <link> 태그를 사용하여 스타일 시트를 연결해야 합니다. <link> 태그는 head 섹션 안에 있어야 한다:

Example

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Try it yourself »

외부 스타일 시트는 텍스트 편집기로 작성 할 수 있다. 이 파일은 HTML 태그를 포함 할 수 없다. 스타일 시트는 .css 확장자로 저장해야 한다. 스타일 시트 파일 "mystyle.css" 의 예는 다음과 같다 :

body {
    background-color: lightblue;
}

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

Note   속성 값과 단위(unit) 사이에 공백을 추가하지 마십시오 (such as margin-left:20 px). 올바른 방법은 다음과 같습니다 : margin-left:20px

Internal Style Sheet

하나의 문서에 고유한 스타일을 주고자 할 때 내부 스타일 시트를 사용해야 합니다. 다음과 같이 <style> 태그를 사용하여 HTML 페이지의 헤드 섹션에서 내부 스타일을 정의 :

Example

<head>
<style>
body {
    background-color: linen;
}

h1 {
    color: maroon;
    margin-left: 40px;
}
</style>
</head>
Try it yourself »

Inline Styles

인라인 스타일은 프레젠테이션과 콘텐츠를 혼합하여 스타일 시트의 많은 장점을 잃는다. 이 방법은 주의해서 사용하시오.

인라인 스타일을 사용하기 위해서는, 관련 태그의 스타일 속성을 추가한다. 스타일 속성은 CSS 속성을 포함 할 수 있습니다. 다음의 예는 h1 요소의 color 와 왼쪽 여백을 변경하는 방법을 보여줍니다 :

Example

<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>
Try it yourself »

Multiple Style Sheets

같은 selector에 대해 일부 속성이 서로 다른 스타일 시트에  설정되어 있는 경우, 값은 더 구체적인 스타일 시트에서 상속됩니다.

예를 들어, 외부 스타일 시트는 <h1> 요소에 대한 다음과 같은 속성은 가지며 :

h1 {
    color: navy;
}

그리고 내부 스타일 시트는 <h1> 요소에 대한 다음과 같은 속성이 있습니다 :

h1 {
    color: orange;   
}

내부 스타일 시트가 있는 페이지에,  또한 외부 스타일 시트에 연결하면 <h1> 요소의 속성은 다음과 같습니다:

Example

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

left-margin 은 외부 스타일 시트에서 상속되고, color는 내부 스타일 시트 정의로 대체됩니다.

여러 Styles 은 하나로 붙여진다(Cascade)

스타일 다음과 같이 지정될 수 있습니다 :

  • inside an HTML element
  • inside the head section of an HTML page
  • in an external CSS file

Tip: 심지어 여러 외부 스타일 시트를 하나의 HTML 문서 내에서 참조 할 수 있습니다.

Cascading order

HTML 요소에 지정된 하나 이상의 스타일이 있을 때 어떤 스타일이 사용되는가?

일반적으로 말해서, 모든 스타일이 다음과 같은 규칙에 의해 새로운 "virtual"스타일 시트로 “cascade” 된다. 여기에서 네 번째가 가장 높은 우선 순위이다:

  1. Browser default
  2. External style sheet
  3. Internal style sheet (in the head section)
  4. Inline style (inside an HTML element)

따라서, 인라인 스타일 (HTML 요소 내부) 이 가장 높은 우선 순위를 가지며, <head> 태그 안에 정의된 스타일과, 외부 스타일 시트, 또는 브라우저 (기본값)의 것을 치환한다.

Note Note: 외부 스타일 시트에 대한 링크가 HTML의 <head>의 내부 스타일 시트 뒤에 배치되는 경우, 외부 스타일 시트가 내부 스타일 시트를 치환합니다!

Test Yourself with Exercises!

Exercise 1 »  Exercise 2 »  Exercise 3 »  Exercise 4 »

« Previous Next Chapter »