1. CSS 특징 살펴보기
1. 기본 스타일 시트
브라우저에 내장되어 있는 스타일 시트.
2. 적용 우선순위와 개별성
개별성 규칙에 대한 점수가 있음. 점수가 높은 것이 우선 순위가 높음.
인라인 스타일 > 아이디 선택자 > 가상 클래스 선택자 = 클래스 선택자 > 가상 요소 선택자 = 태그 선택자 > 전체 선택자
개별성 규칙 점수 계산 사이트 : https://specificity.keegan.st
선택자를 최대한 자세하게 적을 수록 점수가 더 높다고 생각하자.
3. 상속
부모 요소에 적용된 스타일이 자식 요소가 그대로 물려받는 것. (하지만 안되는 속성도 있음.)
https://www.w3.org/TR/CSS21/propidx
4. 단위
1) 절대 단위
px 단위
2) 상태 단위
% : 해당 속성의 상위 요소 속성값에 대한 상대적 크기
em : 부모 요소의 텍스트 크기에 상대적인 크기
.parent {
font-size: 16px; }
.child {
font-size : 2em; } /* 실제론 32px */
.child-to-child {
font-size : 2em; } /* 실제론 64px */rem : html 태그의 텍스트 크기(16px)에 상대적인 크기
5. 색상 표기법
키워드 표기법 : white, red, blue 등으로 쓰는 것
RGB 색상 표기법 : rgb(255, 0, 0);
HEX 표기법 : #RRGGBB
2. 텍스트 속성으로 텍스트 꾸미기
1. font-family
글꼴명을 적으면 됨. 마지막엔 가장 유사한 형태의 글꼴 유형을 지정해야 한다.
예) serif. sans-serif, monospace, fantasy, cursive
2. font-size(크기), font-weight(굵기), font-style(스타일)
3. font-variant
영문 텍스트를 크기가 작은 대문자로 변경할 때
p {
font-variant : normal
} /* 변경 안함 */
p {
font-variant : small-caps;
} /* 변경함 */