안드로이드는 전자양의 꿈을 꾸는가

CSS 규칙과 선택자

웹접근성과 웹표준 2013. 7. 20. 01:00

CSS: Cascading Style Sheet

1. CSS 규칙의 구성

CSS는 다음과 같은 규칙으로 구성된다.

선택자 { 속성 : 속성값 ; }

2. CSS의 포맷

1) 확장형 : 선택자와 선언문을 다른줄에 입력, 가독성이 높다.

h1 {

font-size : 150% ;

}

h1, h2, h3 {

color : red ;

margin-bottom : .5em;

}

2) 축소형 : 모든 규칙을 한줄에 입력. 파일의 크기를 줄인다.

h1 {font-size:150%;}

h1, h2, h3 {color:red;margin-bottom:.5em;}

3) 반축소형 : 축소형의 선언문과 값 사이에 빈칸을 입력

h1 { font-size: 150%; }

h1, h2, h3 { color:red; margin-bottom: .5em; }

3. CSS의 주석

주석 처리 방법 : /* */ 사이에 주석을 입력한다.

4. CSS의 측정 단위

% : 백분울

px : 1필셀은 컴퓨터 화면에서 점을 의미

em : 1em은 현재 요소의 글자 크기

ex : 1ex는 기본선부터 소문자x의 높이

in : 인치

mm : 밀리미터

cm : 센티미터

pt : 1포인트는 1인치의 1/72

pc : 1pica는 12포인트와 동일

5. CSS의 색상 지정 방법

1) 색상명 : 색상 이름을 그대로 사용 red, green, blue, black, white, ...

2) #rrggBB : 빨강,초록, 파랑을 각16진수 문자 2글자로 표시.

숫자가 반복되면 3개의 숫자 사용 가능

#0000ff, #ff0000, #00f, #f00, ...

3) rgb(r,g,b) : 빨강, 초록, 파랑의 색을 0~255의 숫자로 표시

rgb(0,0,255), rgb(255,0,0),...

4) rgb(r%, g%, b%) : 빨강, 초록, 파랑의 색을 백분율로표시

rgb(0%,0%,100%),rgb(100%, 0%, 0%)

6. 문서에 스타일 적용하기

(1) 스타일 적용 방법

1) Inline Style (인라인스타일)

<h1 style="color:red;"> 인라인스타일적용 </h1>

2) Embedded Style (내부스타일)

<head>

h1 { color : red ; }

</style>

</head>

3) External Style (외부스타일) : 별도의 css 파일을 만들어 html 문서 안에 불러오기

<head>

@import url(“ext.css”) ;

</style>

</head>

(2) css 파일 문자셋 지정 방법

- css 파일의 첫줄에 웹문서와 동일하게 선언

@charset“euc-kr”;

- 웹문서에 바로 연결되는 css 파일에만 선언한다.

(3) 스타일 적용방법의 겹침 순서

1) 겹침 순서

- Inline > Embedded > External > (사용자스타일 > 브라우저스타일)

- External Style의 경우 나중에 link된 파일의 스타일이 우선권을 가짐

- Embedded Style 중에서는 나중에 내장된 스타일이 우선권을 가짐

2) !important

- 겹침상태에 상관없이 최우선권을 가진다.

- !important가 사용된 두개의 스타일은 개별성과 겹침의 영향을 받음

h1 { color : red !important ; }

- css 적용시 다른 것을 무시하고 특정요소에 특정 css를 적용할 때에는 !important 사용한다.

7. 기본 선택자

1) 전체 선택자 : 모든 요소를 선택

* { color : red ; }

2) 요소 선택자

- 타입 선택자

- 해당 태그로 지정된 모든 요소 선택

body {margin:0; padding:0;}

3) id 선택자

- #아이디명으로 사용

- 한페이지에서 한번만 사용가능

#wrap {margin:0 auto;}

4) class 선택자

- 클래스명으로 사용

- 클래스명이 class 속성의 값으로 부여된 요소들을 선택

- 여러번 사용가능

.txt1 {text-align:center;color:#ccc;}

예제) 선택자 예제

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

/* h2 { color: blue; }

.ex h2, { color:red; } */

p{color:red;}

p{color:blue;}

</style>

</head>

<body>

<p>해당 태그의 요소들만 선택합니다</p>

<hr>

<h2>CLASS 선택자</h2>

<p>한 페이지에서 여러번 사용가능합니다</p>

<hr>

<p>한 페이지에 한번만 사용 가능합니다.</p>

<p>레이아웃을 위한 영역에 주로 사용합니다.</p>

</div>

</body>

</html>

8. 가상 클래스

- 특정 상태의 요소를 선택

- "요소명:" 뒤에 사용

- 가상 클래스와 선택 대상은 다음과 같다.

- a 태그(링크 요소)에 많이 사용

:link 방문하지 않은 링크

:visited 이전에 방문한 적이 있는 링크

:hover 마우스를 올려놓은 경우

:active 활성상태(마우스를 클릭하거나 엔터키를 누르고 있는 동안)

:focus 단축키나 탭으로 포커스를 얻은 경우

a:link {text-decoration:none; color:#333333;}

a:visited {text-decoration:none; color:#333333;}

a:active {text-decoration:none; color:#333333;}

a:hover {text-decoration:underline; color:red;}

9. 선택자의 활용

1) 하위 선택자

- 하위의 특정요소를 선택

- 선택자와 선택자 사이를 빈칸으로 구분

body #contents {margin:0; padding:0;}

2) 선택자 그룹화

- 여러개의 선택자에 동일한 규칙을 적용할 때 사용

- 선택자와 선택자 사이를 쉼표(,)로 구분

html, body, div, p {margin:0; padding:0;}

3) 선택자의 결합

- 둘 이상의 선택자를 조합해서 사용

10. 스타일 적용 우선 순위

1) 상속

- 상위 요소에 적용한 스타일이 하위 요소까지 적용된다.

- 각 프로퍼티의 inherit 값

- border, margin, padding, float 등은 상속되지 않는다.

2) 겹침(Cascade)

- 하나의 요소에 최종적으로 보일 때까지 여러 개의 스타일이 계속 겹친다.

- 개별성이 같은 경우 나중에 적용된 스타일이 우선권을 가진다.

</div>

위의 HTML에 div로 감싼 info 클래스에는 green 칼라를, 그 안 h1의 title 클래스에는 red 칼라를 줬을 경우 CSS를 쓴 순서에 따라 다음과 같이 달라진다. (나중에 적용된 스타일이 우선권을 가진다.)

저작자표시

'웹접근성과 웹표준' 카테고리의 다른 글

배경: 백그라운드 (background) (0)	2013.07.20
CSS 박스 모델의 이해 (0)	2013.07.20
HTML 코딩 복습: 헤딩<h1>, 목록<ul><ol><li> (0)	2013.07.20
웹표준, HTML/CSS에 관한 유용한 사이트 (0)	2013.07.20
웹표준: 건너뛰기 링크 제공, 접근성 대체 텍스트 표현방법 (0)	2013.07.19