|
스타일시트
→ CSS 는 무엇일까요?
스타일 시트는 정확히 표현하면 캐스케이딩 스타일 시트(Cascading Style Sheet,CSS)입니다.
스타일이란 우리말로 '유형'이라고 할 수 있는데,
HTML 문서에서 자주 사용하는 서체나 색상, 정렬, 각 요소들의 배치등 유형을 가리킵니다.
기존 HTML 문서에서 할 수 없었던 단점을 극복하고 다양한 서식을 활용할수 있도록 도와준다고 생각하시면 됩니다.
예를 들어, 하이퍼링크를 했을때 마우스커서를 올리면 글씨색상이 비뀌거나, 밑줄이 생기고, 배경이미지를 한쪽 구석에 배치,
테이블에 점선테두리, 그림자 효과, 색반전효과등 다양한 응용효과를 보실수 있습니다.
→ CSS 의 장점
레이아웃, 폰트, 색깔, 배경 및 인쇄상의 효과를 정교하게 할수 있습니다.
기존문서의 유지관리를 비교적 쉽게 할수있습니다.
운영체제에 상관없이 적용할 수 있습니다.
코드 크기가 작아서 페이지를 불러오는데 걸리는 시간의 부담이 적습니다.
웹페이지를 보다 멋지게 꾸밀 수 있습니다.
→ CSS 사용방법
스타일 시트의 사용법은 의외로 간단합니다.
우리가 지정하고 싶은 속성과 그 속성의 값만 지정해 주면 됩니다.
사용방법은 HTML 문서에 직접 넣는 방법과 CSS 파일로 저장해서 링크시키는 방법이 있습니다.
HTML 문서에 직접 넣으시려면 아래와 같은 스타일시트 소스를 복사해서 <head> 와 </head> 사이에 붙여 넣으시면 됩니다.
소스예제 -
<![CDATA[
<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>
]]>
다음은 CSS 를 링크시키는 방법에 대해서 알아보겠습니다.
위의 예제와 같은 소스가 있습니다.
맨 위와 아래에 있는 태그 즉, <STYLE TYPE="text/css"> 와 </STYLE> 부분을 제외하시고
나머지 부분을 복사합니다.
그리고 나서 메모장이나 워드패드를 열고 그안에 복사한 부분을 붙여넣습니다.
이제 할일은 파일을 저장해야죠~
그냥 저장하시면 안되고 저장하실때 확장자를 바꿔서 저장하셔야 합니다.
다른이름으로 저장 → 문서 이름을 원하시는 네임.css 로 저장합니다. 예 : name.css
저장한 파일을 웹상에서 불러오는 태그는 아래 소스와 같습니다.
<link rel=StyleSheet type="text/css" href="name.css">
역시 홈페이지에 적용하는 방법은 <head> 와 </head> 사이에 넣으시면 됩니다.
사용법에 대해 간단히 설명해 드렸습니다.
→ 위에 게제된 CSS 소스의 속성
다음으로 각 기능에 대해 간단히 설명하고 CSS 강좌를 마치도록 하겠습니다.^^;
A:link --> 링크된 부분을 어떻게
표현할것인가를 지정하는 곳입니다. text-decoration:none --> 이 부분은 링크된 곳이 글자인경우(그림이 아니라) 밑줄을
칠것인가 말것인가를 지정하는 곳입니다. none은 치지 말라는 것이다. 따라서 링크된 곳의 밑줄을 제거하는 방법이 바로 이 방법입니다.
밑줄을 지정하고 싶으면 yes라고 입력하면 됩니다. color=blue --> 링크된 부분의 색을 지정하는 곳입니다. 물론 color=#ffffff
식으로 컬러표에 따른 16진법을 대입해도 됩니다.
A:visited -->
이 곳은 한번 방문했던 곳을 어떻게 표현할지를 결정하는 곳입니다. 논문목록과 같이 많은 곳을 링크한 곳이라면 한번 방문했던 곳과 방문하지
않았던 곳을 구별할 필요가 있을때 사용합니다. 그리고 속성은 A:link 와 같습니다.
A:active
--> 링크된 부분을 클릭하였을때 지정된 문서를 읽을때 즉 실행될때의 링크된 부분의 속성을 지정하는 부분입니다.
A:hover
--> 이 방법은 익스플로워에만 통하는 부분입니다. 네스케이프는 지원하지 않습니다. 이것은 링크된 곳에 마우스를 올려놓으면 링크된 부분이
이곳에서 지정한 방식대로 변하게 됩니다. 익스플로워 사용자가 증가하는 추세인만큼 지정하여 두면 익스플로워 사용자들에게 괜찮은 효과를
부여하게 됩니다.
이 페이지에서는 극히 간단한 예제로 꾸며 보았습니다.
수많은 CSS 의 예제들이 있고 또 쓰임새도 다양합니다.
CSS 예제와 소스들은 소스자료실에 있는 "홈페이지태그[Tip]" 게시판에 자료를 올리도록 하겠습니다.
많은 이용 부탁드립니다.
|
|
-
-
