CSS는 선택자(ex. h1, .class 등)를 잡아 HTML 요소에 스타일을 준다.
CSS가 선택자를 잡는 기준은 5가지로 나눌 수 있다.
이번 글에서는 Simple Selectors에 대해서 알아보겠습니다.
1) name을 기준으로 선택
/* h1 요소에 글자색 속성을 빨간색으로 정의 */
/* h1이 <h1> 요소의 name */
h1{
color : red;
}
2) class를 기준으로 선택
/* <h1 class='test'></h1> 다음과 같은 요소가 존재 */
/* 클래스명(test) 앞에 마침표('.')를 적어 class임을 나타낸다 */
.test{
color : red;
}
+
요소(elements)는 1개 이상의 클래스를 가질 수 있다.
/* 두개의 class('test'와 'example')를 가지는 요소 */
<h1 class='test example'></h1>
3) id를 기준으로 선택
/* <h1 id='test'></h1> 다음과 같은 요소가 존재 */
/* id명(test) 앞에 샵('#')를 적어 id임을 나타낸다 */
#test{
color : red;
}
4) 모든 요소를 선택
/ 별표('*')를 이용하여 페이지에 있는 모든 요소를 선택 */
* {
color : red;
}
+
콤마(' , ')를 기준으로 여러 선택자에 한꺼번에 같은 스타일을 줄 수 있다.
h1, h2 { color : red; }
.class1, class2 {color : red; }
#id1, #id2 { color : red; }
참고 - "Learn CSS" W3School (https://www.w3schools.com)
[CSS] CSS의 가상 선택자(Pseudo-class Selectors) (0) | 2020.01.29 |
---|---|
[CSS] CSS의 관계 선택자(Combinator Selectors) (0) | 2020.01.28 |
[CSS] CSS(Cascading Style Sheet) 개요 및 문법 (0) | 2020.01.24 |
[jQuery] toggle() - 화면에서 요소를 보였다가 안 보였다가를 반복하는 메소드 (0) | 2020.01.23 |
[jQuery] has() 특정 선택자를 가지고 있는 요소 찾기 (0) | 2020.01.21 |