KDT 5th 웹개발자 입문 수업 3일차

CSS의 선택자는 될수록 상세하게 지정해주는 것이 좋다.

난 css의 선택자 지정이 넘 어렵다.. 예전에 영어 공부할 때도 지시 대명사를 참 어려워하곤 했었다... 그래서 자바스크립트의 this도 이렇게 헷갈리는 걸지도. 여하튼 선택자를 지금껏 독학만 하다가 제대로 배워서 정리해본다.

 

1. CSS 선택자

CSS는 HTML 요소의 style을 정의하는 것이므로 스타일을 적용하고자하는 HTML 요소를 선택할 수 있어야 한다.

이를 선택자로 지정한다.

 

1-1. 기본 선택자

순수하게 무엇인가 호출할 때 사용

• 전체 선택자 : *
  • HTML의 모든 요소를 선택
• 태그 선택자 : 태그명
• class 선택자 : class 속성의 값
  • .(점)이 class라는 기호를 선택자 앞에 사용
  • .클래스명 { }
• id 선택자 : id 속성의 값
  • #이 id라는 기호를 선택자 앞에 사용
  • #id명 { }

 

1-2. 복합 선택자

특수한 요소를 호출하고 싶을 때 기본 선택자만으로는 선택이 불가능한 경우 사용

• 일치 선택자 : 다수의 선택자를 동시에 만족하는 요소
  • 띄어쓰기 없이 다수의 선택자를 기재한다.
  • ex) span.orange { } 이면, span태그면서 클래스orange인 요소를 선택
• 자식 선택자 : 선택자의 자식 요소를 선택(직계자식만)
  • 부모요소 > 자식요소 형식으로 사용, > 기호
• 후손(하위) 선택자 : 선택자의 하위(후손) 요소 선택
  • 부모요소 후손요소 형식으로 띄어쓰기가 기호임!
• 인접 형제 선택자 : 선택자의 바로 다음 형제 요소를 하나 선택
  • 선택자 + 선택자
  • + 기호를 사용
  • 지정해준 선택자의 바로 다음에 위치하지 않으면 선택되지 않음
• 일반 형제 선택자 : 선택자의 다음 형제 요소를 모두 선택
  • 선택자 ~ 선택자
  • ~ 기호를 사용

 

1-3. 가상 클래스 선택자

사용자의 행동에 따라 변화하는 가상 상황에 따라서 요소 선택시 각 요소의 상황에 따라 사용자 원하는 요소를 선택할 때 사용

특정 요소를 부정할 때 사용

• 사용자의 행동에 따라 변화
  • hover : 선택자 요소에 마우스 커서가 올라가 있는 동안 선택
    • 선택자:hover
  • active : 선택자 요소에 마우스를 클릭하고 있는 동안 선택
    • 선택자:active
  • focus : 선택자 요소에 포커스 되어 있을 때 선택
    
    • 선택자:focus

* Focus 가 안되는 요소에 강제로 추가하는 법

- 속성으로 tabindex="-1" 을 주어서 포커스 효과를 줄 수 있음

- 속성 이름을 보고 유추할 수 있듯 Tab키를 눌러서 포커스를 하는 순서를 지정하는 속성

- tabindex값에 -1 이외의 값을 넣어줄 경우 기존 페이지의 포커스 흐름이 깨질 수 있기에 많이 사용하는 것은 비추천

 

• 요소의 상황
  • first-child : 첫번째 자식
    • 선택자:first-child 라고 사용하며, 첫번째 자식이 지정해준 선택자와 같아야만 선택 됨 
  • last-child : 마지막 자식
    • 선택자:last-child 마지막 자식이 지정해준 선택자와 같아야만 선택 됨
  • nth-child : n번째 자식
    • 선택자:nth-child(정수) 원하는 자식의 인덱스로 지정 가능하다
    • 만약 홀수번째 자식들만 지정하고 싶다면 2n+1 을 넣어주고 짝수번째 자식들만 지정하고 싶다면 2n을 넣어준다.
    • n은 0부터 차례대로 입력됨!!

<div class="fruit">
  <span>딸기</span>
  <span>수박</span>
  <div>오렌지</div>
  <p>망고</p>
  <h3>사과</h3>
</div>

.fruit span:first-child {
  color:red;
}
.fruit h3:last-child {
  color :aqua;
}
.fruit *:nth-child(2) {
  color : brown;
}

/*결과 딸기는 red, 수박은 brown, 사과는 aqua*/

• 부정 선택자 : 특정 선택자를 제외
  • 선택할선택자:not(제외할선택자) 로 사용하여 제외할 선택자를 제외한 것만 선택

 

1-4. 가상 요소 선택자

태그(요소)의 개념이므로 우선 순위 점수는 1점 처리

선택된 요소의 앞, 뒤에 별도의 content를 삽입하는 선택자

속성 content라는 속성을 사용하며 빈 값("")을 넣어줘서 적용해주는 방식으로 사용한다.

• 선택자::before : 요소의 앞에 삽입
• 선택자::after : 요소의 뒤에 삽입

가상 요소 선택자는 실제로 의미없는 HTML 태그를 만들지 않고 요소 삽입이 가능하여 자주 사용된다.

(예를 들어 쇼핑몰 페이지에 메뉴에 Hot, 추천 등을 넣기 위해 별도의 태그를 삽입하는 것이 아닌 가상 요소 선택자를 활용하여 처리

 

 

1-5. 속성 선택자

지정한 특정 속성을 가지고 있는 태그를 선택하는 선택자

• 특정 속성을 포함한 요소 선택 : [속성명]
• 속성과 속성의 값으로 요소 선택 : [속성명="속성값"]

 

---

2. 스타일 상속

자식 요소가 별도의 style 속성이 없을 경우 부모의 속성값을 그대로 상속한다.

다만, 상속이 되는 속성과 상속이 안되는 속성으로 구분된다.

상속되는 속성들 -> 대부분 글자/문자 속성들이다.
font-weight
font-style
font-size
line-height
font-family
color
text-align
...

 

✔️ 강제 상속

자동 상속 되지 않는 속성의 값을 inherit으로 주어 부모의 CSS 속성값을 그대로 상속하게 하는 방법

 

 

✔️ 선택자 우선 순위

참조 방식(인라인/내장/링크CSS) 우선 순위와는 다른 개념이다.

같은 HTML 요소가 여러 선택자에 의해서 선택 되었을 경우 어떤 선택자의 CSS 속성을 우선 적용할지 결정하는 방법

1순위는 점수가 높은 선택자가 우선

2순위는 점수가 같은 경우, 가장 마지막에 읽힌 선택자가 우선

 

우선 순위 점수 측정법

• 상속 : x
• 전체 선택자(*) : 0 점
• 태그 선택자/가상 요소 선택자 : 1점
• 가상 클래스/ 클래스 선택자 : 10점
• id 선택자 : 100점
• 인라인 style 선언 : 1000점
• !important : 99999999점
  • 속성명: 속성값 !important; 으로 속성값 다음에 써준다.

 

.list li.item { } // 10+1+10 = 21점
.list li:hover { } // 10+1+10 = 21
.box::before { } // 10+1 = 11 // 가상 요소 선택자는 1점 처리
#submit span { } // 100+1 = 101
header .menu li:nth-child(2) { } // 1+10+1+10 = 22
h1 { } // 1
:not(.box) { } // 10