[SeSACx코딩온] CSS 선택자 과제

📌 2주차 과제 복습

과제 해결하면서 헷갈렸던 선택자가 다 정리된 게 너무 좋아서, 기억해둘만한 내용이 있는 선택자 과제를 풀이와 함께 정리해보았다.

문제 1 줄무늬 만들기 (방법 2가지)

2, 6, 10 줄만 노란색으로 색칠하기.

 

[방법1] nth-child 선택자

nth-of-type 또는 nth-child 같은 선택자를 이용해서, 주어진 HTML의 li요소의 특정위치(2, 6, 10번째)를 선택할 수 있다.

.zoo li:nth-child(2),
.zoo li:nth-child(6),
.zoo li:nth-child(10) {
    background-color: orange;
}

 

[방법2] 등차수열의 일반항 구해서 더 깔끔하게

등차수열의 일반항을 구해서 첫번째 방법보다 더 깔끔하고 예쁘게 작성한 코드 ✨

.zoo li:nth-child(4n-2){
    background-color: orange;
}

 

졸업한 지 너무 오래돼서 기억이 안 나는 등차수열 일반항 구하는 과정을 알아보자.

우리가 찾아야 하는 수열은 2, 6, 10

 

1. 첫번째 항과 공차 찾기

• 첫 번째 항 (a1): 수열의 첫 번째 숫자. 여기서는 2입니다.
• 공차 (d): 각 항 사이의 차이. 여기서 공차는 4입니다.

2. 등차수열 일반항 공식

an​=a1​+(n−1)×d

• an : 수열의 n번째 항
• a1 : 첫번째항
• d : 공차
• n : 항의 위치(몇번째 항)

3. 일반항 구하기

1번에서 구한 첫번째항, 공차를 공식에 대입해서 수식을 정리하기

• an=2+(n-1)*4
• an=2+4n-4
• an=4n-2

따라서 등차 수열의 일반항은 an=4n-2가 된다!

---

문제2 형제 선택자 (선택자 종합 실습 중)

[개념]

• 인접 형제 선택자 (A + B) : A 요소 바로 다음에 오는 B 요소 하나만 선택
• 일반 형제 선택자 (A ~ B) : A 요소 뒤에 나오는 B 요소 모두 선택

[결론]

• HTML 구조에 따라 +나 ~ 중 선택할 수 있으며, 인접한 경우 +를 써도 된다.
• 구조적으로 input과 label이 인접해 있다면 +와 ~ 모두 사용 가능하지만, 보다 유연하게 사용하려면 ~를 사용하는 것이 좋다.

[방법]

-HTML

-CSS

/* checked */
        /* 일반(A ~ B)형제 선택자 : 인접(+)보다 유연하게 사용 가능 */
        #red:checked ~ label[for="red"]{
            background-color: red;
            color: white;
        }

        #blue:checked ~ label[for="blue"]{
            background-color: blue;
            color: white;
        }

        #yellow:checked ~ label[for="yellow"]{
            background-color: yellow;
            color: black;
        }

 

HTML 구조에서 체크박스 (#red)와 레이블 (label[for="red"])이 인접 요소로 배치되어 있는 아래와 같은 경우

<input type="checkbox" id="red">
<label for="red">빨강</label>

 

인접 형제 선택자(+)도 사용 가능하다.

그러나 HTML의 구조가 아래와 같이 바뀌어 input과 label 사이에 다른 요소가 있다면 + 선택자는 작동하지 않으므로, (+) 대신 같은 부모 안에 있는 모든 후속 형제를 대상으로 적용하는 (~)를 사용한다.

 

<input type="checkbox" id="red">
<span>다른 요소</span>
<label for="red">빨강</label>

 

 

---

📌 개념

1. 기본 선택자

#orange{ color: red; }

• id는 하나의 문서에 하나만

2. 복합 선택자

/* 일치 선택자 */
span.orange{ color: red; }

• 일치 선택자 : 선택자 abc 와 xyz를 동시에 만족하는 요소 선택
• 자식 선택자 : A(부모) > B(자식)

ul의 자식 orange 클래스

3. 가상 클래스 선택자

종류

• 사용자의 행동 : hover, active, focus
• 요소의 상황: first-child, last-child, nth-child
• 부정 선택: not

3-1. 사용자의 행동 : hover, active, focus

• e:hover → 마우스 올라가 있는 동안 선택
• e:active → 마우스 클릭/ 키보드 엔터가 눌리는 동안만 선택
• e:focus → 커서 머물러 있는 동안 (input-text, textarea, ...)
• e: checked → 체크되었을 때 (input-radio, checkbox)

3-2. 요소의 상황 : first-child, last-child, nth-child

.fruits span:first-child 과일 클래스에서 자식 span이 첫번째 자식이라면 적용

 

.fruits div:first-child { color: red; }

fruits 클래스 안에 있는 첫 번째 자식 요소가 div일 때만 적용
HTML 구조(생략(~˘▾˘)~)에서 첫 번째 자식 요소는 딸기이므로, div가 첫 번째 자식이 아니라서 적용 안됨

 

.fruits h3:last-child fruits 클래스의 후손 h3이 마지막 자식이라면 적용

.fruits *:nth-child(2) div든 span이든 가리지 않고 2번째 요소 선택

3-3. 부정선택 : not

.fruits *:not(span)

과일 클래스의 전체 자식 중 span은 제외하고 스타일 적용함

 

 

4. 가상 요소 선택자

.box::before{
    content: "앞!"
}
.box::after{
    content: "뒤!"
}

• 새로운 요소를 만들 때 (콜론2개) 사용
• 선택된 요소의 앞, 뒤에 별도의 content 삽입하는 선택자
• 반드시 content라는 속성을 사용
• 빈값(””)이라도 넣어주어야 적용됨
• 활용예시: 쇼핑몰 페이지 메뉴에 ‘hot’ ‘추천’등을 넣기 위해 별도 태그 삽입이 아니라 가상 요소 선택자를 활용하여 처리하면 편하다!!

 

5. 속성 선택자

• 종류 : 특정 속성만 지정 / 속성과 속성의 값 지정

5-1. 기본 선택자

• id는 하나의 문서에 하나만 아이디 선택자
• #orange{ color: red; }

5-2. 복합 선택자

기본 선택자만으로는 선택이 불가능한 경우 사용

(1) 일치 선택자 : 선택자 abc 와 xyz를 동시에 만족하는 요소 선택

span.orange{
    color: red;
}

 

(2) 자식 선택자: A(부모) > B(자식)

(3) 후손(하위) 선택자 : A B ‘띄어쓰기’가 선택자 기호

div의 후손 orange