CSS | 2. 선택자

sojung·2021년 4월 2일
0

CSS

목록 보기
3/5
post-thumbnail

주요 선택자

1. 전체 선택자

모든 요소에 스타일 적용하기

* {

}

2. 태그 선택자

특정 태그를 사용한 요소에 스타일 적용하기

태그 {
   스타일
}
p {

}

3. 클래스 선택자

특정 부분에 스타일 적용하기
문서 안에서 여러 번 반복할 스타일이라면 클래스 선택자로 정의한다. 마침표(.) 다음에 클래스 이름 지정

.클래스명 {
   스타일
}
.bluetext {

}
h2.bluetext {

}   /* <h2> 태그에만 bluetext 클래스 선택자 적용 */

4. id 선택자

특정 부분에 스타일 적용하기
문서 안에서 한 번만 사용한다면 id 선택자로 정의한다. 파운드(#) 다음에 id 이름 지정

#아이디명 {
   스타일
}
#container {

}

class 선택자 vs id 선택자의 차이
공통점 : 요소의 특정 부분에만 스타일 적용
차이점
-클래스 선택자 : 문서 안에서 여러 번 반복
-id 선택자 : 문서 안에서 한 번만 사용

5. 그룹 선택자

같은 스타일을 사용하는 선택자를 한꺼번에 정의
쉼표(,)로 구분해 여러 선택자를 나열

h1, h2 {

}
profile
걸음마코더

0개의 댓글