CSS를 적용하는 대표적인 3가지 방법

- 1. 인라인 스타일 : 태그(p,span,div 등) 내에 직접적으로 style속성 사용 <div style="color:red;">인라인 스타일</div> - 2. 내부 스타일 시트 : HTML문서 내에 style태그 내에서 사용 <style> div { color:red; } </style> - 3. 외부 스타일 시트 : HTML문서에 link태그를 사용하여 외부의 .css 파일의 내용을 사용 <link rel="stylesheet" href="파일명.css">

CSS 선택자

CSS 선택자 적용 예시
#id1
.class1
.class2.class3
#id0.class0
CSS 선택자 가중치
상위 선택자의 가중치 상속: 0
요소 선택자 (태그): 1
클래스class(.), 속성[attr=value], 의사(:): 10
아이디id(#): 100
인라인 스타일(태그에 직접 적용): 1000
!important: 1000000
복합적일 경우, 점수 합산
동일한 점수인 경우, 마지막으로 작성된 속성 값 적용
CSS 선택자 종류
전체선택자
*
태그선택자
태그명[html, head, body, div, p 등 모든태그명]
아이디선택자
#아이디명
클래스선택자
.클래스명
복합선택자
div.parant > div {} = [자식선택자] div.parant의 자식(아래로 1촌) 중에 div
자식1
손주11
손주12
손주13
자식2
손주21
손주22
손주23
자식3
손주31
손주32
손주33
자식4
손주41
손주42
손주43
body h1 {} = [후손(하위)선택자] body태그 후손(아래로 n촌)의 h1
자식1
손주11
손주12
손주13
자식2
손주21
손주22
손주23
자식3
손주31
손주32
손주33
자식4
손주41
손주42
손주43
div.child2 + div{} = [인접형제선택자] div.child2 바로 뒤의 div
자식1
손주11
손주12
손주13
자식2
손주21
손주22
손주23
자식3
손주31
손주32
손주33
자식4
손주41
손주42
손주43
div.child2 ~ div{} = [일반형제선택자] div.child2 뒤의 모든 div
자식1
손주11
손주12
손주13
자식2
손주21
손주22
손주23
자식3
손주31
손주32
손주33
자식4
손주41
손주42
손주43
속성선택자
[속성명] = 해당 속성이 있는 태그 ex. [class]
[속성명=속성값] = 해당 속성에서 해당 속성값과 일치되는 태그 ex. [class="class-name"]
[속성명^=속성값] = 해당 속성에서 해당 속성값으로 시작하는 태그ex. [class^="cl"]
[속성명|=속성값] = 해당 속성에서 '-'로 구분된 각각의 단어 중 어느하나라도 해당 속성값으로 시작하는 태그 ex. [class|="cl"] 또는 [class|="na"]
[속성명~=속성값] = 해당 속성에서 해당 속성값을 포함하는 태그(단, 공백까지 일치해야함) ex. [class~="ass-na"]
[속성명*=속성값] = 해당 속성에서 해당 속성값을 포함하는 태그 ex. [class*="ass-na"]
[속성명$=속성값] = 해당 속성에서 해당 속성값으로 끝나는 태그 ex. [class$="me"]
가상선택자
링크 가상 선택자 & 유저 유동 가상 선택자
:link = [a태그] 방문 이전 적용
:visited = [a태그] 방문 이후 적용
:active = 마우스 커서로 해당 요소 위를 클릭시/키보드로 Enter 등의 키를 통해 사전에 요소선택상태에서 해당 요소를 누를시/터치스크린으로 터치시 적용
:hover = 마우스 커서를 해당 요소 위로 올렸을 때 적용
:focus = 키보드에서 Tab 등을 통해 해당 요소로 초점을 변경했을 때 적용
구조적 가상 선택자
::root = 전체 문서에 적용되는 스타일 및 전역변수를 정의
자식(child) 관련
::first-child - 자식 중 첫번째 자식
::last-child - 자식 중 마지막 자식
::only-child - 자식 중 유일한 자식인 경우
::nth-child(n) - 자식 중 앞에서 n번째
::nth-last-child(n) - 자식 중 뒤에서 n번째
타입(type) 관련
E::first-of-type - E요소 중 첫번째
E::last-of-type - E요소 중 마지막
E::only-of-type - 동일한 E요소를 가진 형제없이 외동인 경우
E::nth-of-type(n) - E요소 중 앞에서 n번째
E::nth-last-of-type(n) - E요소 중 뒤에서 n번째
가상 엘리먼트 선택자
E::before - E요소의 내용 시작지점
E::after - E요소의 내용 끝지점
E::first-line - E요소의 첫번째 줄
E::first-letter - E요소의 첫번째 문자
언어 가상 선택자
E::lang(ko) - E요소의 언어가 ko인 경우
부정 가상 선택자
E::not(S) - E요소에서 S가 아닌 것
UI요소 상태 가상 선택자
E::enabled - 사용 가능한 form control E(input, textarea, select, button) 선택
E::disabled - 사용 불가능한 form control E(input, textarea, select, button) 선택
E::checked - 선택된 form control(input checked="checked")를 선택
마커 가상 선택자
::marker - li 등의 앞의 마커