동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.

동영상 강좌보기

브라우저가 스타일시트를 읽으면 스타일시트의 정보에 따라 HTML문서의 서식을 지정합니다.

CSS를 삽입하는 3가지 방법

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

외부 스타일 시트

외부 스타일 시트를 사용하면 하나의 파일만 변경하여 전체 웹사이트의 모양을 변경할 수 있습니다.

각 페이지는 <link>요소 안에 외부 스타일시트 파일에 대한 참조를 포함해야 합니다.

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

외부 스타일 시트는 텍스트 에디터로 작성할 수 있습니다. 파일에 html태그를 포함할 수는 없습니다. 스타일 시트 파일은 .css확장자로 저장해야 합니다.

다음은 "mystyle.css"의 내용입니다.

body {
    background-color: lightblue;
}

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

** 속성값과 단위사이에 공백을 추가하지 마십시오.

margin-left: 20 px; (x)

margin-left: 20px;(o)

내부 스타일 시트

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

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

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

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

인라인 스타일

인라인 스타일은 단일 요소에 고유한 스타일을 적용하는데 사용될 수 있습니다.

인라인 스타일을 사용하려면 관련 요소에 스타일 속성을 추가하십시오.

style속성은 모든 CSS속성을 포함할 수 있습니다.

아래 예제는 <h1>요소의 색상과 왼쪽 여백을 변경하는 방법을 보여줍니다.

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

** 인라인 스타일은 스타일 시트의 많은 장점을 상실합니다. 권장사항은 아닙니다.

다중 스타일 시트

웹페이지에 여러 스타일 시트를 적용할 경우 마지막으로 읽은 스타일 시트의 값이 사용됩니다.

외부 스타일 시트가 <h1>요소에 대해 다음 스타일을 설정하였다고 가정하십시오.

h1 {
    color: navy;
}

내부 스타일 시트도 <h1>요소에 다음과 같이 설정하였다고 가정합니다.

h1 {
    color: orange;    
}

내부 스타일이 외부 스타일 다음에 정의되면 <h1>요소는 "orange"가 됩니다.

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

그러나 내부 스타일이 외부 스타일 링크요소 앞에 정의된 경우 <h1>요소는 "navy"가 됩니다.

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

CSS 우선순위

HTML페이지내에서 CSS가 적용될 경우, 인라인, 내부스타일, 외부스타일, 브라우저 기본값중 모두 적용될 경우 우선순위를 아는 것이 중요합니다.

일반적으로 위 번호순으로 우선 순위가 높습니다.

결국 인라인 스타일이 가장 우선 순위가 높습니다.

CSS 사용법 > css강좌

CSS 사용법