전체 선택자 - 모든 HTML 요소 한꺼번에 선택하기
- 전체 선택자는 HTML파일의 <body>태그를 포함하여 태그 전체를 선택
- 전체 선택자 기호는 * 이고 { }로 그룹으로 지정
- <body>태그를 포함아여 그 안에 있는 모든 자식 태그에 적용
See the Pen 전체선택자 by 신범식 (@ulqsqjpw-the-solid) on CodePen.
태그 선택자 - 태그명을 이용하여 선택하기
- 태그 선택자는 HTML 파일의 특정 태그 요소를 선택
See the Pen Untitled by 신범식 (@ulqsqjpw-the-solid) on CodePen.
자손 선택자 - 자식과 하위 요소를 모두 선택하기
- 자손 선택자는 특정 HTML 요소의 자식 요소를 포함하여 그 하위에 있는 모든 요소를 선택
See the Pen 자손선택자 by 신범식 (@ulqsqjpw-the-solid) on CodePen.
자식 선택자 - 직계 자신 요소만 선택하기
- 자식 선택자는 특정 HTML 요소의 직계 자식 요소를 선택
- 부모와 자식 선택자 사이에 > 기호를 사용하면 직계자식 요소만 적용
See the Pen 자식선택자 by 신범식 (@ulqsqjpw-the-solid) on CodePen.
그룹 선택자 - 여러 개의 요소를 그룹으로 선택하기
- 그룹 선택자는 같은 CSS를 사용하는 HTML 요소가 있다면 그룹으로 묶어서 사용가능
See the Pen Untitled by 신범식 (@ulqsqjpw-the-solid) on CodePen.
순서 선택자 - 형제 요소의 순서를 이용하여 선택하기
- 순서 선택자는 HTML 요소의 순서를 이용하여 필요한 요소만 선택
See the Pen 순서 선택자 by 신범식 (@ulqsqjpw-the-solid) on CodePen.
수열 선택자 - 수식을 이용하여 선택하기
- 수열 선택자는 배수 또는 특정한 규칙에다라 요소를 선택
- 2n을 even로 변경해도 똑같다 (짝수 선택자)
- 2n-1을 odd로 변경해도 똑같다(홀수 선택자)
See the Pen 수열선택자 by 신범식 (@ulqsqjpw-the-solid) on CodePen.
속성 선택자 - 속성값을 이용하여 선택하기
- 속성 선택자는 HTML 요소의 속성을 선택
- CSS파일에서 대괄호를 이용하여 속성값을 지정
See the Pen 수열선택자 by 신범식 (@ulqsqjpw-the-solid) on CodePen.
가상 선택자 - 가상의 요소를 선택하기
- 가상 선택자는 실제 HTML 요소가 아닌 가상의 요소를 선택
See the Pen 가상 선택자 by 신범식 (@ulqsqjpw-the-solid) on CodePen.
클래스 선택자 - 클래스명으로 요소를 선택하기
- 클래스 선택자는 같은 태그가 여러개 있을때 각각 다른효과를 주기위해 class를 붙여서 사용
- HTML 에서는 class=클래스명으로 클래스 선택자 생성
- CSS 에서는 태그명.클래스명으로 사용 (태그명은 생략가능)
- 태그가 여러개있어도 같은 클래스 설정 가능
See the Pen 클래스 선택자 by 신범식 (@ulqsqjpw-the-solid) on CodePen.
아이디 선택자 - 아이디명으로 요소를 선택하기
- 아이디 선택자를 이용하여 HTML 요소를 선택
- 아이디값은 고유하기 때문에 여러개 지정불가
- 클래스 선택자와 마찬가지로 앞에 태그명 생략가능
See the Pen 아이디선택자 by 신범식 (@ulqsqjpw-the-solid) on CodePen.
'FE > 인터렉티브 웹' 카테고리의 다른 글
| 웹 페이지에서 영역별 크기 정하기 (0) | 2023.09.25 |
|---|---|
| 폰트 스타일링하기 (0) | 2023.09.24 |
| HTML에 CSS 연결하기 (0) | 2023.09.20 |
| 비디오 ·오디오 태그 - 멀티미디어 콘텐츠 삽입하기 (0) | 2023.09.19 |
| 폼 태그 - 사용자 정보 입력받기 (0) | 2023.09.18 |