HTML5 - [4] CSS3(1) 기본 및 선택자

정리하기

(1) CSS 사용의 장점

웹 문서의 내용과 디자인의 분리

다양한 기능의 확장

통일된 문서 양식 제공

로딩 시간 단축

(2) CSS 적용 방식

CSS 적용 방식

적용 방식	설명
인라인 스타일 (“인라인 방식”)	HTML 문서의 각 요소에 직접 style 속성을 사용해서 적용
스타일 요소 사용 (“임베디드 방식”)	HTML 문서의 head 요소 안에 style 요소를 사용해서 적용
외부 파일 연결 (“링크 방식”)	HTML 문서와는 별도로 스타일만 지정한 CSS 파일(*.css)을 만들어 link 요소를 통해 연결시켜 적용

(3) CSS 단순 선택자의 종류

CSS 단순 선택자의 종류

레벨	선택자	이름	설명
CSS2	*	전체 선택자	모든 요소에 스타일 적용
CSS1	요소	형식 선택자	지정한 요소에만 스타일 적용
CSS1	요소.클래스명       .클래스명	클래스 선택자	class=“클래스명” 속성을 사용한 요소에 스타일 적용
CSS1	요소#아이디명       #아이디명	아이디 선택자	id=“아이디명” 속성을 사용한 요소에 스타일 적용
CSS2	요소[속성]	속성 선택자	지정한 속성 표현에 해당하는 요소에 적용

(4) 속성 선택자의 연산자 종류

속성 선택자의 연산자 종류

