어제의 나보다 성장한 오늘의 나

[CSS] css 선택자 (selector) 정리 본문

카테고리 없음

[CSS] css 선택자 (selector) 정리

today_me 2023. 1. 2. 15:03
반응형

 

 

 

Css는 html에 스타일을 주기 위해서 사용 됩니다.

특정 html 태그에 원하는 스타일을 주기 위해서는 css 선택자를 이용 하여야 합니다.

 

 

 

CSS 선택자 (Selector)


h1{
	color : blue;
}

 

이 코드를 보시면 h1 태그에 글자색을 파란색으로 바꾸라는 css 문법입니다.

h1이 바로 css 선택자입니다.

 

글자 색상을 바꾼 것처럼 스타일을 줄 건데 어떤 태그에 적용 해야 하는 지를 알려 주는 역할을 합니다.

 

 

 

 

 

Selector 종류


1) 전체 선택자
2) 태그 선택자
3) 클래스 선택자
4) id 선택자
5) 복합 선택자

 

 

이 html을 예시로 보여드리겠습니다.

 

<body>
    <h1>Hello</h1>
    <h2 class="h2">Hello</h2>
    <h3 id="h3">Hello</h3>
    <div>
        <h3>Hello</h3>
    </div>
</body>

 

 

 

1) 전체 선택자

 

표기 :  * { }

모든 태그에 css를 적용합니다.

*{
	color : blue;
}

 

 

 

 

 

 

2) 태그 선택자

 

표기 : 태그이름{ }

해당 태그에 해당하는 모든 태그에 css를 적용합니다.

 

h1{
	color:blue;
}

 

 

 

3) 클래스 선택자

 

표기 : .클래스이름{ }

 

해당 클래스에 속하는 모든 태그에 css를 적용합니다.

.h2{
    color: blue;
}

 

 

 

 

4) id 선택자

 

표기 : #id이름{ }

해당 id를 가진 모든 태그에 css를 적용합니다.

 

#h3{
    color: blue;
}

 

 

 

 

 

5) 복합 선택자

 

표기 : 바깥쪽태그이름 안쪽 태그이름{ }

 

태그 속의 태그를 선택할 때 사용합니다.

 

div h3{
    color: blue;
}

 

! div 속 h3를 선택하였기에 3번째 hello는 선택 되지 않았습니다

 

 

감사합니다..!

반응형
저작자표시
Comments