스타일 시트(CSS)를 적용하는 방법은 CSS에 해당하는 내용을 HTML에 넣는 방법과, 태그의 옵션에 넣는 방법, 외부 파일로 만들어 참조 하는 방법 등이 있습니다.
1. 태그의 옵션으로 넣기
<p style="color:red">
</p>
</p>
위 소스처럼 태그의 옵션중 하나인 style의 값으로 css를 넣을 수 있습니다. 이 방식은 바로 적용되고, 사용하기도 쉽다는 장점이 있지만, 홈페이지의 규모가 커지면 소스가 굉장히 조잡하게 될 수 있다는 단점이 있습니다. 처음에 설계를 이런 방식으로 하더라도 나중에는 전부 없에는게 좋습니다.
2. html의 head에 넣기
<html>
<head>
<title>예제</title>
<style type="text/css">
p{
color: maroon;
<head>
<title>예제</title>
<style type="text/css">
p{
color: maroon;
}
</style>
</head>
<body>
<p>
색 바꾸기...
</p>
</body>
</html>
</style>
</head>
<body>
<p>
색 바꾸기...
</p>
</body>
</html>
위 방법처럼 HTML의 <head>부분에 <style>태그를 이용하여 css 부분을 만들어서 쓸 수가 있습니다. 위 소스대로 하면, 이 html파일에 있는 <p>태그로 둘러싸인 부분의 글자 색은 maroon이 되겠네요. 하지만 이 방법에도 단점은 있습니다. 홈페이지를 만들다 보면, html파일이 하나가 아닐 경우가 있습니다. 하지만 그 파일들의 스타일은 동시에 컨트롤 되어야 할 때가 있죠. 위 방법으로는 일일히 전부 파일마다 넣어 줘야 하며, 그 내용이 바뀔때에는 html 파일 개개를 찾아 다니면서 전부 수정을 해야 합니다.
3. 외부 파일로 css만들어 적용하기.
1. style.css
p{
color : maroon;
}
2. test.html
<html>
<head>
<title>예제</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
p{
color : maroon;
}
2. test.html
<html>
<head>
<title>예제</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<p>
색바꾸기
</p>
</body>
</html>
색바꾸기
</p>
</body>
</html>
<link rel="stylesheet" href="style.css" type="text/css"> 를 잘 보시기 바랍니다. href에 있는 스타일 시트 파일을 참조하겠다는 뜻이며, 해당 파일에 있는 스타일들이 해당 html파일에 적용 되게 됩니다. 이렇게 스타일 시트 파일을 따로 두는것이 html과 스타일을 분리하여 좀더 이해하기 쉽게 만드는 바람직한 습관입니다.