[길벗 학습단] 6장 CSS 필수 속성 다루기 (1)

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;
} /* 변경함 */

4. color (색깔)

5. text-align : 정렬

6. text-decoration(선긋기)

7. letter-spacing (글자 간격 조절), line-height(텍스트 한 줄의 높이)

답글 남기기

이메일 주소는 공개되지 않습니다.