Chapter 1. CSS 개요 및 선택자

스타일 시트	의미	예시
내부	- <style></style> 내부에 스타일 정보를 저장하는 방법 - 내부에 스타일 시트를 정의 해놓고 사용   (해당 페이지에 적용)	<style> p{text-align:center; } </style>
외부	- 외부 css 파일을 읽어와서 스타일을 적용하는 방법  (<link> 태그 이용) -다른 페이지에서도 재사용이 가능	<link href="css파일경로" rel="stylesheet" type="text/css"/>
인라인	- 태그 내부에 스타일 정보를 지정하는 방법 - 해당 태그에만 적용 됨	<p style="스타일 정보;">안녕 </p>

선택자

---

종류	작성 방법
전체 선택자	*
태그 선택자	태그(h1,p,li 등) 여러개 태그 선택시에는 ','(쉼표)로 구별하여 작성
아이디 선택자	#아이디명
클래스 선택자	.클래스명
후손 선택자	선택자 선택자
자손 선택자	선택자 > 선택자
속성 선택자	선택자[속성] / 선택자[속성 = 값] 선택자[속성 ~= 값] / 선택자[속성 |= 값] / 선택자[속성 ^= 값] 선택자[속성 $= 값] / 선택자[속성 *= 값]
동위 선택자	선택자1 + 선택자2 (동위선택자2의 바로 뒤에 있는 한개의 선택자만 선택) 선택자1 ~ 선택자2 (동위선택자1의 뒤에 있는 선택자 2 모두 선택)
구조 선택자	선택자: first-child / 선택자: last-child 선택자: nth-child(수열) / 선택자: nth-last-child(수열) 선택자: first-of-type / 선택자: last-of-type 선택자: nth-of-type(수열) / 선택자: nth-last-of-type(수열)
반응 선택자	선택자 : active / 선택자 : hover
상태 선택자	선택자 또는 input : checked (체크 상태의 input 태그 선택 (체크가 되었다면)) 선택자 또는 input : focus (초점이 맞추어진 input 태그 선택 (해당 input에 초점이 맞춰졌다면))
속성 선택자	:enabled / :disabled
링크 선택자	:link (방문전 링크 선택자) / :visited (방문후 링크 선택자)
문자 선택자	::first-letter / ::first-line ::after / ::before / ::selection (드래그한 글자 선택)
부정 선택자	선택자:not(선택자) (선택자를 제외한 나머지)

• 추가내용

문자열 속성 선택자	의미
선택자[속성 ~= 값]	속성값이 특정 값을 단어로 포함하는 태그 선택 (띄어쓰기 앞의 내용 값이 동일 해야 함)
선택자[속성 |= 값]	속성값이 특정 값을 단어로 포함하는 태그 선택 "-"으로 구분 (- 앞의 내용 값이 동일 해야 함)
선택자[속성 ^= 값]	속성값이 특정 값으로 시작하는 태그 선택
선택자[속성 $= 값]	속성값이 특정 값으로 끝나는 태그 선택
선택자[속성 *= 값]	속성값이 특정 값으로 포함하는 태그 선택

• 적용 방법에 따른 우선 순위

  • !important > 인라인 스타일 > id 스타일 > class 스타일 > 스타일 태그

• 동일한 선택자인 경우

  • 나중에 작성된 스타일 최종 적용 됨(코드 순서)