|
 |
 |
|
|
이번 강좌에서는 실제로 스타일
시트가 어떻게 사용되는 가에 대해서
간단하게나마 알아볼 수 있도록 하겠습니다.개인
홈페이지의 경우 그렇게 자주 스타일 시트가
사용되지는 않습니다. 그러나 포털 사이트나
커뮤니티 등 개인이 아닌 회사가 직접 운영하는
사이트의 경우 여러 웹 전문가들이 만들기 때문에
스타일 시트가 많이 사용되죠. 스타일 시트만
해도 한 페이지 분량정도 되는 사이트도
있답니다.(그렇지 않은 사이트도 많음) 이럴 경우
따로 css 파일을 만들어서 링크를 시켜야 겠죠. ^^
예제로 하나 볼까요? ^^
<style type="text/css">
<!--
.base {font-family: "굴림"; font-size: 9pt;}
.baseup {font-family: "굴림"; font-size: 9pt;line-height:100%;}
.header {font-family: "굴림"; font-size: 10pt; font-weight: bold}
.header1 {font-family: "굴림"; font-size: 10pt; color:#4770AD; font-weight: bold;}
body {margin-top: 0px; margin-left: 16px}
a {font-family: "굴림"; font-size: 9pt; color:#333399; text-decoration: none}
.base1 {font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 8pt; }
.text1 {font-family: "굴림", "굴림체", "돋움", "돋움체"; font-size: 9pt; text-decoration: none; color: #A4C7EA}
.text2 {font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 8pt; text-decoration: none; color: #A4C7EA }
.text3 {font-family: "Arial", "Helvetica", "sans-serif"; font-size: 8pt; text-decoration: none; color: #A4C7EA; font-weight: bold}
a:hover {font-family: "굴림"; font-size: 9pt; background-color:none; color:DarkBlue; text-decoration:underline;}
a.header1:hover {font-family: "굴림"; font-size: 10pt; background-color:none; color:DarkBlue; text-decoration:underline; font-weight: bold;}
a.text1:hover {font-family: "굴림", "굴림체", "돋움", "돋움체"; font-size: 9pt; text-decoration: underline; color: #A4C7EA}
a.text2:hover {font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 8pt; text-decoration: underline; color: #A4C7EA }
//-->
</style> |
사이버 방송영상 정보센타 홈페이지의
메인페이지 스타일 시트인데요....여기의 경우
주로 글자에 대한 색상과 글꼴 , 가상앵커클래스
효과를 사용한 것이죠. 흠...-_-;; 굉장히 복잡하게
보여도.... 자세히 보면 간단하죠. ^^
예제를 하나 더 본다면....
<style TYPE="text/css">
<!--
A:active {text-decoration:none;color:black}
TD, TH {font-size:9pt}
font {font-size:9pt}
.black {text-decoration:none;color:black}
.none {text-decoration:none}
.blue {color:blue}
.red {color:red}
.line {line-height:140%}
.line1 {text-decoration:none;color:black}
-->
</style> |
위의 예제의 경우 어느 pc통신업체
홈페이지 스타일 시트입니다.
앵커가상클래스효과와 글자색상 등에 대해서
정의한 것이네요. ^^ 처음 것보단 간단하지만
내용은 거의 비슷하다고 할 수 있겠네요.
이렇듯 스타일 시트는 웹의 여러 부분에서
사용되고 있습니다. 여러분들도 이제 스타일
시트를 배웠으니 홈페이지 제작하는데 반드시
사용해보시기 바랍니다. 아마 홈페이지
제작하는데 많은 도움이 될겁니다.
지금까지 스타일 시트 강좌 들어 주신 거 감사 드리고요....
시간에 쫒겨 강좌를 쓰다 보니 자세히 설명
못드리고 대충 넘어가는 부분이 많이 있을
겁니다.. 언제나 홈페이지만 잡고 살수 있는 것이
아니기 땜시.... 열심히 써볼려고 했었는데...잘
안된거 같아...좀 그렇네요. ^^> 하여간 지금까지
봐주신거 감사드리고 앞으로도 열심히 하는
태그매니아 될 수 있도록 노력하겠습니다. 그럼
20000
|
메인 페이지로 || 태그연습장 || 메인 페이지로
|
|
|
|
