CSS 작성 방법, 우선 순위, Selector
이번 시간에는 CSS의 작성 방법과 우선순위, 그리고 Element를 Select하는 방법에 대해서 알아보도록 하겠습니다.
1. 작성 방법
작성 방법의 종류는 아래와 같습니다.
- Inline
Element에 직접 작성
- Style Tag
Style Tag에 직접 작성
- Link Tag
외부 CSS를 Link Tag를 이용하여 연결
다음은 작성 Sample 입니다.
1. Inline
<html> <body> <div style="border:1px solid #666666; color:red; font-size:18px;"> Inline Style </div> </body> </html>
2. Style Tag
<html>
<head>
<style type="text/css">
div {
border:1px solid #666666;
color:red;
font-size:18px;
}
</style>
</head>
<body>
<div>
Style Tag
</div>
</body>
</html>
3. Link Tag
stylesheet.css
div {
border:1px solid #666666;
color:red;
font-size:18px;
}<html> <head> <link rel="stylesheet" type="text/css" charset="utf-8" href="stylesheet.css"/> </head> <body> <div> Style Tag </div> </body> </html>
위와 같이 작성됩니다.
외부 CSS 작성 시 외부 파일에서 다른 추가 외부 파일 입력의 경우는 아래와 같습니다.
stylesheet.css
@import "base.css";
div {
border:1px solid #666666;
color:red;
font-size:18px;
}base.css
@charset "utf-8";
div{
padding-top:10px;
padding-left:10px;
padding-right:10px;
}@import라는 명령어로 외부 파일을 불러 올 수 있으며, 경로 부분에는 URL(“css.css”) 로 작성도 가능합니다.
그리고 외부 base.css 에서 @charset 이라는 명령어를 볼 수 있는데 해당 CSS의 인코딩 방식을 정의할 수 있습니다.
HTML에서의 Charset에 관한 내용은 여기를 선택하여 이동하십시오.
CSS에서의 Charset에 관한 자세한 내용은 아래를 참고 하십시오.
Declaring character encodings in CSS
CSS style sheet representation
2. 우선 순위
CSS의 우선 순위라 함은 CSS가 각 Eelement에 적용되는 우선 순위를 뜻하는 것입니다.
여기에서 먼저 알아야 할 것이 Eelement를 무엇으로 어떻게 잡을 수 있느냐? 라는 물음이 생기는데요.
Element를 선택하는 방법은 아래와 같습니다.
<div id="divContents" class="divContents"> Contents </div>
- Inline
<div style=”padding:0px;”
- * (모든 Element 선택자)
* { padding:0px; }
- Element Name(Tag Name)
div { padding:0px; }
- Class Name
.divContents { padding:0px; }
- ID
#divContents { padding:0px; }
위에 열거된 선택자를 통하여 Element를 선택할 때 우선 순위가 적용됩니다.
아래와 같은 경우에 우선 순위는 Inline 입니다.
<html>
<head>
<style type="text/css">
* {
color:blue;
}
div {
color:yellow:
}
.divContents {
color:silver:
}
#divContents {
color:white:
}
</style>
</head>
<body>
<div id="divContents" class="divContents" style="color:red;">
Contents
</div>
</body>
</html>
위와 같이 선택자가 모두 적용되어 있는 상황에서의 우선 순위표는 아래와 같습니다.
* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up] {} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
위와 같이 값이 가장 높은 것이 우선 순위가 높습니다.
Inline이 가장 최 우선이며, 그 다음은 아이디, 그리고는 Selector의 합계로 구분되게 됩니다.
위에서 보시는 Elements Selector에 대한 내용은 아래에서 참고 하시기 바라며, 위 내용은 여기를 선택하여 이동하시면 좀더 자세한 내용을 확인 할 수 있습니다.
3. Elements Selector
Elements를 선택하는 방법은 CSS를 지원하는 Browser의 영향을 받습니다.
지금 현재 CSS 3.0에 대한 표준이 준비 중이며, CSS 2.1이 최신입니다.
CSS 2.1에 대한 모든 내용은 W3C에서 작성한 내용을 여기로 선택하여 이동하여 확인하시기 바랍니다.
위에서 말씀 드린 바와 같이 Selector의 종류는 아래와 같습니다.
- Universal selector
공통 선택자 (*)
- Type selectors
Tag 이름 선택자 (div)
- Descendant selectors
바로 하위가 아니라 포함되어 있는 하위 선택자 (div span)
- Child selectors
바로 하위 선택자 (div > span)
- Attribute selectors
Attribute 선택자는 IE 7 이하의 버전에서 선택이 되지 않아 거의 사용하는 편이 아닙니다.
- Class selectors
클래스명 선택자 (.className)
- Class selectors
- ID selectors
Element ID 선택자 (#id)
- Pseudo-elements and pseudo-classes
가상 Elements 와 가상 classes (:after, :link)
selector의 Pattern은 아래와 같으며, 선택하시면 해당 페이지가 오픈 됩니다.
각각의 Selector 들은 앞에서도 말씀 드린 바와 같이 모든 Browser에서 지원되는 것이 아니니 아래 표를 참고 하시기 바라며, 선택하시면 해당 페이지가 오픈 됩니다.
Browser 별 CSS 지원 여부는 아래를 참고 하여 주십시오.
이상입니다.
감사합니다.
'웹개발 기초' 카테고리의 다른 글
| 개발자를 위한 웹 표준 CSS의 이해 1(CSS BoxModel, Position, float, clear, z-index) (1) | 2011.02.17 |
|---|---|
| 개발자를 위한 웹 표준 HTML의 이해 3(Web Content Accessibility Guidelines 1.0) (0) | 2011.02.16 |
| 개발자를 위한 웹 표준 HTML의 이해 2(Block elements, Inline elements) (0) | 2011.02.15 |
| 개발자를 위한 웹 표준 HTML의 이해 1(DTD[Document Type Definition]) (0) | 2011.02.15 |
