css 적용하기

WebPrograming관련 : 2007. 3. 18. 09:41
반응형
CSS 우선순위별 3가지 방법


html의 head 부분에 들어가게 하는 방법 - 문서 안에 포함 (embeded css)


<style type="text/css">
td{font-size:9pt; color:#666666; line-height:130%; font-family:돋움;}
input{color:red;font-size:9pt; border:1px solid #999999;}
select{font-weight:bold;}
textArea{font:bold 9pt 돋움; background-color:yellow;}
</style>
- 이 방법은 폼의 전체에 한꺼번에 줄때 편리합니다.



1의 소스를 css 파일로 만들어 링크를 거는 방법 - 외부 선언 (external css)

<link rel="stylesheet" href="stylesheet.css" type="text/css">
메모장에서 1과 같이 작성해서 확장자를 css로 저장한 다음에
위와 같은 방법으로 head 사이에 넣어 주면 됩니다.

그 외에도 클래스, 자바스크립트 등 구현하는 방법이 다양합니다.
style sheet의 속성도 넘 많습니다.
해서 님께서 속성을 공부하시려면 style sheet 사전을 구입하길 추천합니다.

아래는 폼에 많이 쓰이는 style sheet를 몇개 적어 보았습니다.
도움이 되었으면 좋겠네요...^^


* 위의 방법이 우선순위가 가장 낮다.



=======================================================================



폼 태그에 직접 삽입하는 방법 - 엘리먼트에 직접 선언 (inline css)


<td style="font-size:9pt; color:#666666; line-height:130%; font-family:돋움;">
<input style="color:red;font-size:9pt; border:1px solid #999999;">
<select style="font-weight:bold;">
<textarea style="font:bold 9pt 돋움; background-color:yellow;">
- 이 방법은 한개의 폼에 줄때 편리합니다.


=======================================================================


사용자 정의 스타일 (user defined css)

웹페이지 제작자가 선언하는 것이 아니라 웹사이트를 이용하는 사용자가 직접 자신에게

맞는 스타일을 선언하는 방법이다.

Opera의 경우 스타일을 author 모드와 user 모드를 선택하여 적용하는 기능을 제공한다.
좌측의 원래 사이트가 사용자의 스타일 재정의에 의해서 완전히 다른 모습으로 보이는 것
을 볼 수 있다. 사용자의 정의가 가장 우선 순위가 높다는 것은 문서의 구조와 디자인을
분리 하여서 개별 사용자가 스스로에게 가장 적합한 형태의 스타일을 선택하여 쉽게 문서
에 접근할 수 있게 하기 위함이다.


* 이 방법이 우선순위가 가장 높다.




- 실전웹 표준 가이드 인용

반응형

'WebPrograming관련' 카테고리의 다른 글

css Peoperties  (0) 2007.03.18
웹폰트 기초 사용법  (0) 2007.03.16
UTF-8 (UCS Transformation Format)  (0) 2007.03.16
Posted by Real_G