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속성}들을 알아보는 시간이다.

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

그럼~ 앙 제바

우리는 앞서 CSS의 사용방법을 크게 3가지로 알아보았다.

이번에 알아볼 것은 '선택자'로 CSS를 적용할 대상을 선택하는 것이다.

먼저 사이트 하나를 소개하도록 하겠다.

https://www.w3schools.com/cssref/css_selectors.asp

이 사이트는 CSS 선택자의 종류를 알려준다.

모르면 여기서 찾아보면 된다!

우리는 이 중에서 자주 쓰이고 중요한 선택자들을 알아보도록 하겠다.

선택자

선택자는 보통  선언 블록 앞에 쓴다.

선언 블록은 CSS속성과 그 값을 넣을 수 있는 공간이고 { }로 쓴다.

인라인 사용방법에는 쓰이지 않고 임베디드나 외부 파일 사용방법에 쓰인다.

왜냐면 인라인은 벌써 그 태그를 선택하고 있기 때문이다.

2020/05/05 - [IT아카데미/CSS] - 홈페이지 만들기 - CSS [0]

여기에 사용 방법 3가지를 설명해 놓았다.

이 중 자주 쓰이는 선택자를 알아보자

모든 선택자( * )

* { CSS속성; } 이렇게 쓴다. ( *는 보통 shift 8을 누르면 나타난다.)

HTML 문서의 모든 태그를 선택할 수 있는 선택자이다. 

태그 선택자( 태그 명 )

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

적용하고 싶은 태그를 선택할 수 있는 선택자이다.

그룹 선택자( 태그 여러 개 )

태그 1, 태그 2 { CSS속성; } 이렇게 쓴다.

여러 개의 태그를 선택하여 동시에 CSS속성을 적용할 수 있다.

후손 선택자( 태그 안에 태그들 )

태그 태그 안의 태그 { CSS속성; } 이렇게 쓴다.

/*html태그가 
<div>
 <h1>제목</h1>
 <p>문단</p>
</div>
이렇게 되어 있을 경우*/
/*h1이나 p태그를 선택하기위해서*/
div h1 {CSS속성} 이렇게 사용한다.

자식 선택자( 태그 안의 바로 밑 태그 )

부모 태그 > 자식 태그  { CSS속성; } 이렇게 쓴다.

위의 후손 선택자의 예시 중 div태그와 h1태그는 서로 부모 자식 관계이다.

p태그는 말하자면 손자이기 때문에 div > p 이런 식으로 쓸 수 없다.

형제(동위) 선택자( 같은 등급의 태그들 )

태그 + 태그 { CSS속성; } 또는 태그 ~ 태그{ CSS속성; } 이렇게 쓴다.

+는 같은 계층 중 어떤 것이던 가능하고 ~는 같은 계층 중 바로 밑의 태그이다.

※HTML 구조상의 계층과 문서상의 계층은 다르다.

구조적으로 <h1> <h2>는 h1이 상위이지만

<div> 안에 같은 계층으로 <h1><h2>가 있는 경우에는 같은 계층이다. 

기본 속성 선택자( 태그 안의 속성 )

태그[속성] 또는 태그[속성="속성 값"] { CSS속성;} 이렇게 쓴다.

태그의 속성을 선택하여 CSS를 적용할 수 있다.

속성 선택자는 7개가 있고 임의로 기본과 문자열로 나누었다. 

※태그[]를 띄어서 태그 []로 쓰게 된다면 후손 선택자로 인식되어 주의해야 한다.

또한 속성 값을 쓰게 된다면 속성 값이 정확히 일치해야 한다.

문자열 속성 선택자 또는 value 선택자( 태그 안의 속성의 값 )

value는 태그의 속성 값으로 꼭 value를 넣어야 하는 것이 아니다.

• 태그[속성~="value"]  속성 값이 value를 포함한 태그를 선택(단어 기준 value abc는 선택되지만 valueword는 선택되지 않는다.)

• 태그[속성|="value"]   속성 값이 value나 value-로 시작하는 태그를 선택(단어 기준 속성 값이 valueword이거나 value이면 적용. 하지만 value abc는 적용되지 않는다.)

• 태그[속성^="value"]  속성 값이 value로 시작하는 태그를 선택 (문자열 기준 모두 적용)

• 태그[속성$="value"]  속성 값이 value로 끝나는 태그를 선택(문자열 기준 모두 적용)

• 태그[속성*="value"]  속성 값이 value가 포함된 태그를 선택(문자열 기준 모두 적용)

이렇게 5가지로 쓸 수 있다

id 선택자와 클래스 선택자( 태그 안의 id속성의 값, 클래스 속성의 값 )

#id명 { CSS속성; }과 .class명 {CSS속성;} 이렇게 쓴다.

id가 class보다 더 디테일하기 때문에 class보다 먼저 쓰인다.

(id는 HTML 문서 안에 하나만 존재하기 때문이다.) 

class는 중복으로 적용이 가능해서 동일한 여러 개의 클래스 명을 가질 수 있다.

※id속성의 값은 영문으로 시작해야 하고 띄어쓰기가 불가능하다.

대신 _(언더바)나 -(하이픈)을 사용한다.

또한 한글, 특수기호도 사용이 불가능하다.

만약 된다고 해도 validator검사를 하면 버그가 난다.

이외의 선택자들은 다음 페이지에서 만날 수 있다.

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

그럼~ 앙 제바