[부스트코스]웹 프로그래밍 기초, 9) CSS Selector

kanamycine·2020년 2월 12일
0

1. 웹 프로그래밍 기초

9) CSS selector


오늘은 CSS selector가 무엇인지와 종류들에 대해서 알아보는 시간을 갖겠습니다!


CSS selector ?

원하는 요소에 스타일을 적용하기 위해서는 해당 요소들을 잘 찾아야 합니다. 특정 요소뿐 아니라 여러 개의 요소일 수도 있는데요, 이 요소들을 쉽고 빠르게 찾을 수 있는 CSS selector에 대해서 알아보겠습니다.

요소에 style을 지정하기 위한 3가지 기본 선택자

tag로 지정하기.

<style>
     span {
       color : red;
     }
 </style>

id로 지정하기

<style>
     #spantag {
       color : red;
     }
</style>

<body>
     <span id="spantag"> HELLO World! </span>
</body>

class로 지정하기

<style>
     .spanClass {
     color : red
     }
</style>

<body>
     <span class="spanClass"> HELLO World! </span>
</body>

CSS Selector의 다양한 활용

id를 이용할 때는 #으로, class를 이용할때는 . 으로 이용한다는 것을 기억하시고, 그룹 선택 (여러 개의 요소들에게 같은 style을 적용해야 할 때,

h1, span, div { color : red }
h1, span, div#id { color : red }
h1.span, div.classname { color : red }

이처럼 활용하실 수 있습니다.

그 외에도 여러가지의 활용을 통해 스타일을 적용시키고 싶은 요소에게만 스타일을 적용할 수 있습니다. 매우 자주 사용되는 기술이기 때문에 꼭 기억해주세요.

#jisu span { color : red }
// jisu라는 id 값을 가진 자손 요소들 중 span 태그에 스타일을 적용

#jisu > span { color : red }
// 자식 선택(>) 바로 하위 앨리먼트에 스타일을 적용

#jisu > p:nth-child(2) { color : red }
// n번째 자식 요소를 선택하여 스타일을 적용

이번 포스팅에서는 css selector의 종류와 활용법에 대해서 살펴보았는데요, 다음 포스팅에서는 css 기본 style을 변경하는 것에 대해서 알아보겠습니다 감사합니다 !

0개의 댓글