Section 7. CSS 선택자의 세계(1)

이번 섹션에 포함된 강의명은 다음과 같다.

^{(강의에서 제공된 번역 내용을 기반으로 작성하지만, 간혹 오역으로 판단될 경우에는 내 해석으로 대체할 수 있음..!!)}

순서	강의명	소요 시간	중요도 (필수crucial/중요important/선택nice to have)
01	전체 선택자 & 요소 선택자 Universal & Element Selectors	4' 57"	필수
02	ID 선택자 The ID Selector	5' 24"	필수
03	클래스 선택자 The Class Selector	4' 43"	필수
04	코딩 연습 9: Basic Selectors Practice Coding Practice 9: Basic Selectors Practice	-	-
05	자손 선택자 The Descendant Selector	5' 11"	필수
06	코딩 연습 10: Descendant Combinator Practice Coding Practice 10: Descendant Combinator Practice	-	-
07	인접 선택자 & 직계 자손 선택자 The Adjacent & Direct-Descendant Selectors	5' 03"	중요
08	속성 선택자 The Attribute Selector	5' 30"	중요
09	가상 클래스 Pseudo Classes	8' 47"	중요
10	코딩 연습 11: Checkerboard Exercise Coding Practice 11: Checkerboard Exercise	-	-
11	가상 요소 Pseudo Elements	4' 23"	중요
12	계단식 CSS The CSS Cascade	2' 21"	필수
13	빌어먹을 우선순위 WTF is Specificity	8' 00"	필수
14	퀴즈 2: 우선순위 퀴즈 Quiz 2: Specificity Quiz	-	-
15	팁: Chrome 개발자 도구와 CSS Tip: Chrome Dev Tools & CSS	3' 57"
16	인라인 스타일과 중요도 Inline Styles & Important	3' 49"
17	CSS 상속 CSS Inheritance	5' 10"

 

01. 전체 선택자 & 요소 선택자

전체 선택자

문서의 모든 요소에 적용하고 싶은 스타일이 있을 때

* {
   color: black;
}

과 같이 *(asterisk, a.k.a. 별표)를 앞에 써준다.

 

보통 모든 텍스트를 하나의 색으로 만들거나, 특정 폰트 크기를 지정하고 싶은 경우에 쓴다.

 

BUT 용량, 크기가 큰 문서에서는 다소 비효율적이다.

비효율적이면 잇팁인 내게는 바로 아웃이지 (끄덕끄덕🙆🏻‍♀️)

 

 

 

요소 선택자

h1 {
   background-color: #666;
}

과 같이 스타일을 적용하고자 하는 요소 이름을 중괄호 { 앞에 써 준다.

 

 

 

여러 개의 요소를 선택하는 선택자

쉼표(,)로 구분해서 작성한다.

p, h3 {
   font-size: 200%;
}

 

 

 

 

 

02. ID 선택자

원하는 요소에 ID를 부여해서 그 요소만 콕 집어 스타일을 적용할 때 사용한다.

#search {
   background-color: #f4f269;
}

ID에는 띄어쓰기가 없어야 하고, 되도록 짧으면서 의미가 담겨 있어야 한다..!!

또한, 하나의 페이지 안에서 바로 그 ID는 한 번만 소환되어야(?) 한다는 것이 중요한 특징이다.

unique identifier_{고유한 식별자}이어야 하기 때문!

CSS 파일에, 또는 HTML 파일의 <style> 부분에 ID 선택자를 작성할 때는 꼭! #_octathorpe을 앞에 써 주어야 한다!

(같은 모양의 기호를 쓴다고 해서 16진법 색상 표현법과 같은 의미라고 이해한다면 큰 오산이다!!) 

 

 

여기서 Tip,

색을 고르는 데 쓰기 좋은 사이트를 강사님이 알려주셨다.

https://coolors.co/palettes/trending

Trending Color Palettes - Coolors

 

컬러 팔레트도 볼 수 있고,

다른 메뉴로 이동(Tools > Other Tools > Explore Gradient)하면 그러데이션 컬러 예시도 많이 볼 수 있다.

 

 

이 ID 선택자가 편리하다는 이유로 한 페이지에 수십, 수백 개의 ID 선택자를 만들고 싶을 수는 있지만,

다른 선택자도 앞으로 많이 배우면, ID 선택자를 그렇게 많이 쓰지 않아도 된다.

모든 요소에 다른 스타일을 적용해 다르게 표현하고 싶다고 ID를 많이 만들지는 말아야 한다!

 

 

 

 

03. 클래스 선택자

클래스 선택자는 ID 선택자와 함께 제일 많이 사용되는 선택자이다.

.complete {
   color: green
}

위처럼 온점(.)을 앞에 찍어서 씀으로써 클래스 선택자임을 표시하는데,

ID 선택자와 다른 점을 꼽으라면 여러 요소에 적용될 수 있다는 점이다.

 

강사님이 여기서 알려주신 Tip이 있다..!

(사실 수업에서 알려주신 건 MAC OS 기준이라 Windows OS에서는 같은 기능을 어떻게 쓰는지 구글링해봤다.)

