스타일시트에 대한 살짜쿵 설명과 링크색상조절을 보았다면 스타일시트에
대해 알듯말듯 감이 올 것이다.
이번 시간에는 스타일시트를 사용하는 방법을 확실히 알아보도록 하자.
스타일시트는 적용방법에 따라 사용 방법이 나뉘는데 3가지 정도로 나눌 수 있다.
첫째는 전체 문서에 적용하는 방법
둘째는 지정한 태그에 적용하는 방법
셋째는 지정한 태그에 직접 적용하는 방법
둘째와 셋째가 애매해 보이는데 설명을 들으면 명확히 다른 것을 알 것이다.
먼저 문서 전체에 적용하는 방법은 다음과 같다.
<head>
<style>
태그명 { 스타일 }
....
</style>
</head>
사용 예)
<script>
TD { color:blue; }
</script>
위와 같이 사용할 경우 전체 TD에 대해 font-color:blue라는 스타일이 적용된다.
하지만 적용범위를 줄이기 위해 모든 TD에 대해 스타일을 적용하는 것이 아니라 내가 지정한 태그에만 적용이 가능하게 할 수 있다.
<head>
<style>
.클래스명 { 스타일 }
....
</style>
</head>
사용 예)
<script>
.mystyle { color:blue; }
</script>
<body>
<font class="mystyle">
마이스타일
</font>
</body>
위와 같은 경우에는 자세히 보면 <style></style>사이에 들어간 것이 태그명이 아니라 클래스명으로 바뀌었고 앞에 점이 찍힌 것을 알 수 있다. 이렇게 설정된 스타일은 태그에 적용되는 것이 아닌 class 속성으로 직접 부른 곳에만 적용이 된다.
마지막으로 스타일을 미리 설정해두지 않고, 직접 필요할 때마다 기입해서 사용하는 방법이다.
<태그명 style="color:red">
사용 예 )
<body>
<font style="color:red">
마이스톼일!
</font>
</body>
어떤가? 스타일시트도 별것 아니지? 아직은 잘 와닿지 않더라도 꾸준히 사용하여서 익숙해지도록 하자!