CSS (1)
CSS 선택자
- html 내부의 특정 요소를 선택하는 방법이며, 선택한 태그에 원하는 스타일, 기능을 적용할 수 있다.
ex) h1 {color: red;} > h1: 선택자, color: 스타일 속성, red: 스타일 값
전체 선택자
- *, html 문서 내부의 모든 태그를 선택하며, html태그와 body태그에도 적용된다.
태그 선택자
- html 문서 내부의 특정한 태그를 선택할 때 사용하며, 여러개의 선택자를 한번에 선택할 때는 쉼표를 사용한다.
ex) h1, p, div 등
아이디 선택자
- #, 특정한 하나의 태그를 선택할 때 사용되며, 주로 문서의 레이아웃과 관련된 스타일 등에 사용한다.
클래스 선택자
- . , 가장 많이 사용하는 선택자이며, 공백으로 여러개의 클래스를 사용할 수 있다.
중복이 가능하며 다른 태그에 사용될 때는 태그 선택자와 함께 사용한다.
ex) <h1 class="item header">
속성 선택자
- 특정 속성을 가진 html 태그를 선택하며 다른 선택자와 함께 사용한다.
추가적으로 기타 속성 선택자도 있다. 종류로는 ^="a" (속성값이 a로 시작하는 요소 선택), $="a"(속성값이 a로
끝나는 요소 선택), *="a"(속성값에 a가 포함되는 요소 선택)가 있다.
ex) input[type=text] {background: red;}
후손 선택자와 자손 선택자
- 특정 태그의 자손 또는 후손을 선택한다.
후손 선택자는 특정한 태그 아래에 있는 후손을 선택하며, 선택자A 선택자B의 형식으로 사용한다.
자손 선택자는 특정한 태그 아래에 있는 자손을 선택하며, 선택자A > 선택자B의 형식으로 사용한다.
동위 선택자
- 같은 부모(parent) 요소를 가지고 있는 요소들을 의미하며, 이러한 동위 관계에 있는 요소들을 형제(sibling)
요소라고 한다.
일반 동위 선택자: 해당 요소와 동위 관계이며, 해당 요소보다 뒤에 존재하는 특정 타입의 요소를 모두 선택한다.
형식은 선택자A ~ 선택자B이다.
인접 동위 선택자: 해당 요소와 동위 관계이며, 해당 요소의 바로 뒤에 존재하는 특정 타입의 요소를 선택한다.
