CSS 소개와 CSS 선택자

CSS란 무엇일까요?

---

이전 시간까지는 HTML에 대해서 배웠습니다. 오늘부터는 CSS에 대해서 배워보겠습니다. CSS란 도대체 무엇일까요?

CSS는 HTML 문서가 어떻게 배치되고 어떤 식으로 보여질 지와 같은 스타일을 표현하는 언어입니다.

HTML만으로 구성된 문서들은 아주 투박했습니다. 우리가 자주 접하는 웹사이트들도 CSS가 없다면 상상 이상으로 아주 투박했을 겁니다. 

css가 없는 네이버의 메인입니다.

그렇게 깔끔한 네이버의 메인도 CSS가 없으니 같이 만들던 예시만큼 투박해 보이죠? 보기 좋은 떡이 먹기도 좋다는 말이 있습니다. 아무리 아주 유익한 사이트라고 해도 보기 좋게 꾸미지 않으면 사람들이 찾지 않게 되겠죠.

얼른 CSS도 배워서 실전 같은 예제들을 만들어봅시다.

우선 CSS선택자를 배워봅시다. 

---

CSS 선택자란 무엇일까요 ? 

CSS는 HTML태그를 선택해서 스타일을 주는 것입니다. 그래서 여러 방식으로 태그를 선택할 수 있는데, CSS 선택자란 스타일을 줄 HTML 태그를 가리키는 것이라고 이해하면 됩니다.

이 그림에서 p가 선택자가 됩니다. 여러가지 방식으로 태그를 가리킬 수 있는데 위의 사진에서는 <p>태그에 글색은 흰색으로 하고, 배경은 검은색으로 주는 효과를 주었습니다.

태그이름으로 css선택자를 주면 해당 태그가 모두 포함됩니다.

이전 시간에 배웠던 id와 class를 기억하시나요 ?

#one{ 
  color: red; 
} 

 
.two{ 
  color: blue; 
} 

아이디가 one인 태그와 class가 two인 태그에 각각 효과를 주었습니다.

id나 class로 css선택자를 주면 id와 class 값이 일치하는 태그가 선택됩니다. 

<div id="top"> 
  <h1>위 문단</h1> 
  <p>본격적인 예제입니다.</p> 
  <div>div태그</div> 
</div> 
<div id="mid"> 
  <h1>중간 문단</h1> 
</div> 
<div id="bottom"> 
  <h1>아래 문단</h1> 
  <p>예제 1번</p> 
  <p>예제 2번</p> 
</div> 

다음 예시를 보면서 공부해보겠습니다. 

id가 top인 <div>태그 밑의<h1>태그에 효과를 주고 싶을 때 단순히 h1이라고 선택자를 준다면 다른 <div>태그 밑에 있는 <h1>태그들도 모두 선택이 될 것입니다. 그래서 필요한 것이 "띄어쓰기"입니다.

#top h1이라고 하면 id가 top인 <div>태그 밑의 <h1>태그만 선택할 수 있습니다.

선택자에 띄어쓰기를 주면 자식태그를 선택할 수 있습니다. 

id가 "top"과 "mid"인 <div>태그의 <h1>태그에만 효과를 주려면 어떻게 선택해야 할까요?

css 선택자, css선택자{ ... } 처럼 ,(콤마)를 이용해서 여러개의 선택자를 한번에 선택할 수 있습니다. 

기억하세요. ,(콤마)를 이용하면 여러 곳에 한번에 효과를 줄 수 있습니다

id가 "bottom"인 <div>태그 밑에는 2개의 <p>태그가 있습니다. 그 중에 밑에 있는 <p>태그에만 효과를 주려면 어떻게 선택할 수 있을까요?

#bottom p:nth-child(3){ ... }로 선택자를 적으면 id가 "bottom"인 <div>태그 밑의 <p>태그 중에 부모 태그의 3번째 자식태그에 해당하는 <p>태그만 선택할 수 있습니다.

부모태그 자식태그:nth-child(number){ ... }로 더 세분화된 선택이 가능합니다.

외울게 또 늘었지만 천천히 외우시면 됩니다. 앞으로 예시를 들면서 자주 만들다 보면 자연스레 외워지고 더 다양한 형태의 선택자를 자연스럽게 접하게 되실겁니다. 조금 더 연습이 필요하시면 앞에 있는 예시의 <style>태그를 살펴봐주세요.

이전 강의 보러가기 

수업을 마치기 전에 퀴즈를 2개 내겠습니다. 답은 댓글로 달아주시면 제가 해설을 달아드리겠습니다. 

1번. div.many{ ... }와 div .many{ ... }는 뜻이 같을까요 아님 다를까요? 혹시 다르다면 각각의 선택자들이 무엇을 의미하는지 적어주시면 됩니다.(div 뒤에 띄어쓰기에 주목하세요)

2번. <div><p>내용1</p><p>내용2</p></div>라는 html 문서가 있다면, <div>태그 밑에 2번째 <p>태그를 선택하는 선택자를 적어주세요.