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

1 개요[ | ]

Three Ways to Insert CSS
HTML에 CSS를 기입하는 방식 3가지 + 1
HTML에 CSS를 삽입하는 방식 3가지 + 1
HTML에 CSS를 적용하는 방식 3가지 + 1

정확히는 HTML에 적용하는 방식 3가지 + CSS에 적용하는 방식 1가지

2 방법 1: 인라인 방식[ | ]

해당 태그의 style 속성에 넣는 방식

html

Copy

<p style="color:red; background-color:yellow;">안녕하세요.</p>
<p style="color:green;">Hello.</p>

3 방법 2: 내부 스타일 시트[ | ]

style 태그 내부에 기입하는 방식

html

Copy

<style>
#hello1 {
  color: red;
  background-color: yellow;
}
#hello2 {
  color: green;
}
</style>

<p id='hello1'>안녕하세요</p>
<p id='hello2'>Hello.</p>

4 방법 3: 외부 스타일 시트 ★[ | ]

link 태그를 사용하여 별도의 css 파일을 연결하는 방식

mystyle.css

css

Copy

#hello1 {
  color: red;
  background-color: yellow;
}
#hello2 {
  color: green;
}

index.html

html

Copy

<link rel="stylesheet" href="mystyle.css">

<p id='hello1'>안녕하세요.</p>
<p id='hello2'>Hello.</p>

5 (방법 4: CSS 임포트)[ | ]

CSS에서 CSS 임포트 문서를 참고하십시오.

mystyle.css

css

Copy

#hello1 {
  color: red;
  background-color: yellow;
}
#hello2 {
  color: green;
}

index.html

html

Copy

<style type='text/css'>
@import url("mystyle.css");
</style>

<p id='hello1'>안녕하세요.</p>
<p id='hello2'>Hello.</p>

6 같이 보기[ | ]

HTML
CSS

7 참고[ | ]

http://www.w3schools.com/css/css_howto.asp