6. CSS 특성

1. 기본 스타일 시트

-기본 스타일 시트 :  웹 브라우저에 기본으로 내장되어 있는 스타일 양식, 브라우저마다 조금씩 다름

2. 적용 우선순위와 개별성

-CSS는 단계적으로 적용 = 같은 태그에 여러 속성이 들어가도 마지막에 영향을 주는 하나의 속성만 생존

-개별성 규칙(specificity) : 어떤 스타일이 마지막에 영향을 주는지 결정

• 전체 상속자 : 0점
• 태그 선택자 : 1점
• 가상 요소 선택자 : 1점
• 클래스 선택자 : 10점
• 가상 클래스 선택자 : 10점
• 아이디 선택자 : 100점
• 인라인 스타일 : 1000점
• !important : 10000점                    ※선택자가 여러개 사용되면 합산하면 됨

선택자 조합을 자세히 적을수록 우선순위 높아진다고 생각하면 편함

3. 상속

-상속 :  부모 요소의 스타일을 자식 요소가 물려받는 것, 그렇다고 모든 속성이 상속되지는 않음

4. 단위 

1) 절대 단위

-px :  우리가 아는 그 픽셀로 크기단위의 기본이다.

2) 상대 단위

-% :  부모 요소의 속성값에 따라 상대적인 크기를 가짐 ex)font-size에 80%를 입력했으면 부모요소 font-size의 80프로를 가짐

-em : 부모 요소의 텍스트 크기(font-size)를 기준으로 상대적인 크기를 가짐 ex) 2em이면 부모의 2배

-rem : html 태그의 텍스트 크기에 대한 상대적인 값, 현대 웹 브라우저는 모두 html 텍스트 크기가 16px 이라서 1rem=16px임

-vw : 뷰포트(코드가 보이는 대상, 여기서는 창의 너비) 너비를 기준으로 상대적인 크기를 가짐 1vw=뷰포트 크기의 1/100크기

-vh : 뷰포트 높이를 기준으로 상대적인 크기, 1vh는 뷰포트 높이의 1/100크기

5. 색상 표기법

-키워드 표기법 : 영문명을 속성값으로 이용

-RGB 색상 표기법 : r g b로 색 표현, alpha(투명도)까지 사용가능

/* 형식 */
rgb(red,green,blue)
rgba(red,green,blue,alpha)

-HEX 표기법 : RGB 값을 16진수로 변환한 표기법, 실무에서 가장 많이 사용

/* 형식 */
#RRGGBB

• 00이 가장 낮고 ff가 가장 높은 값
• 16진수가 같으면 줄이기 가능 ex) #ff0000 = #f00 , #335533 = #353

- HLS 표기법 : hue, saturation, lightness로 색상 표기

/* 형식 */
hsl(hue,sturation,lightness)

• Hue : 색의 정도 0이 빨강 120이 초록 240이 파랑
• Saturation: 0%일수록 흑백에 가까워지고 100%면 풀컬러
• Lightness : 0%는 검정 50%는 중립 100%면 휜색