제발 제 코드에 훈수하세요

HTML 문서를 검사할 수 있는 validator 사이트에서 CSS도 검사가 가능하다.

https://jigsaw.w3.org/css-validator/

자주 검사를 해서 문법 오류를 내지 않도록 하자!

자, 어제에 이어서 선택자를 알아보자!

선택자

링크 선택자( 링크의 클릭 전과 후)

a:link { CSS속성 }           클릭 전

a:visited { CSS속성 }       클릭 후

이렇게 쓴다.

보통 클릭 전에는 파란색 클릭 후에는 자주색으로 보이는 링크에 색을 입히거나 폰트를 조정할 수 있다.

반응 선택자( 행동에 따른 반응의 대상을 선택 )

태그명:hover { CSS속성 }     마우스 포인터를 대고 있을 때

태그명:active { CSS속성 }     클릭을 안 떼고 계속 누르고 있을 경우

a 또는 input: focus { CSS속성} 탭 키로 포커싱을 할 경우

이렇게 쓰인다.

상태 선택자( 상태가 어떠한 경우의 태그를 선택 )

input:enabled { CSS속성 }      입력이 가능한 경우

input:disabled { CSS속성 }     입력이 불가능한 경우

input:selected { CSS속성 }     선택된 경우

input:checked { CSS속성 }     체크된 경우

input:focus { CSS속성 }         포커싱 된 경우

보통 form태그안의 input 태그의 특정 상태에 대해서 CSS를 적용할 수 있다.

구조 선택자( 형제태그끼리의 순번을 통해 선택)

• 일반 구조 선택자

태그명:nth-child(순번){ CSS속성 } 이렇게 쓴다.

한 부모태그 안이 기준 (단 형태가 달라도 순번은 진행된다. p, p, div, p인 경우 마지막 p는 3번째가 아닌  4번째)

• 형태 구조 선택자

태그명:nth-of-type(순번){ CSS속성 } 이렇게 쓴다.

태그의 형태가 기준 

시작 문자 선택자( 제일 처음 시작하는 문자를 선택 )

태그 명:: { CSS속성 } 이렇게 쓴다. (::는 콜론 두 번)

전후 문자 선택자( 태그를 선택 )

태그 명::before { CSS속성 }     문자 앞에 올 내용을 넣는 경우

태그 명::after { CSS속성 }        문자 뒤에 올 내용을 넣는 경우

이렇게 쓴다.

※ ::는 가상 요소이며, 별도의 class를 지정하지 않아도 한 거 같이 선택할 수 있다.

아직은 잘 모르니 최근에 nav태그에 자주 사용된다는 것만 알아두자

반응 문자 선택자( 문자들을 드래그 했을 때 나오는 색을 선택)

태그명::selection { CSS속성 } 이렇게 쓴다.

문자의 배경 색과 문자 색만 바꿀 수 있다.

부정 선택자( 태그를 선택 ) 

태그명not(조건){ CSS속성} 이렇게 쓴다.

조건이 아닌 모든 것을 선택한다.

이렇게 선택자를 나열 해 보았는데 솔직히 말하면 다 무의미하다.

나의 복습과 여러분이 대충 훑고 지나갔으면 좋겠다는 마음이 있다. 

노마드코더의 니꼬쌤과 생활코딩의 이고잉님께서는 이런 말을 하셨다.

코딩은 암기가 아니라 이해이다! 

직접 따라해보면서 또는 만들어보면서 모르는 게 있으면 찾아보는 게 중요하다.

찾는 방법과 찾을 키워드를 잘 선택해야한다.

다음은 이때까지 항상 나왔던 {CSS속성}들을 알아보는 시간이다.

공감 또는 훈수 부탁드립니다.(내가 그걸 모를 꺼 같니?? 라던가 응 아니야~이거야~ 해주세요) 

그럼~ 앙 제바