본문 바로가기
강의실/css

css 사용법 2

star story 2007. 7. 25. 09:15
Css 사용방법(2)
이용방법(1)에서 다루었던 1.Linking 스타일 시트의 좀 더 자세한 사용방법이다. 링킹 스타일 사용방법은 일전에 알아본바와 걋?확장명이 .css 를 가지는 화일을 링크시켜 글자관련정보를 지정한 .css 파일에서 다루는 방법이다.

다음은 내가 사용하는 index.css 의 예를 들어 알아본다.

<STYLE TYPE="text/css">
<!--

A:link {text-decoration:none;color:blue;}
A:visited {text-decoration:none;color:red;}
A:active {text-decoration:none;color:gray;}
A:hover  {text-decoration:underline;color:black;}

FONT {font-size:9pt}
TD {font-size:9pt}
DIV {line-height:0.5cm}
-->
</STYLE>


위와 같이 index.css 파일을 만든다. 만드는 방법은 그냥 메모장에 위의 내용을 치고 저장할때 확장명을 *.* 에 놓고 화일 이름을 index.css하면 된다.

사용방법은 html 문서내 <head> 와 </head> 사이에
<link rel=StyleSheet type="text/css" href="index.css"> 라고 입력만 하면 된다. 속성을 알아보자

A:link -- 링크된 부분을 어떻게 표현할것인가를 지정하는 곳이다. text-decoration:none -- 이 부분은 링크된 곳이 글자인경우(그림이 아니라) 밑줄을 칠것인가 말것인가를 지정하는 곳이다. none은 치지 말라는 것이다. 따라서 링크된 곳의 밑줄을 제거하는 방법이 바로 이 방법이다. 밑줄을 지정하고 싶으면 yes라고 입력하면 된다. color=blue -- 링크된 부분의 색을 지정하는 곳이다. 물론 color=#ffffff 식으로 컬러표에 따른 16진법을 대입해도 된다.

A:visited -- 이 곳은 한번 방문했던 곳을 어떻게 표현할지를 결정하는 곳이다. 논문목록과 같이 많은 곳을 링크한 곳이라면 한번 방문했던 곳과 방문하지 않았던 곳을 구별할 필요가 있을때 사용한다. 그리고 속성은 A:link 와 같다.

A:active -- 링크된 부분을 클릭하였을때 지정된 문서를 읽을때 즉 실행될때의 링크된 부분의 속성을 지정하는 부분이다.

A:hover -- 이 방법은 익스플로워에만 통하는 부분이다. 네스케이프는 지원하지 않는다. 이것은 링크된 곳에 마우스를 올려놓으면 링크되 부분이 이곳에서 지정한 방식대로 변하게 된다. 익스플로워 사용자가 증가하는 추세인만큼 지정하여 두면 익스플로워 사용자들에게 괜찮은 효과를 부여하게 된다.
   

'강의실 > css' 카테고리의 다른 글

font-style  (0) 2007.07.25
font-size  (0) 2007.07.25
font-family  (0) 2007.07.25
css 사용방법 1  (0) 2007.07.25
css란 무엇인가?  (0) 2007.07.25

'강의실/css' Related Articles

티스토리툴바