웹디자인 기능사 시험예제/1) 컨텐츠 구성하기

CSS (2) 선택자와 우선순위

frogOlis 2019. 7. 29. 04:35

1. 기본적인 선택자의 종류

 - 전체 선택자 (*)

선택자

  설명

*

   '*'는 존재하는 전체 요소에 사용하는 선택자로,
  전체 요소에 적용시키는 만큼, 선택자들 중에 그 무엇보다도 우선하지 않는다. 

 

- 후손 선택자 ( ) 와 자식 선택자 (>)

선택자

  설명

ul li 

  ul의 후손인 li 요소를 모두 선택한다.
  (띄어쓰기 공백으로 구분한다.)

ul>li 

  ul의 자식인 li만 선택한다. 
  = 자식 아래의 자손은 선택하지 않는다.

 

- 형제 선택자 (+ ~)

선택자

  설명

H1 + P 

  인접 형제 선택자 : h1의 바로 뒤에 있는 P요소를 선택한다.
  (즉, H1이후에 P요소가 아닌 SPAN요소가 있을 때는 선택하지 않는다.)

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)를 선택할 때 사용.
  항상 html 을 선택하지만, 클래스 선택자로 사용하므로
  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에는 일반 선택자 및 가상 클래스 선택자도 올 수 있다.)
  **(단, 선택자 2 에는 부정 선택자 혹은 가상 엘리먼츠 선택자를 넣을 수 없다.)

 

 - 그 외 기타 가상 클래스 선택자들

선택자

  설명

선택자:lang(언어코드)

  lang 속성이 '언어코드'으로 지정된 요소를 선택
  *(예시 : <p lang="ko"></p>와 같은 형태 )
  **(언어코드 예시 korean = "ko" english="en")

 

선택자

  설명

선택자:enabled

  enable 상태인 폼 콘트롤 요소를 선택
  *폼 콘트롤 요소(input, textarea, select, button)

선택자:disabled

  disable 상태인 폼 콘트롤 요소를 선택
  *폼 콘트롤 요소(input, textarea, select, button)

선택자:checked

  "checked"상태인 radio 또는 checkbox 타입의 input요소, 
  또는 <option>요소를 선택

 

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 값)