1.2 CSS 선언 방법
CSS는 우선순위에 따라서 3가지의 선언 방법이 있다.
- 외부 선언(external css)
- 엘리먼트에 직접 선언(inline css)
- 사용자 정의 스타일(user defined css)
우선순위 : 사용자 정의스타일 > 엘리먼트에 직접선언 > 외부 선언(외부 선언이 우선순위가 가장 낮다)
1) 외부 선언 (external css)
HTML <head> 엘리먼트에 아래와 같이 선언하여 외부에 별도의 파일로 되어 있는 CSS 정의를 불러온다.
<link rel="stylesheet" type="text/css" href="myCss.css" />
문서 안에 포함도 가능하다 (embeded css)
<head>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
</style>
</head>
2) 엘리먼트에 직접 선언 (inline css)
HTML 엘리먼트에 style 속성을 이용하여 직접 선언하는 방법이다.
<div style="padding: 10px; border: 1px solid #eee;">
<p>contents</p>
</div>
3) 사용자 정의 스타일 (user defined css)
웹페이지 제작자가 선언하는 것이 아니라 웹사이트를 이용하는 사용자가 직접 자신에게 맞는 스타일을 선언하는 방법이다(브라우져가 제공)
1.3 CSS 적용의 체크 포인트 4가지
- XHTML이 표준 문법이어야 한다.
- XHTML 문서가 의미와 구조적으로 구성되어야 한다.
- CSS가 표준 문법이어야 한다.
- CSS를 표준대로 잘 구현한 브라우져를 이용해야 한다.
1) XHTML이 표준 문법이어야 한다.
XHTML 문법이 표준이 아니면 테스트된 브라우져가 아닌 다른 브라우져에서는 렌더링이 같게 나올 것이라고 보장 할 수 없게 된다.
2) XHTML 문서가 의미와 구조적으로 구성되어야 한다.
문서를 제작 할때에 CSS를 적용하는 것보다는 markup 을 완성도 있게 만드는 것이 무엇보다도 중요하다는 것을 항상 염두해야 한다.
3) CSS가 표준 문법이어야 한다.
3-1) 주석 구문
잘못된 CSS 주석 구문 예)
<!-- wrong css comment -->
// wrong css comment
정확한 CSS 주석 구문 예)
/* comment */
3-2) 단위 표기
CSS의 값들 중에 0을 제외한 모든 값들은 단위 표기를 하여야 한다.
3-3) 정확한 컬러값 사용
컬러의 이름을 넣는 방법 - color: red;
#rrggbb 방법 - color: #ff0000; (=color: #f00;)
rgb(r,g,b) 방법 - color: rgb(255,0,0); (=color: rgb(100%,0%,0%);)
