1. [웹 디자인] CSS 선택자(selector)
ㅇ HTML 요소 선택용 식별자
- HTML 요소 태그를 선택 접근하여, 스타일을 지정케함
2. 단순 선택자 (simple selector)
ㅇ universal selector (모든 요소 선택자)
- `*` 기호로 표기, 모든 요소를 한꺼번에 지정
- (가장 낮은 우선순위를 갖음)
ㅇ element selector (특정 요소 선택자)
- 특정 유형의 요소를 지정하는데에 사용
. 例) `a`, `hr`, `div` 등 HTML 태그명 기호를 사용하여 표기
ㅇ id selector (id 선택자)
- `#` 기호를 사용하여 표기, 요소 id를 통해 해당 요소를 지정 (#id명)
ㅇ class selector (class 선택자)
- `.` 기호를 사용하여 표기, 클래스명을 통해 해당 요소를 지정 (.class명)
ㅇ attribute selector (속성 선택자)
- 속성자[attr] { } : 단순 속성 선택자
- 속성자[attr='value'] { } : 지정 속성 선택자
- 속성자[attr~='value'] { } : 부분 일치 속성 선택자
. 완전한 단어를 구성할 때 만 선택됨
- 속성자[attr|='value'] { } : 언어 속성 선택자
. 주어진 문자열 그대로 포함 또는, 하이픈(-) 붙은 접두어로써 포함될 때 선택됨
- 속성자[attr^='value'] { } : 시작 일치 속성 선택자
- 속성자[attr$='value'] { } : 끝 일치 속성 선택자
- 속성자[attr*='value'] { } : 부분 일치 속성 선택자
- [attr] { } : 속성 attr를 갖는 모든 요소들을 선택하는 선택자
ㅇ multiple selector (다중 속성 선택자)
- 속성자[ ][ ] : 여러 개의 속성 선택자를 함께 결합하여 사용
※ 우선순위
- id 선택자 > 가상 선택자 > 속성 선택자 > class 선택자 > 요소 선택자 (특정요소 > 모든 요소)
3. 그룹 선택자 (group selector)
ㅇ 여러 요소들을 그룹핑 선택
- OR 선택자 : 例) a, hr, div { }
- AND 선택자 : 例) a#id { }
4. 결합 선택자 (combinator selector)
ㅇ descendant selector (하위 선택자) : (빈칸)
- 특정 요소의 하위에 나오는 요소들을 모두 지정할 때 사용 (특정요소명 하위요소명)
. (모든 자손) 요소명1 요소명2 => 요소1 하위에 있는 모든 요소2 선택
ㅇ child selector (직계 선택자) : (>)
- 특정 요소의 직계 하위에 나오는 자식 요소를 지정할 때 사용
. (바로 직계) 요소명1 > 요소명2 => 요소1 바로 직속 하위에 있는 요소2 만 선택
ㅇ 요소 결합 선택자 : (+, ~)
- 선택자1 + 선택자2 { } : 이웃 형제 요소 결합 선택자
. 선택자1 직후 일치하는 형제 요소
- 선택자1 ~ 선택자2 { } : 범용 형제 요소 결합 선택자
. 선택자1 뒤 모든 일치하는 형제 요소들
5. 가상 선택자 (pseudo-class selector) ☞ MDN (Mozilla) : 의사 클래스, 의사 요소 참조
ㅇ `: (의사 요소)` 또는 `:: (의사 클래스)` 기호를 사용하여,
- 선택자에 의한 요소 선택 그 이상으로, 더 정밀한 선택 후에,
- 그곳에 다양한 스타일을 입히기(지정하기) 위함
. 주로, 단독으로 사용 않고, 특정 요소 선택자와 함께 사용됨
. (의사 클래스) 주로, 선택자로 선택된 요소가 특정 상황일 때 (:)
. (의사 요소) 주로, 그 일부분을 선택할 때 (::)
ㅇ 링크에 대한 가상 선택자 (의사 클래스)
- a:link : 사용된 적이 없는 링크를 선택할 때
- a:hover : 링크 위에 마우스가 올라갈 때
- a:visited : 이미 방문한 적이 있는 링크일 때
- a:active : 링크를 막 클릭한 순간일 때
ㅇ 포커스(강조) 피드백 효과를 위한 가상 선택자 (마우스 클릭 등에 의해 유발됨) (의사 클래스)
- :focus : 현재 포커스를 갖고 있으면
ㅇ 형제 요소 선택을 위한 가상 선택자 (의사 클래스)
- :first-child : 형제 요소 중 첫번째 요소를 선택
- :last-child : 형제 요소 중 마지막 요소를 선택
- :nth-child(n) : 형제 요소 중 n번째 요소를 선택 (이때, n의 순서는 0부터 시작)
. 例) :nth-child(n+4)) => 4번째 이후의 요소
ㅇ 단락 내 특정 요소의 강조를 위한 가상 선택자 (의사 요소)
- :first-letter : 첫 글자 만 선택
- :first-line : 첫 줄 만 선택
ㅇ 지정된 요소의 앞,뒤에 콘텐츠를 삽입하기 위한 가상 선택자 (주로,콘텐츠 생성용) (의사 요소)
- :after : 지정 요소 내 맨끝에 위치한 공간에 삽입
. 선택한 요소의 맨 마지막 자식으로써 의사 요소(가상 요소)를 하나 생성
. 例) p:after { content:" " url(/icons/globe.gif); }
- :before : 지정 요소 내 맨앞에 위치한 공간에 삽입
. 선택한 요소의 맨 처음 자식으로써 의사 요소(가상 요소)를 하나 생성
. 例) p:before { content:"p 요소 앞에 이곳 문자들이 생성 삽입됨"; ... }
ㅇ 해당 요소를 제외하는 선택자
- :not(요소) : 해당 요소 제외(not)
. 例) :not(:nth-child(3n+3)) => 3의 배수 이외의 요소에 지정 (1,2,5번째 등)