CSS의 기본 3 - CSS 기본 선택자 알아보기

CSS 수업 때 선택자에 대해서 수없이 들어보았으나 어떻게 사용하는지는 거의 감을 잡지 못했다. 하지만 단 1시간 학습을 함으로 이 개념을 확실히 배울 수 있었다. 그러면서 난 역시 필기하면서 책과 함께 직접 실습하고 스스로 문제를 푸는 과정 속에서 많이 성장한다는 걸 느꼈다.

내가 언제 공부가 하기 싫은지 생각해보면 눈으로만 학습하고 있거나 과정이 너무 어려워서 무슨 말인지 알아들을 수 없을 때였다. 요즘 수업이 그러했다. 도무지 따라갈 수 없을만큼 벅찼고 어디서부터 시작해야 할지 알 수 없었다. 

 

이제 난 다시 마음을 잡고 공부에 집중하고 있다. 공부가 너무나 재미있어서 손에서 놓을 수 없을 정도이다. 다시 잡은 이 마음을 다시는 놓치고 싶지 않다.

 

이번 단원에서는 스타일 규칙을 태그뿐 아니라 웹 문서의 어떤 요소든지 적용하는 방법을 배우게 된다. 선택자는 웹 문서에서 어느 부분에 스타일을 적용할지 알려주는 것이다.

---

 

 

 

 

1. 전체 요소에 스타일을 적용하는 전체 선택자

스타일을 문서의 모든 요소에 적용할 때 사용한다. 주로 모든 하위 요소에 스타일을 한꺼번에 적용한다.

* { 속성: 값; .....}

 

기본 스타일을 초기화할 때 자주 사용한다. 

 

 

전체 선택자 사용하기

 

 

마진과 패딩을 0으로 주었어니 여백이 모두 사라졌다. 왼쪽은 여백이 적용된 사진이다.

 

 

태그와 요소의 차이점

■ 태그 : 태그 자체
■ 요소 : 태그를 적용한 것

<p>텍스트 단락 지정하기</p>​

<p> 태그를 적용한 '텍스트 단락 지정하기' 부분을 p의 요소라고 한다.

 

---

 

 

2. 특정 요소에 스타일을 적용하는 타입 선택자

특정 태그를 사용한 모든 요소에 스타일을 적용한다.

 

 

타입 선택자와 태그 선택자의 차이점

■ 타입 선택자 : 태그 이름을 선택자로 사용하므로 태그 선택자, 대상이 요소이므로 요소 선택자라고도 함

 

---

 

 

 

3. 특정 부분에 스타일을 적용하는 클래스 선택자

특정 부분만 선택해서 스타일을 적용한다. 

 

클래스 스타일 : 클래스 선택자를 사용해 만든 스타일

 

스타일을 적용할 때는 태그 안에 class="클래스명"을 지정한다.

 

 

클래스 선택자 사용하기

 

 

특정 클래스인 레드향에만 네모칸이 쳐진 것을 볼 수 있다. 부분적으로 적용할 때는 span 태그를 사용한다. 색깔도 지정해서 바꾸어보았다. 이런 식으로도 바꾸어보았는데 레드향을 클래스 선택자로 하자 앞에 있는 h1 태그도 바뀐 것을 볼 수 있다.

---

 

 

 

 

4. 특정 부분에 스타일을 한 번만 적용할 수 있는 id 선택자

클래스 선택자가 문서에서 여러 번 적용할 수 있는 반면, id 선택자는 문서에서 한번만 적용할 수 있다는 점이 다르다. 그 외에는 클래스 선택자와 같다.

 

 

 

id 선택자 사용하기

 

---

 

 

 

 

5. 같은 스타일 규칙을  사용하는 요소들을 묶어주는 그룹 선택자

여러 선택자에서 같은 스타일 규칙을 사용하는 경우 쉼표로 구분해서 정의한다.

 

---

 

 

 

학습을 마치고

이렇게 해서 선택자에 대한 학습을 마쳐본다. 5가지 선택자에 대해서 수업 시간에 들어보았지만, 마치 처음 공부하는 것 같았다. 오늘 공부를 하면서 새롭게 깨달은 사실이 하나 있다. 그건 내 경우에 수업 시간에 대답을 하고 적극적으로 참여하는 것이 오히려 공부의 질은 떨어진다는 것이다.

반응을 할수록 난 거기에 신경쓰느라 정작 선생님이 무슨 말을 하는지 잘 알아들을 수 없었다. 다음에 수업을 들을 때는 최대한 조용히 수업에만 집중해볼 생각이다.

 

이제 자리도 바꾸어서 더 마음에 든다. 내 옆에 짝꿍도 없고 뭐라고 할 사람도 없으며 계속 해서 내가 뭘 하나 빤히 쳐다보는 세진님도 없어서 정말 좋다. 한번 뭐라고 해주고 싶었지만 내버려두었다. 이제 다음 포스트에서 케스팅 스타일 시트에 대해서 학습해볼 것이다.