css기초-선택자(2)

형태구조선택자

부모박스안에 자식(형제)태그들이 다르게 구성되어 있을 때 사용함.

 [기본형]
 - 선택자:first-of-type
 :부모 박스안에 형제관계 중 첫번째로 위치하는 태그를 선택함.
 
 - 선택자:last-of-type
 :부모 박스안에 형제관계 중 마지막에 위치하는 태그를 선택함.
 
 - 선택자:nth-of-type(숫자/수열)
 :부모 박스안에 형제관계 중 숫자또는 수열번째로 위치하는 태그를 선택함.

  - 선택자:nth-last-of-type(숫자/수열)
 :부모 박스안에 형제관계 중 뒤에서 숫자또는 수열번째로 위치하는 태그를 선택함.

 형제들이 다른 태그로 구성되어 있을 때 특정 태그에 순서를 지정해 태그를 
 선택하고 싶을 때 사용한다. 

입력양식 input과 상태 선택자

상태 선택자는 입력양식 태그의 상태를 지정할때 사용하는 선택자.

  [기본형]
  - :checked
  : 체크박스에 체크가 된 상태의 input태그를 선택함.
  - :focus
  : 초점이 맞춰진 input태그를 선택함.
  - :enabled
  : 입력또는 사용이 가능한 상태의 input태그를 선택함.
  - :disabled
  : 입력또는 사용이 불가능한 상태의 input태그를 선택함.
  
  
  

상태선택자 안에 속성선택자 + 동위선택자

시작문자 선택자 first-letter , first-line

시작문자 선택자는 태그 내부의 첫 글자나 첫 줄을 선택할 때 사용하는 선택자.

[기본형]
- ::first-letter
: 태그 내부의 첫 글자를 선택함.

- ::first-line
: 태그 내부의 첫  줄을 선택함.

★가상 요소 선택자 before after

보통 배경요소나 포인트 요소를 만들 때 주로 사용하는데 선택한 태그에 앞이나 뒤에 가상요소를 만드는 선택자다.

HTML코드에는 존재하지 않지만 html 구조에 가상요소를 만들어서 스타일을 부여하는 역할.
마치 html 코드가 있는 것처럼 스타일링할 때 사용함.

가상 요소 선택자로 만들어진 요소는 기본적으로 inline속성을 가짐. 그래서 보통 사용할 때 display:block 을 사용하여 블록속성으로 변경하여 사용한다.

가상 요소를 만들때 content속성을 이용함.

content=""를 입력한 후 글자를 나타내고 싶지 않을 경우 font-size:0;으로 변경하거나
text-indent:-999px;처럼 글자 위치를 이동해서 안보이게 만들 수 있다.

가상 요소는 드래그할 때 표시가 되지 않는다.

[기본형]
- ::before
:특정 요소의 앞에 가상 요소를 만들고 내용은 content 속성으로 넣음.
- ::after
:특정 요소의 뒤에 가상 요소를 만들고 내용은 content 속성으로 넣음.