관리 메뉴

클라이언트/ 서버/ 엔지니어 "게임 개발자"를 향한 매일의 공부일지

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

웹 · 앱 개발/HTML & CSS

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

huenuri 2024. 8. 3. 19:16

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

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

 

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

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


 

 

 

 

 

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

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

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

 

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

 

 

전체 선택자 사용하기

 

 

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


 

 

태그와 요소의 차이점

■ 태그 : 태그 자체
■ 요소 : 태그를 적용한 것
<p>텍스트 단락 지정하기</p>​


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


 

 

 

 

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

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

 

타입 선택자 사용하기

 

 

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

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

 

 

 

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

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

 

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

 

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

 

 

클래스 선택자 사용하기

 

 

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


 

 

 

 

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

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

 

 

id 선택자 사용하기

 


 

 

 

 

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

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

 


 

 

 

학습을 마치고

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

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

 

이제 자리도 바꾸어서 더 마음에 든다. 내 옆에 짝꿍도 없고 뭐라고 할 사람도 없으며 계속해서 내가 뭘 하나 빤히 쳐다보는 사람도 없어서 정말 좋다. 한번 뭐라고 해주고 싶었지만 내버려 두었다. 어쨌든 나중에는 인사조차 하지 않고 서로 완전 무시하는 관계가 되었다. 하지만 그건 그 사람뿐 아니라 우리반에 두 명만 빼고 모두 그러했다.

어쨌든 난 인사교에서 만난 사람들은 담임이든 교육생이든 딱 한 명만 제외하고 다시는 만나고 싶지 않다. 그리고 몇년 후 내가 굉장한 인재가 되어서 그들을 모두 내려다보며 나의 약속을 반드시 이룰 것이다. 이것으로 그들에게 반드시 복수하기로 굳은 다짐을 했다.

 

이제 다음 포스트에서 캐스팅 스타일 시트에 대해서 학습해 볼 것이다.