원하는 여러 곳에 같은 것을 입력해 넣고 싶을 때, 즉, 멀티 커서를 놓는 방법인데,

 Alt 를 누르면서 마우스를 클릭하면 다음과 같이 나온다. (MAC OS에서는  Option + 마우스 클릭이라고 한다.)

 

클래스를 사용해서 요소를 그룹으로 묶을 때는

그 요소의 유형이 같지 않아도 된다.

그러니까, <span>, <button> 등 요소의 성격이 다르더라도 class값이 같으면 같은 스타일을 적용할 수 있다는 뜻이다.

 

 

 

 

 

04. 코딩 연습 9: Basic Selectors Practice

<h1>Todos</h1>
<ul>
  <li class="done">Walk Chickens</li>
  <li>Clean Out Coop</li>
  <li class="done">Collect Chicken Eggs</li>
  <li>Incubate Chicken Eggs</li>
  <li>Hatch New Chickens!</li>
</ul>
<button id="clear">Clear List</button>
<button>Add Todo</button>

위의 제공된 html 파일을 건드리지 않고,

 

① li 요소의 글자 색을 파란색으로

② 클래스 done의 글자색을 회색으로

③ id명이 clear인 요소의 배경색은 빨강, 글자색은 흰색으로

 

위의 ①~③을 별도의 CSS 파일로 작성하는 것이 미션이었다.

li {
   color: blue;
}
.done {
   color: grey;
}
#clear {
   background-color: red;
   color: white;
}

 ↓

완성^^

 

 

 

 

 

05. 자손 선택자

자손 선택자는 어떤 요소의 자식인 요소만을 골라서 스타일을 적용할 때 사용된다.

 

li a {
   color: teal;
}

위와 같은 CSS 파일이 있다고 가정한다면,

연결된 HTML 파일을 구성하는 요소들 중에서 <a>를 고르되, <li>의 자식인 요소들만 고른다는 뜻이다.

(즉, <li> 요소에는 스타일 적용이 안 되는 거다.)

 

앞에서 다룬

여러 개의 요소를 선택하는 선택자 (쉼표(,)로 구분)와는 다르게

부모 요소와 자식 요소 간에 1칸의 공백을 두는 것이 작성 방법에서의 차이이다.

 

실제로,

이러한 자식 선택자를 응용해서

A 요소 안에 있는 B 요소의 자식 요소인 C요소에 스타일을 적용하고 싶을 경우도 존재할 것이다.

(그러니까.. 음... 무려 조부모 요소(?)까지 언급된다는 점....?ㅎㅎ)

section li a {
   background-color: salmon;
}

가능은 하다.. 그런데 강사님은 별로 추천하지 않으신다고.

 

대신에, 앞에서 배웠던 ID 선택자나 클래스 선택자를 응용하면 된다고 했다!

.post a {
   color: pink;
}

이렇게, 클래스 선택자나 ID 선택자가 작성된 요소들만 골라 그 안의 <a> 요소에 스타일을 적용할 수도 있다!

부모 요소와 같은 상위 항목에 클래스 선택자, ID 선택자를 적용함으로써 원하는 위치에 있는 요소만을 특정할 수 있다는 점에서, 일일이 클래스 선택자나 ID 선택자를 부여할 필요가 없다는 것을 알 수 있다.

 

 

<footer>
   <nav>
      <ul>
         <li>
            <a href="#home">Home</a>
         </li>
         <li>
            <a href="#about">About</a>
         </li>
         <li>
            <a href="#contact">Contact</a>
         </li>
         <li>
            <a href="#puppies">Puppies</a>
         </li>
      </ul>
   </nav>
</footer>

또, 가령 위와 같은 코드가 있다고 한다면 (html 파일을 만드는 데 기본적으로 필요한 상용구들은 생략했다)

호오오옥시 상용구라는 게 뭔지 까먹었다면 <html> <head> <body> 이런 것이 포함된다고 기억하면 된다..! (Section 3. (2) 포스팅 참조)

 

footer a {
   background-color: black;
   color: white;
}

와 같이 바.로. 위의 부모 요소와 함께 작성할 필요는 없다. (조상(?) 요소를 적어도 괜찮다ㅋㅋ)

 

 

 

 

 

06. 코딩 연습 10: Descendant Combinator Practice

<!--DON'T CHANGE THIS FILE (PLEASE!)-->
<header>
  <a href="/home">Home</a>
  <a href="/contact">Contact</a>
  <a href="/about">About</a>
</header>

<p>
  I like to eat <a href="/popcorn">popcorn</a> and <a href="/donuts">donuts</a>
</p>

<p id="dislikes">
  I hate eating <a href="/pickles">pickles</a> and <a href="/beets">beets</a>
</p>

위의 html 파일에

 

① header 안의 link: 글자 크기는 30px, 글자 색은 teal로 지정

② 'dislikes'라는 id를 가진 p 요소 안의 link: 굵은 글씨, 글자 색은 빨강으로 지정

 

을 하는 것이 과제이다.

header a {
    font-size: 30px;
    color: teal;
}
#dislikes a {
    font-weight: bold;
    color: red;
}

↓