[CSS] 선택자

 

프로그래밍 세계를 탐구합시다.

 

 

 

CSS는 HTML 문서를 디자인하는 언어입니다.

작성한 HTML의 텍스트, 이미지, 배경 크기, 배치 방법 등의 요소를 설정할 수 있습니다.

 

 

CSS스타일의 기본 형식입니다.

선택자 { 속성1: 속성값: 속성: 속성값2: }

- 선택자(p) : 스타일이 적용되는 대상(위치)

-속성 / 속성 값 : "속성 : 속성 값"과 같은 형식으로 표현되며 속성이 여러 개 사용되는 경우 ;으로 구분

 

 

태그와 요소

p와 /p는 태그, selector는 요소

 

 

문서의 전체에 스타일을 적용하는 전체 선택자를 활용할 때에는 *을 입력

[형태]

* { 속성: 값;  ......}

 

 

선택자

 

(1)  타입 선택자 (type selector)

특정 태그를 사용한 모든 요소에 스타일 적용

 

[형태]

태그명 { 스타일 규칙 }

태그 : p

스타일 규칙 : color : blue;

 

 

(2) 클래스 선택자 (class selector)

특정 부분만 선택해서 스타일 적용

class="클래스명"으로 속성 지정

스타일 규칙으로 . 사용

 

[형태]

.클래스명 { 스타일 규칙 }

→ 결과물

 

(3) id 선택자 (id selector)

클래스 선택자와 비슷

id="아이디명"으로 속성 지정

스타일 규칙으로 # 사용

 

[형태]

#아이디명 { 스타일 규칙 }

 

→ 결과물

 

(4) 그룹 선택자 (group selector)

여러 선택자에 같은 스타일 적용

,로 구분

 

[형태]

선택자1, 선택자2 { 스타일 규칙 }