본문 바로가기
Developer

개발자를 위한 웹 표준 CSS의 이해 2(작성 방법, 우선순위, Selector)

Angeleyes 2011. 3. 9. 12:16

 

2011/02/17 - [Developer/웹개발 기초] - 개발자를 위한 웹 표준 CSS의 이해 1(CSS BoxModel, Position, float, clear, z-index)

 

CSS 작성 방법, 우선 순위, Selector

이번 시간에는 CSS의 작성 방법과 우선순위, 그리고 Element를 Select하는 방법에 대해서 알아보도록 하겠습니다.

 

1. 작성 방법

작성 방법의 종류는 아래와 같습니다.

  1. Inline
    Element에 직접 작성
  2. Style Tag
    Style Tag에 직접 작성
  3. 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>

 

  1. Inline
    <div style=”padding:0px;”

  2. * (모든 Element 선택자)
    * { padding:0px; }
  3. Element Name(Tag Name)
    div { padding:0px; }
  4. Class Name
    .divContents { padding:0px; }
  5. 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)
  • ID selectors
    Element ID 선택자 (#id)
     
  • Pseudo-elements and pseudo-classes
    가상 Elements 와 가상 classes (:after, :link)

 

selector의 Pattern은 아래와 같으며, 선택하시면 해당 페이지가 오픈 됩니다.

 

각각의 Selector 들은 앞에서도 말씀 드린 바와 같이 모든 Browser에서 지원되는 것이 아니니 아래 표를 참고 하시기 바라며, 선택하시면 해당 페이지가 오픈 됩니다.

 

Browser 별 CSS 지원 여부는 아래를 참고 하여 주십시오.

Browser CSS Support

Browser CSS Pattern Support

 

이상입니다.

 

감사합니다.



저작자표시 비영리 변경금지

'Developer' 카테고리의 다른 글

Sharepoint 2010 (Fixed Width Master Pages with JQuery) 넓이 고정 시키기  (0) 2011.03.17
Sharepoint 2010 System.Security.SecurityException: Request failed(요청하지 못했습니다.)  (0) 2011.03.16
Microsoft SQL Server 2008 R2 - Reporting Service(리포팅 서비스)의 이해와 구성 방법  (0) 2011.03.08
Javascript, JQuery Xml Parsing (File, String) [Convert string to xml]  (0) 2011.02.28
Javascript, JQuery preventDefault의 이해  (0) 2011.02.23

'Developer' Related Articles

티스토리툴바