1. 기본적인 선택자의 종류
- 전체 선택자 (*)
선택자 |
설명 |
* |
'*'는 존재하는 전체 요소에 사용하는 선택자로, |
- 후손 선택자 ( ) 와 자식 선택자 (>)
선택자 |
설명 |
ul li |
ul의 후손인 li 요소를 모두 선택한다. |
ul>li |
ul의 자식인 li만 선택한다. |
- 형제 선택자 (+ ~)
선택자 |
설명 |
H1 + P |
인접 형제 선택자 : h1의 바로 뒤에 있는 P요소를 선택한다. |
H1 ~ P |
일반 형제 선택자 : h1의 바로 뒤부터 이하의 모든 P요소를 선택한다. |
- 속성 선택자[ ]
선택자 |
설명 |
선택자[속성] |
속성이 포함된 모든 요소를 선택한다. |
선택자[속성="값"] |
속성="값"인 모든 요소를 선택한다. |
선택자[속성~="값"] |
속성="값"이 포함되는 모든 요소를 선택한다. |
선택자[속성^="값"] |
속성값에서 "값"으로 시작되는 요소를 선택한다. |
선택자[속성$="값"] |
속성값에서 "값"으로 끝나는 요소를 선택한다. |
선택자[속성*="값"] |
속성값에 "값"이 포함되는 요소를 선택한다. |
선택자[속성|="값"] |
속성값이 "값"과 정확하게 일치하거나, |
2. 가상 클래스 선택자
: 특정한 상태를 선택하는 선택자. 문서 전체의 순서, 개별 요소의 상태 등을 선택할 때 사용.
- <A>요소의 가상 클래스 선택자
선택자 |
설명 |
A:link |
방문하지 않은 링크 |
A:vistied |
방문한 링크 |
A:active |
요소에 마우스 클릭 혹은 키보드 엔터가 눌린 동안 |
A:hover |
요소 위에 마우스가 올라와 있는 동안 (*대부분의 요소에도 사용이 가능) |
A:focus |
요소 위에 포커스가 머물러 있는 동안 (*대부분의 요소에도 사용이 가능) |
선택자 |
설명 |
#ID:target |
ID가 지정된 대상이 A링크에 의해 URL을 요청했을 때 선택한다. |
- 구조적 가상 클래스 선택자 : 문서 구조상에서 갖는 위치를 선택
선택자 |
설명 |
:root |
문서의 최상위 요소(html)를 선택할 때 사용. |
선택자:nth-child(n) |
앞으로부터 지정된 순서(n)와 일치하는 요소가 선택자 라면 선택 (선택자가 아닌 요소의 순서가 계산에 포함) |
선택자:nth-last-child(n) |
뒤로부터 지정된 순서(n)와 일치하는 요소가 선택자 라면 선택 (선택자 아닌 요소의 순서가 계산에 포함) |
선택자:nth-of-type(n) |
선택자 요소 중 앞으로부터 순서(n)가 일치하는 선택자 요소를 선택 (선택자 요소의 순서만 계산에 포함) |
선택자:nth-last-of-type(n) |
선택자 요소 중 끝으로부터 순서(n)가 일치하는 선택자 요소를 선택 (선택자 요소의 순서만 계산에 포함) |
선택자:first-child |
첫 번째 등장하는 요소가 선택자이면 선택 (선택자가 아닌 요소의 순서도 계산에 포함) |
선택자:last-child |
마지막에 등장하는 요소가 선택자이면 선택 (선택자가 아닌 요소의 순서도 계산에 포함) |
선택자:first-of-type |
선택자 요소 중 첫 번째 선택자 요소를 선택 (선택자 요소의 순서만 계산에 포함) |
선택자:last-of-type |
선택자 요소 중 마지막 선택자를 선택 (선택자 요소의 순서만 계산에 포함) |
선택자:only-child |
선택자 요소가 유일한 자식이면 선택 (선택자가 아닌 요소가 하나라도 포함되면 선택하지 않습니다.) |
선택자:only-of-type |
선택자 요소가 유일한 타입이면 선택 (선택자가 아닌 요소가 포함되어도 선택자 타입이 유일하면 선택합니다.) |
선택자:empty |
자식 요소가 전혀 없는 선택자 요소를 선택 (컨텐츠 영역 내에 텍스트 및 공백이 있다면 선택되지 않는다.) |
선택자 |
설명 |
선택자1:not(선택자2) |
선택자2가 아닌 선택자1 요소를 선택 *(선택자2에는 일반 선택자 및 가상 클래스 선택자도 올 수 있다.) |
- 그 외 기타 가상 클래스 선택자들
선택자 |
설명 |
선택자:lang(언어코드) |
lang 속성이 '언어코드'으로 지정된 요소를 선택 |
선택자 |
설명 |
선택자:enabled |
enable 상태인 폼 콘트롤 요소를 선택 |
선택자:disabled |
disable 상태인 폼 콘트롤 요소를 선택 |
선택자:checked |
"checked"상태인 radio 또는 checkbox 타입의 input요소, |
3. 가상 요소(엘리먼츠)선택자
컨텐츠의 일부를 선택하거나 앞이나 뒤에 붙는 내용을 지정할 때 사용하는 선택자.
- 컨텐츠 삽입 선택자
선택자 |
설명 |
|
::after{content:"입력값";} |
대상의 뒤에 컨텐츠 삽입 |
|
::before{content:"입력값";} |
대상의 앞에 컨텐츠 삽입 |
- 컨텐츠의 일부만 선택하는 선택자
선택자 |
설명 |
|
::first-letter{속성:"속성값";} |
대상의 첫번째 글자 선택 |
|
::first-line{속성:"속성값";} |
대상의 첫 줄 선택 |
|
::selection{속성:"속성값";} |
유저가 블록지정한 위치 선택 |
4. CSS의 적용 우선순위
- 순위표
순위 |
선택자 형태 |
설명 |
우선순위 점수표 |
1 |
!important 선언 |
선언시 무조건 우선함 |
최상위 |
2 |
INLINE CSS |
html style속성으로 작성된 내용 |
1,000 |
3 |
#아이디 |
아이디 사용 |
100 |
4 |
.클래스 / 가상 클래스 선택자 / 속성 선택자 |
클래스 및 가상클래스, 속성 선택자 |
10 |
5 |
요소명 / 가상 요소 선택자 |
요소이름 혹은 가상 요소 이름 |
1 |
6 |
상속된 속성 |
부모 요소에서 상속된 속성들 |
- 사용자 선택불가 - |
7 |
전체 선택자(*) |
*로 선언된 내용 |
0 |
* 각 요소별 개수에 따라서 적용된다.
** 클래스를 10개 모은다고 해서, ID보다 우선하지는 않는다.
우선 순위는 ID>CLASS>ELEMENTS 순서이다.
- 다중 스타일 시트에서의 우선순위
css의 스타일시트는 세 종류로 나누어 볼 수 있으며, 각각의 우선순위에도 차이가 있다.
- User Agent 선언 : 브라우저 기본 스타일 시트 (웹 브라우저에서 가장 기본형으로 지정된 스타일시트)
- 사용자 스타일 시트 : 사용자가 웹 브라우저로 추가한 스타일 시트( 기본서체 등 커스터마이징 스타일시트 )
- 제작자 스타일 시트 : css 문서로 설정한 스타일 시트 (제작자가 내부,외부 스타일시트로 설정한 스타일시트)
우선순위 |
종류 |
설명 |
1(높음) |
사용자 선언(중요) |
사용자가 넣은 스타일 시트 중 중요(!important) 표시 속성. |
2 |
제작자 선언(중요) |
제작자가 작성한 스타일 시트 중 중요(!important) 표시 속성 |
3 |
제작자 선언(일반) |
제작자가 작성한 스타일 시트 |
4 |
사용자 선언(일반) |
사용자의 스타일 시트 |
5(낮음) |
user agent 선언 |
브라우저 기본 스타일 시트 (default 값) |
'웹디자인 기능사 시험예제 > 1) 컨텐츠 구성하기' 카테고리의 다른 글
CSS (4) COLOR와 BACKGROUND, BORDER (0) | 2019.07.29 |
---|---|
CSS (3) FONT와 TEXT의 기본적인 속성 (0) | 2019.07.29 |
css(1) css 사용과 기본 규칙 (0) | 2019.07.29 |
HTML 텍스트 강조 요소 (0) | 2019.07.29 |
HTML 기초 태그 (3) 이미지와 멀티미디어 (0) | 2019.07.29 |