적용 우선 순위
| 우선 순위 | 설명 | 점수 |
|---|---|---|
| 인라인 스타일 | HTML 요소의 style 속성에 적용된 스타일 | 1000 |
| ID 선택자 | #id 형태로 사용된 선택자 | 100 |
| 클래스 선택자, 속성 선택자, 가상 클래스 | .class, [attribute], :hover 등 | 10 |
| 태그 선택자, 가상 요소 | div, p, ::before 등 | 1 |
| 일반 스타일, 전체 선택자 | 초기 스타일 시트의 규칙 | 0 |
속성 뒤에 !important 를 사용하면 가장 우선도가 높은 속성입니다. (사용 권장하지 않음)
상속
CSS 상속은 부모 요소의 스타일이 자식 요소에게 자동으로 적용되는 기능을 말합니다. 일반적으로 텍스트 관련 속성(예: color, font-family, line-height, text-align)은 상속됩니다. 반면, 박스 모델 속성(예: margin, padding, border)은 상속되지 않습니다.
단위
CSS에서 단위는 길이, 크기 등을 정의하는 데 사용됩니다. 크게 절대 단위와 상대 단위로 나눌 수 있습니다.
절대 단위
절대 단위는 화면 크기나 해상도와 관계없이 고정된 크기를 나타냅니다.
상대 단위
| 단위 | 설명 |
|---|---|
| em | 현재 요소의 폰트 크기를 기준으로 함 |
| rem | 루트 요소(html)의 폰트 크기를 기준으로 함 |
| % | 부모 요소의 크기를 기준으로 함 |
| vw | 뷰포트 너비의 1% |
| vh | 뷰포트 높이의 1% |
색상 표기법
CSS에서 주로 사용되는 색상 표기법에는 키워드, RGB, RGBA, HEX가 있습니다.
색상 키워드
CSS에서 미리 정의된 색상 이름을 사용하여 색상을 지정하는 방법입니다. 예를 들어, red, blue, green 등이 있습니다.
p {
color: red; /* 빨간색 */
}RGB (Red, Green, Blue)
RGB는 빨강, 초록, 파랑의 조합으로 색상을 정의하는 방법입니다. 각 색상의 강도를 0에서 255 사이의 숫자로 지정합니다.
p {
color: rgb(255, 0, 0); /* 빨간색 */
}RGBA (Red, Green, Blue, Alpha)
RGBA는 RGB에 알파(투명도) 값을 추가한 것으로, 마지막 값은 0(완전 투명)에서 1(불투명) 사이의 숫자로 지정합니다.
p {
color: rgba(255, 0, 0, 0.5); /* 반투명 빨간색 */
}HEX (16진수)
HEX는 16진수 색상 코드로, #RRGGBB 형식으로 색상을 정의합니다. RR, GG, BB는 각각 빨강, 초록, 파랑의 16진수 값을 나타냅니다.
p {
color: #FF0000; /* 빨간색 */
}