레벨	종류	설명
CSS2	요소[속성]	속성 값과 상관없이 해당 속성을 사용하는 요소를 선택
	요소[속성=값]	속성 값과 일치하는 요소를 선택
	요소[속성~=값]	속성 값을 공백으로 구분한 요소를 선택
	요소[속성|=값	속성 값이 정확히 일치하거나 값으로 시작하고 바로 뒤에 - 기호로 구분한 요소를 선택
CSS3	요소[속성^=값]	속성 값의 시작 부분의 문자와 일치하는 요소를 선택
	요소[속성$=값]	속성 값의 끝 부분의 문자와 일치하는 요소를 선택
	요소[속성*=값]	속성 값 전체 중 어떤 일부분이라도 일치하는 요소를 선택

(5) 가상 선택자

가상 선택자

종류	설명
E:link	아직 방문한 적이 없는 링크를 표현
E:visited	방문한 적이 있는 링크를 표현
E:hover	마우스를 특정 요소에 올려놓았을 때 적용
E:active	마우스를 눌렀다 놓은 순간에 적용
E:focus	특정 요소에 초점이 있는 동안 적용
E:target	동일한 문서 안에서 이동되는 앵커 목적지 요소에 적용
E:lang(language)	지정된 요소 중에서 language로 지정된 언어로 시작하는 요소에 적용
E:enabled	활성화된 상태의 요소에 적용
E:disabled	비활성화된 상태의 요소에 적용
E:checked	선택된 상태의 라디오 버튼과 체크박스 요소에 적용
E:not(X)	단순 선택자 X(가상 요소, :not(:not(…)) 제외)로 표현되지 않은 특정 요소에 적용
E:root	웹 문서 안의 최상위 요소(루트)를 선택
E:nth-child(an+b)	동일한 부모 요소 안에서 n번째에 있는 자식 요소를 선택
E:nth-last-child(an+b)	동일한 부모 요소 안에서 끝에서 n번째에 있는 자식 요소를 선택
E:first-child	다른 일부 요소의 첫 번째 자식 요소를 선택
E:last-child	다른 일부 요소의 마지막 자식 요소를 선택
E:nth-of-type(an+b)	동일한 부모 요소 안의 형제 요소들 중에서 지정한 요소만을 계산하여 n번째 요소를 선택
E:nth-last-of-type(an+b)	동일한 부모 요소 안의 형제 요소들 중에서 지정한 요소만을 계산하여 끝에서 n번째 요소를 선택
E:first-of-type	동일한 부모 요소 안의 형제 요소들 중에서 지정한 요소만을 계산하여 첫 번째 요소를 선택
E:last-of-type	동일한 부모 요소 안의 형제 요소들 중에서 지정한 요소만을 계산하여 마지막 요소를 선택
E:only-child	부모 요소 안에서 자식 요소가 유일하게 하나일 때 선택
E:only-of-type	동일한 부모 요소 안의 형제 요소들 중에서 지정한 요소가 유일하게 하나일 때 선택
E:empty	자식(텍스트가 아닌)이 없는 요소를 선택
E::first-line	특정 요소를 사용하는 문단의 첫 번째 줄의 텍스트를 선택
E::first-letter	문자열에서 다른 내용(이미지, 인라인 테이블 등)이 앞에 오지 않는 경우 특정 요소의 첫 번째 글자를 선택
E::before	요소 내용의 앞에 생성되는 내용의 스타일을 지정
E::after	요소 내용의 뒤에 생성되는 내용의 스타일을 지정

(6) 조합자의 종류

조합자의 종류

레벨	조합자	이름	설명
CSS1	선택자1 선택자2	하위 조합자	선택자1의 하위 요소 중에서 선택자2에 해당하는 모든 요소를 선택
CSS2	선택자1 > 선택자2	자식 조합자	선택자1을 부모 요소로 하여 직계 자식 요소 선택자2를 선택
CSS2	선택자1 + 선택자2	인접 형제 조합자	선택자1의 바로 뒤에 오는 동생인 선택자2 요소만을 선택
CSS3	선택자1 ~ 선택자2	일반 형제 조합자	선택자1 다음에 오는 형제 관계의 모든 선택자2 요소들을 선택
CSS1	선택자1, 선택자2	그룹 조합자	여러 선택자가 동일한 선언을 공유하는 경우에 한 번에 묶어서 정의할 때 사용

1. 어떤 것들에 영향을 줄 것인지를 정의하는 것을 ( )라 하고, 웹 문서의 특정한 트리의 구성요소와

일치하는 패턴으로, XML 문서에서 노드를 선택하는 데 사용될 수 있는 기술을 의미한다.

2. 단순 선택자에는 전체(*) 선택자, (형식 ) 선택자, (속성 ) 선택자, ( 클래스) 선택자, 아이디(ID) 선택자,

그리고 ( )가 있다.

3. 지정한 요소에 스타일을 적용할 때는 (요소) 선택자를 사용하고, 지정한 속성에 해당하는 요소에 스타

일을 적용할 때는 (속성) 선택자를 사용한다.

4. 문서 트리를 벗어나거나 다른 단순 선택자를 활용하여 표현할 수 없는 정보를 토대로 한 선택이 가능

하도록 한 것이 바로 ( 가상 선택자) 개념으로, 슈도 클래스라고도 부른다. 즉, 실제로 존재하지는 않지만, 요

소들의 이름 이외의 속성이나 내용에 따라 분류(classify)함으로써 임의로 가리키는 기능을 가상의

선택자로 지정하여 사용하는 것을 말한다.

5. (first-line ) 가상 요소는 어떤 문단에서 첫 번째 문자열에 일치하는 특정 요소에서만 사용할 수 있으며,

블록 박스, 인라인 블록, 테이블 캡션, 또는 테이블 셀 등의 블록 레벨(block-level)과 유사한 컨테

이너에 붙을 때에만 효과를 가질 수 있다.

6. (first-letter) 가상 요소는 문자열에서(이미지나 인라인 테이블과 같은) 다른 내용이 앞에 오지 않으면

특정 요소의 첫 번째 글자를 나타내는 것으로, 일반적인 인쇄 효과에 해당하는 "Initial caps"와

"drop caps"에도 활용할 수 있다

7. 문맥이나 요소의 구조를 기반으로 하여 선택자를 조합하는 것을 (조합자 ) 또는 (결정자 )라고 부른다.

8. CSS내의 단순한 선택자들을 조합하는 방법으로 지정한 구역에만 적용시킬 수 있는데, 선택자1과 선택

자2 모두를 선택하기 위해서는 (선택자1, 선택자2 )와 같이 그룹 조합자를 사용하면 된다.

9. 다음 중에서 사용자에 의하여 요소가 활성화되는 동안 적용되는 가상 클래스는?

① :link ② :visited ③ :hover ④ :active

root_virtual on jsbin.com

JS Bin on jsbin.com