CSS를 HTML 에 삽입하기 위한 방법에는 크게 3가지가 있다.
TAG를 사용할 때, 그 안에 바로 스타일을 정의 하면 된다.
상당히 간단한 방법이지만, 나중에 유지 보수의 어려움이 있을 수 있다. 정의된 스타일이 변경되면, 일일이 찾아가서 바꿔야 하기 때문이다. 하지만, 간단한 스타일의 정의 같은 경우는 CSS정의가 쉬우므로, 편리하게 사용될 수 있다.
- 외부파일로 삽입
- HTML 내 삽입
- TAG에 직접 삽입
외부파일로 삽입
이 방법은 말 그대로, CSS를 외부에서 파일로 저장해서. HTML에서 불러서 사용을 하는 방법이다.
사용법은 CSS 파일을 *.css 라는 확장명으로 저장한 뒤, HTML 에서 이 파일을 사용하겠다고, 링크를 걸어주면 된다.
<head>
<link rel="stylesheet" type="text/css" href="stylesheets.css" />
</head>
<link rel="stylesheet" type="text/css" href="stylesheets.css" />
</head>
위의 방법처럼, 해주면, stylesheets.css 라는 파일을 외부에 정의해 두고, 사용을 할 수 있다. 이 방법의 가장 큰 장점은 뭐니 뭐니 해도, 전체적인 디자인 관리가 체계적이라는 것이다.
만약, 디자인이 변경될 필요가 있을 때, HTML 코드를 손 보는 것이 아니라, 스타일 시트 파일만 수정을 하여, 전체 적인 디자인 변경 작업을 하는 것이다. 관리할 페이지가 많을 수록 위력을 발휘할 수 있다.
HTML 내 삽입
또 다른 방법으로는 CSS를 HTML 상단에 삽입하여 쓰는 방식이다. 간단한 스타일 시트 같은 경우는 이 방법도 꽤 유용할 수 있다.
<head>
<style type="text/css">
<!--
h1 { text-color : red }
-->
</style>
</head>
</head>
<style type="text/css">
<!--
h1 { text-color : red }
-->
</style>
</head>
</head>
HEAD TAG 사이에 CSS 정의를 위치시키면 된다. 이때, 웹브라우저가 CSS를 인식을 못할 수도 있으므로, <!-- --> 표시로 주석으로 해준다. 이렇게 되면, 웹브라우저가 CSS를 인식을 못해도, 주석으로 간주하기 때문에, 화면에 CSS 내용이 출력되지 않는다.
만일 주석처리를 해주지 않고, 브라우저가 CSS를 인식하지 못할 경우, 화면에 CSS정의 내용이 그대로 출력이 되게 된다.
TAG에 직접 삽입
이 방법은 HTML TAG 내에 그대로 CSS를 정의하는 것이다.
<H1 style="margin-left: 30px">
글 제목
</H1>
글 제목
</H1>
TAG를 사용할 때, 그 안에 바로 스타일을 정의 하면 된다.
상당히 간단한 방법이지만, 나중에 유지 보수의 어려움이 있을 수 있다. 정의된 스타일이 변경되면, 일일이 찾아가서 바꿔야 하기 때문이다. 하지만, 간단한 스타일의 정의 같은 경우는 CSS정의가 쉬우므로, 편리하게 사용될 수 있다.
'CSS이야기' 카테고리의 다른 글
| CSS border 스타일 (0) | 2007.07.04 |
|---|---|
| CSS 폰트 스타일 (0) | 2007.07.04 |
| CSS강의 - TEXT 스타일 (0) | 2007.07.02 |
| CSS강의 - 기본 문법 (0) | 2007.06.27 |
| 블로그를 이쁘게 꾸밀 수 있는 CSS! (0) | 2007.06.27 |
