1. 선택자
: 스타일을 적용하려는 HTML 요소를 지정하기 위한 패터
-> 기본 선택자, 가상 선택자(가상 클래스, 가상 요소), 결합자
-기본 선택자의 종류
2. 기본 선택자
-전체 선택자
: '*' 기호 사용 -> 웹 문서의 모든 요소에 스타일 적용
* {color: green}
-타입 선택자
: 스타일을 적용하려는 HTML 요소의 이름을 직접 사용
table{color: blue}
ul {color: red; font-style: italic; }
-클래스 선택자
*같은 요소이지만 서로 다른 스타일을 적용하는 경우
-> 요소명은 동일하게, 클래스명은 서로 다르게 지정
| CSS 정의 | 요소명.클래스명 {속성: 값; ... } |
| CSS 적용 | <요소명 class="클래스명">내용</요소명> |
*서로 다른 요소이지만 같은 스타일을 적용하는 경우
-> 요소명을 생략한 채 클래스명만 지정
| CSS 정의 | .클래스명{속성: 값; ...} |
| CSS 적용 | <요소명 class="클래스명">내용</요소명> |
-아이디 선택자
: 클래스 선택자의 사용 방법과 거의 동일 -> '#' 기호, id 속성
| CSS 정의 | 요소명#아이디명{속성: 값; ...} #아이디명{속성: 값; ...} |
| CSS 적용 | <요소명 id="아이디명">내용</요소명> |
*id 속성
: 요소의 정체성을 나타냄
: 아이디명은 문서 내부에서 중복되지 않고 오직 하나의 요소에서만 사용
ex)
출력:
-속성 선택자
: 요소의 속성값에 대한 표현과 일치하는 HTML 요소 선택
형식)
ex)
출력)
ex2)
출력2)
-가상 선택자
: 웹 문서상에는 존재하지 않지만 어떤 상황이 발생한 경우에만 적용할 수 있도록 임의로 선택자를 지정/사용
-> 기본 선택자로 활용하여 표현할 수 없는 정보를 기반으로 요소 선택
-> 가상 클래스
형식) 기본선택자: 가상클래스
-> 가상 요소
형식) 기본선택자::가상요소
ex - 가상 클래스: 링크, 사용자 동작)
// :link
// 아직 방문하지 않은 모든 링크 선택
// :visited
// 방문한 적이 있는 링크 선택
// :hover
// 마우스가 올라간 링크 선택
// :active
// 활성화되는(클릭되는) 링크 선택
출력)
ex - 가상 클래스: 사용자 인터페이스, 부정)
// :focus
// 포커스를 가진 요소
// :enabled
// 활성화된 상태의 요소
// :disabled
// 비활성화된 상태의 요소
// :checked
// 체크된 input 요소(체크박스, 라디오 버튼)
// :not(X)
// X로 표현되지 않은 요소
출력)
가상 클래스: 트리구조 형식)
ex - 트리구조)
// :nth-child(n)
// 동일한 부모 요소 안에서 n번째 자식 요소 선택
// :nth-last-child(n)
// 동일한 부모 요소 안에서 끝에서 n번째 자식 요소 선택
// :nth-of-type(n)
// 동일한 부모 요소 안의 형제 요소들 중에서 지정한 요소만을 계산하여 n번째 요소 선택
// :first-of-type
// = :nth-of-type(1)
출력)
ex - 가상 요소)
// ::first-line
// 특정 요소의 첫 번째 줄을 선택
// ::first-letter
// 특정 요소의 첫 번째 글자를 선택
// ::before
// 요소 앞에 내용/스타일 추가
// ::after
// 요소 뒤에 내용/스타일 추가
출력)
-결합자
: 두 개 이상의 선택자를 문맥이나 요소의 구조를 기반으로 결합하는 방법
ex)
출력)
