[4] CSS셀렉터의 종류 및 설명(조합,상태,특성 선택자)
- 2021.08.26 -
- 2023.05.05 -
기존 개발블로그에서 작성했었던 내용물들을 통합하고자 옮겨 적었다
CSS 셀렉터
내부/외부 스타일 시트에서 문서의 html 요소를 선택할 수 있게 하는 문법
- tag 선택자 : html 문서의 모든 특정 태그를 선택할 때 사용
html 태그의 이름으로 바로 선택할 수 있다.
어떠한 기로호 붙이지 않고 태그 이름을 사용할 수 있다.
- id 선택자 : html 문서의 하나의 요소를 특정해서 선택할 때 사용
html태그의 속성으로 id를 지정/선언 할 수 있습니다.
하나의 id는 문서 내 하나만 존재 해야한다.
#기호로 표현한다.
html <p id="description-text-1"></p> 에서 css #description-text-1{ css 속성 선언 } 으로 표현
- class 선택자 : html 문서의 여러 요소를 그룹으로 선택할 때 사용
id가 주민번호같은 역할을 한다면 class는 분류를 위한 역할을 한다.
하나의 class는 문서 내 여러 개에 지정할 수 있다.
.(점) 기호로 표현한다.
<p class="description-text"></p> 이 .description-text{ css 속성 선언}으로 하나의 class를 조정할 수 있다.
조합 선택자
특정 요소 하위에 있는 요소를 선택한다.
- 자식 조합 선택자 : > 기호 사용
'자식'은 대표 요소의 바로 직계를 자식 이라고 함
- 자손 조합 선택자 : 띄어쓰기 사용
'자손'은 대표 요소의 자식의 모든 자식을 자손이라고 함
상태 선택자
: (콜론) 기호를 사용함.
요소가 특정 상태가 되었을 때만 선택됨.
- 반응 선택자 : hover(마우스 커서가 위헤),active(활성화된),visitied(방문한 링크) 등
- 상태 선택자 : focus(입력, 버튼에 포커스), enabled(사용가능한), disable(사용불가능한) 등
특성 선택자
요소에 부여된 특성의 존재 여부나 그 값에 따라 선택.
대괄호를 사용해서 특성을 지정함
- a[href] : href 속성이 지정된 요소
- form과 관련된 태그와도 많이 사용됨
마 치 며
아 머리아프다!
'Develope > CSS' 카테고리의 다른 글
[3] HTML로 작성한 페이지에 Style을 적용해보자 (0) | 2023.05.05 |
---|---|
[2] 글자와 관련된 스타일 (0) | 2023.05.05 |
[1] 개념과 선언하기 (0) | 2023.05.05 |
댓글
이 글 공유하기
다른 글
-
[3] HTML로 작성한 페이지에 Style을 적용해보자
[3] HTML로 작성한 페이지에 Style을 적용해보자
2023.05.05 -
[2] 글자와 관련된 스타일
[2] 글자와 관련된 스타일
2023.05.05 -
[1] 개념과 선언하기
[1] 개념과 선언하기
2023.05.05