타입 선택자[CSS]

2020. 3. 10. 18:11

[광고 누르면 오늘의 행운 상승!!]

선택자 : HTML 요소를 선택하기 위해 사용되는 CSS 구문
타입 선택자 (Type Selector)
- HTML의 요소명, 요소의 클래스 속성 값, ID 값
- 가장 쉽고 선택의 기본이 되는 기초적인 선택자
HTML 선택자
- 타입 선택자 중에서 HTML요소가 선택자인 선택자
- 선택자 형식 HTML 요소명

클래스 선택자 -CSS를 적용할 대상 : HTML 클래스 속성
- 클래스 선택자 속성 : 요소들을 원하는 그룹으로 묶을 수 있
- HTML 문서 내의 동일한 클래스 값을 가지는 모든 요소에 적
- 선택자 형식 : .(점)으로 시작하는 클래스 속성 값

.toast { color : red}

<body>
	<h1 class = "toast">이삭토스트는 햄치즈1</h1>
	<h2 class = "toast">이삭토스트는 햄치즈2</h2>
	<h1 class = "toast">이삭토스트는 햄치즈3</h1>
</body>

ID 선택자
- CSS를 적용할 대상 : HTML ID속성 값
- HTML ID 속성 : HTML 문서 내의 유일한 값으로 고유의 요소 식별
- HTML 문서 내의 같은 ID를 가진 유일한 요소에 적용
- 선택자 형식 : #으로 시작하는 ID속성 값

#toast { color : green}

<body>
	<h1 id = "toast">이삭토스트는 햄치즈1</h1>
	<h2 id = "toast">이삭토스트는 햄치즈2</h2>
	<h1 id = "toast">이삭토스트는 햄치즈3</h1>
</body>

그룹 지정
- 여러 요소에 동일한 CSS스타일 적용 : 클래스 속성 이용 → BUT 이미 클래스 속성 적용한 경우 스타일 그룹 위해 클래스 속성 지정 불가
- 두 개 이상의 요소에 동일한 스타일을 적용하고 싶을 때
- 그룹 지정 형식 : ,(쉼표)로 동일한 스타일 적용할 선택자들 분리해 나열

h1, h2, h3, #toast { color : green}

고급 선택자 (계층 위치 선택자)
- 고급 선택자 : HTML 문서의 요소들의 계층 관계를 이용하여 선택하는 선택자
- HTML 요소들의 계층관계 : 자손 요소, 직계 자손 요소, 형제 요소, 인접 형제 요소
- 자손 요소 : 특정 요소의 모든 하위 요소들 → 특정 요소의 자손
-자손은 하위 계층 내부의 중첩되는 계층은 신경쓰지 않음-

아 누가 광고 좀 안누르려나 , 1년해서 만원벌었네