형태구조선택자

 부모박스 안에 자식(형제)태그들이 다르게 구성되어있을때 사용
 
 [기본형]
-선택자:first-of-type
    :부모 박스안에 형제관계 중 첫번째로 위치하는 태그를 선택  
-선택자:last-of-type
    :부모 박스안에 형제관계 중 마지막에 위치하는 태그를 선택  
-선택자:nth-of-type(숫자 또는 수열)
    :부모 박스안에 형제관계 중 숫자 또는 수열번째로 위치하는 태그를 선택  
-선택자:nth-last-of-type(숫자 또는 수열)
    :부모 박스안에 형제관계 중 뒤에서 숫자 또는 수열번째로 위치하는 태그를 선택

상태선택자

오늘의 예시 일단 이 태그는 인라인속성이라서 p=블록태그로 먼저 감싸주었음!

텍스트가 나타나는 코드 (단독태그)= 닫는 태그 없음.

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

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

123가지로 정할 수 있다.

-예쁘게 꾸미기 !!!!!!!!!!!!!!!!!!!!!!

1. 컬러변경하니까 실선이었던 네모선들이 테두리가 스타일 변하게 됨. 둥글기도 변경. 그래서 보더와 색상을 다시 적용
- input:enabled- ★★★★★★★★★★

2. 모양을 변하게 하기 위해 값을 다 줌. 근데 모양을 주다보면 다시 테두리가 두꺼워짐. 왜냐면 저 진한 테두리는 =Out line라서 그렇다.

3.
다시 아웃라인을 논으로 바꿔줌.

여기까지가 입력이 가능한 상태의 input의 태그이다.

+ 저런 모양으로 나오는 순간을 포커스라고 함.

포커스의 변활 주기 위해서

적용

입력양식이 포커스 상태(입력하려고 활성화된 상태) ★★★★★★★★★★

- input:focus-

입력이 안 되는 태그들도 예쁘게 꾸며줄 수 있다.

(체크박스는 사실상 css에선 쓰이지 않아서 예를 참조 안 함)