CSS 기본 문법

내부 스타일시트

* CSS를 HTML 문서 안에 <style> 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태
* 스타일이 기술된 페이지에만 적용

외부 스타일시트

* 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있음(.css 확장자를 가진 파일)
* HTML에서는 <link> 태그를 사용하여 .css 확장자 파일을 연결
* 외부 스타일시트는 그 스타일을 선언한 모든 HTML 페이지에 적용

@import

* CSS 안으로 다른 CSS 파일을 불러들일 경우 사용
* CSS의 맨 윗줄에 기술

인라인 스타일(inline style)

* 태그에 직접 CSS를 정의해주는 기법으로, 해당 요소에 style="~"로 기술
* 내부스타일이나 외부스타일에서 기술된 속성보다 우선 적용됨

선택자(selector)

type 선택자

* html 문서의 태그 이름을 선택자로 사용할 수 있음
 ex) p { color: blue; }

id 선택자

* CSS에서는 id 선택자 앞에 '#'을 붙여야 함
* id명이나 class명은 숫자로 시작할 수 없으며, 주로 영문자로 시작(Naming Rule:명명규칙)

class 선택자

* CSS에서는 class 선택자 앞에 '.'을 붙여야 함

전체 선택자

* 페이지의 모든 요소를 가리키는 선택자로서 '*'로 표시
* id나 class명이 부여된것과 상관없이 페이지 내의 모든 요소에 속성 부여

하위 선택자

* 요소 내부에 있는 모든 해당 요소를 가리키녀, 선택자 사이를 공백으로 분리
 ex) .abox p { color: blue; }
     : abox 클래스 내부에 있는 모든 p 태그들의 문자를 파란색으로 표시하도록 부여

자식 선택자

* 요소 내부에 있는 해당 요소를 가리키지만, 하위 요소의 하위 요소는 가리키지 않으며 선택자 사이를 '>'로 분리
 ex) .abox > p { color: blue; }
     : abox 클래스 내부에 있는 요소들 중 또 다른 하위 요소 안에 있는 p 태그들을 제외한 나머지 p 태그들의 문자를 파란색으로 표시하도록 부여

인접 선택자

* 현재 요소의 바로 뒤에 나오는 요소만을 가리키는 선택자로, 선택자 사이를 '+'로 분리함
 ex) h1 + p { color: blue; }
     : 전체 p 요소 중 h1 요소의 바로 다음에 나오는 p 태그들의 문자만을 파란색으로 부여

형제 선택자

* 현재 요소와 같은 계층에 있는 요소만을 선택할 수 있으며 '~'로 구분
 ex) h1 ~ p { color: blue; }
     : h1과 같은 계층에 있는 p 태그들만 파란색으로 나타나도록 부여

그룹 선택자

* 여러 선택자들을 ','로 구분하여 함께 묶어 속성을 부여
 ex) td,th {}

속성 선택자

* html 요소의 속성 유무 또는 속성값을 [] 안에 넣어 선택자로 사용할 수 있음

속성 값	설명
h1[class]	class명을 가진 h1 요소
img[alt]	alt 속성을 가진 img 요소
p[class="abc"]	class명이 유일하게 'abc'인 p 요소
p[class~="abc"]	class명이 유일하게 'abc'이거나 여러 개의 class명 중 하나가 'abc'인 p 요소
p[class	="abc"]
p[class^="abc"]	class명이 철자 'abc'로 시작하는 p 요소
p[class$="abc"]	class명이 철자 'abc'로 끝나는 p 요소
p[class*="abc"]	class명에 철자 'abc'가 포함되어 있는 p 요소
a[href^="mailto"]	href 속성값이 'mailto'로 시작하는 a 요소

가상클래스 선택자

* 링크가 걸린 문자에 스타일을 부여
* 아래의 가상클래스를 2개 이상 사용할 경우 아래의 순서대로 기술해야 함

속성 값	설명
a:link	링크가 걸린 문자에 속성을 부여하는 선택자
a:visited	링크를 클릭하여 해당 페이지에 갔다가 돌아온 경우의 속성을 부여하는 선택자
a:hover	링크가 걸린 문자에 마우스가 닿았을 경우 속성을 부여하는 선택자
a:active	링크 걸린 글자가 활성화되었을 경우 속성을 부여하는 선택자(클릭했다가 돌아왔거나 클릭하려다 만 경우)
a:focus	링크 걸린 글자에 포커스가 생길 경우의 속성을 부여하는 선택자(키보드의 tab 키 등으로 포커스가 나타날 경우 / 마우스를 가져가면 색이 바뀌는 경우)

가상요소 선택자

* 요소에 id명이나 class명을 부여하지 않고도 위치를 찾아서 선택할 수 있는 선택자

속성 값	설명
:first-letter	요소의 첫 글자
:first-line	요소의 첫 줄
:first-child	같은 요소 중 첫 번째 요소
:last-child	같은 요소 중 마지막 요소
:nth-child(n)	같은 요소 중 n번째 요소
:before	요소 안 맨 앞에 배치될 요소 (마크업에는 없는 가상 요소)
:after	요소 안 맨 뒤에 배치될 요소 (마크업에는 없는 가상 요소)

종속 선택자

* type 선택자와 id 선택자, class 선택자가 결합된 형태
* type와 class를 합치면 11이 됨
* 최우선으로 CSS를 적용해야 할 경우에는 선택자에 속성을 부여하는 마지막에 "!important" 부여
* type < class,가상 < id < inline style < important

선택자의 우선순위

선택자	설명
전체 선택자(*)	0
type 선택자 (p, h1, ul, ...)	1
가상 선택자 (:first-child, ...)	10
class 선택자 (.abc, ...)	10
id 선택자 (#abc, ...)	100

선택자	우선순위 계산
type	1
class	10
type + class	1 + 10 = 11
id	100 + 1 = 101
id + type	100 + 10 = 110
id + type + class	100 + 11 = 111

문자 관련 스타일

font-size

속성 값	설명
px	해상도에 따라 상대적으로 달라지는 기본 단위
%	부모 요소의 글자 크기를 100% 기분으로 계산/특별한 설정이 없으면 16px이 100%가 됨
em	부모 요소의 글자 크기를 100% 기준으로 계산한 1/100 단위/특별한 설정이 없으면 16px이 1em이 됨
rem	em과 비슷하지만 부모 요소가 아닌 최상위 요소의 크기를 100% 기준으로 계산
vw, vh	1/100 단위

px : font-size: 12px;
% : font-size: 150%;
em : font-size: 1.5em;
rem : font-size: 1.5rem;