CSS - 선택자

스타일 적용을 지정하기 위한 중요한 요소로

선택자를 모르면 진짜진짜 고생한다,,,

이참에 잘 정리해두자

전체 선택자

• '*' 기호를 사용한다

* {
	margin : ;
    width : ;
} 

타입 선택자

• 말 그래도, 특정 태그를 직접 선택한다
• 직접 해당하는 타입을 적어서 사용한다

h1 {}
p1 {}

아이디 선택자

• '#' 기호를 사용한다
• id는 해당 html 내에서 유일해야함,
  중복된게 아닌지 잘 보고 사용하자
• 한 번만 사용되기 때문에 재사용성은 떨어진다

<div id="myid">
  ...
  </div>

#myid {
	width: 500px;
}

클래스 선택자

• '.' 기호를 사용한다
  잘 못본거 아니다. .(점) 맞다
• 클래스 선택자는 아이디 선택자와 다르게 한 페이지에 여러 개가 있을 수 있다. 즉 그 만큼 재사용성이 높다.

<h1 class="myclass">hello wolrd</h1>
<p>Lorem ipsum dolor sit amt</p>
<p class="myclass">Lorem ipsum dolor sit amt</p>

.myclass {
	color : blue;
 }

아이디 선택자와 클래스 선택자를 잘 구분해서 사용하자

• 아이디는 #, 클래스는 .

특정 선택자

• 기호 '[ ]'를 사용한다
• 특정한 특성을 가진 모든 요소를 선택

[type="button"]{
	border:0;
	cursor:pointer;
}
[class="btn"]{
	color:#fff;
	background: royalblue;
}

그룹 선택자

• 기호 ','를 사용한다/ 쉼표
• 말 그대로 그냥 a and b 방식으로 지정하는 거다
  제일 쉽다

h1, h2, h3, h4, h5, h6{ font-weight:bold;}

---

이 아래부터는 복합 선택자이다.
보통 위에도 많이 사용하지만 실제 웹 페이지를 만들때는 상상이상으로 복잡한 구조가 필요하므로 정말 다양하게 특정 태그를 지정할 필요가 있어 보여 아래 복합 선택자를 많이 사용하게 될 것 같다.

(실제로 실습에서도 복합 선택자를 많이 사용하였다!)

1. 자손 선택자

• 자식, 자손 모두를 선택 가능하다
• 띄어쓰기를 하여 구분한다

section p {  /*요기 section 다음 띄어쓰기 후 p*/
  border: 3px solid skyblue;
}

2. 자식 선택자

• 기호 '>'를 사용
• 직관적이고, 사용하기 쉽다
  직계자손만을 선택한다

section > p {
	color : 아무컬러~;
}

3. 일반 형제 선택자

• 기호 '~' 를 사용
• 뒤에 나오는 형제를 선택함

section~p {
	background : blue;
}

(일곱 여덟 아홉) 지정

4. 인접 형제 선택자

• 기호 '+'를 사용
• 바로 뒤 인접한 형제만 선택

section + p {
	background : yellow;
}

(section 태그 다음에 오는 p 태그로 일곱만 해당한다)

---

가상 클래스 선택자

• 그 외 나머지들로 다양한 가상 클래스들에 대한 선택자들을 제공한다

가상 클래스

이름	설명
:link	방문하지 않은 링크
:visited	방문한 링크
:hover	마우스 커서를 올려 놓았을 때
:active	마우스로 클릭했을 때
:focus	포커스 될때(tab)

구조적 가상 선택자

:first-child

• 형제 그룹 중 첫 번째

:last-child

• 형제 그룹 중 마지막

:nth-child

• 형제 그룹 중 n번째
• 수식을 넣을 수도 있다

/* 2번째 li */
li:nth-child(2) {
  color: lime;
}
/* 홀수번째 li */
li:nth-child(odd) {
  color: lime;
}

/* 짝수번째 li */
li:nth-child(even) {
  color: lime;
}
/* 2n+1번째 li */
li:nth-child(2n+1) {
  color: lime;
}

:not

• 부정 선택자

/* li 중 첫번째가 아닌 li */
li:not(:first-child){
	margin-top:20px;
} 

진짜 많다 ㅋㅋㅋ,,
그치만 한번 공부해두면 두고두고 사용 가능!

아래 사이트에서 게임하듯이 css문제를 풀어볼 수 있다

시간이 나면 한번 해보는걸 추천한다

다 푸는데 한 시간 걸렸다 ㅠㅠ

https://flukeout.github.io/
https://css-speedrun.netlify.app/