CSS:선택자

틀:CSS. css에 대한 문서들을 담아두기 위한 틀.

1. CSS:개요
2. CSS:선택자
3. CSS:크기척도
4. CSS:텍스트
5. CSS:아이콘
6. CSS:속성
   1. CSS:색
   2. CSS:위치와 모양
   3. CSS:Flexbox
   4. CSS:기타속성
7. CSS:변수
8. CSS:진한쌤의 의문

개요

어디에 스타일을 적용할 것인지 그 위치를 지정해주어야 한다. 이를 위한 도구 선택자.

선택자

의도	설명	선택자 형태
범용선택자	모든 곳에 적용함을 알려주는 선택자.	*
타입선택자	특정 태그에 적용되는 내용을 지정하는 선택자.	태그명
class선택자	클래스에 대해 적용함을 알려주는 선택자. 여러 클래스를 적용할 수도 있다. <class="클래스1 클래스2"...> 형식으로 띄어쓰기를 통해 다양한 클래스를 적용할 수 있다.	.클래스명
id선택자	id 속성에 따라 적용하는 영역을 찾는다. 일반적으로 id는 한번만 사용되기에, 유일하게 적용할 부분에서 사용한다.	#아이디

실사용

의도	설명	선택자 형태
하위요소 선택	선택자 사이에 띄어쓰기로 구분해준다. 다음 예시는 특정 클래스 안에 특정아이디를 가진 요소들을 선택하는 방법이다.	.클래스명 #아이디
동시선택	하위의 요소를 선택하기 위해선 선택자들끼리 띄어쓰기로 구분하는데, 선택자들을 붙여 쓰면 동시에 갖고 있어야 함을 의미한다.	.클래스명.클래스명

가상선택자

의도	설명	선택자 형태
클래스 안의 태그를 선택하고 싶은 경우	'>' 를 이용하여 태그를 지정한다.	.클래스명 > 태그명{....}
마우스가 올려진 경우에 적용하고 싶을 때	':' 를 이용하여 지정한다. 해당 선택자 뒤에 ':hover'를 붙여 적용.	.클래스명 > 태그명:hover{각종 속성}