HTML5 - CSS 선택자

일단 css파일을 만들어 주면 편하게 사용할수 있다.

<link rel="stylesheet" href="css파일 경로">

 

주석 단축키 : ctrl + /

 

css 기본 사용법  : 태그선택자 {

                                         속성 : 값;

                                }

 

선택자란?

기본 선택자 = html 태그 선택자 라고 하고 <h1>, <p> 등등을 말한다

 

전체선택자(wildcard) = *  <ㅡㅡ요거 ㅋㅋ..

 

속성선택자 = 태그[속성="값"]    예시 : input[type="text"] {background-color : red;}

 

id 선택자 = #    -  태그에 이름을 부여하는 속성(변수명),유일(관례) = 중복 불가

 

class 선택자 = . (점이요 점) = 중복 허용

 

후손 선택자 (특수 선택자) = (부모)선택자1 (자식)선택자2 { 속성 : 값;}

 

자식 선택자 = (부모)선택자 > (자식)선택자 { 속성 : 값; }

 

반응 선택자 = 선택자:hover - 마우스가 위로 올라가면 디자인 적용

 (주로 input)  / 선택자:active - 마우스를 클릭하면 디자인 적용 

 

상태 선택자 = 선택자:enabled : 현재 입력 가능한 상태일때 디자인 적용

(주로 input)   / 선택자:disabled : 현재 입력 불가능한 상태 -디자인 적용

                      / 선택자:focus : 커서가 있을때(포커스) 디자인 적용

 

구조 선택자 = 선택자: nth-child(2n : 짝수 2n+1 : 홀수 등) {속성:값;}

(한마디로 여러 선택자중 골라서 사용하고 싶을때 사용)

 

인접한 형제 선택자 = 형제태그+형제태그2 { 속성:값; }

(말 그대로 인접한 형제를 선택)

 

가상 선택자 = 선택자:가상선택자 {속성:값;}

(가상의 선택자를 선택)

 태그:first-of-type

 태그:last-of-type

 태그:not(:first-of-type)

 태그::before {content:"";}

 태그::after{content:"";}

 

 

 

예시)

후손선택자 ↓

 

---

자식 선택자↓

 

---

반응 선택자 <h1>반응 선택자<h1> ↓

 마우스를 안올렸을때                              

마우스를 올렸을때

클릭 했을때

---

상태 선택자 예제)

사용 가능 = 흰색 , 사용 불가능 = 회색

커서(포커스) 디자인

---

 

상태 선택자

결과↓

 

---

형제태그 선택자

결과 ↓

---

속성 선택자 - 특수 선택자

 

 1 ) 포함되는 것 : 비슷한것 선택  =  ~

 

 2 ) 문자열을 속성값으로 시작할 경우 선택 = |

결과 ↓

 

 3 ) 부분 문자열을 속성값을 시작할 경우 선택 = ^

 

 4 ) 부분 문자열로 끝나는 것 선택 = $

 

 5 ) 부분 문자열로 중간에 포함되는 것 선택 = *