
| 종류 | 설명 |
|---|---|
| 브라우저 기본 스타일 | 웹 브라우저에 웹 문서를 표시할 때 브라우저에서 기본으로 사용하는 스타일 |
| 인라인 스타일 | style속성을 사용해 필요한 요소에 스타일을 직접 지정 |
| 내부 스타일 시트 | 문서 앞부분에 문서에서 사용하는 스타일을 모아서 함깨 정의하고 관리 |
| 외부 스타일 시트 | 문서에서 사용하는 스타일을 모아서 따로 파일로 저장한 후 연결해서 사용 |
| 종류 | 설명 | 작성예시 |
|---|---|---|
| 전체 선택자 | 문서의 모든 요소에 스타일을 적용 | * { margin:0; } |
| 타입 선택자 | 특정 태그를 사용한 모든 요소에서 스타일을 적용 | p { font-style: italic; } |
| 클래스 선택자 | 특정 부분만 선택해서 문서 안에 여러 번 적용. 마침표(.)를 붙여 사용 | .bg { background-color:#ddd; } |
| id 선택자 | 특정 부분만 선택해서 문서 안에서 한 번만 적용. #을 붙여 사용 | #container { width: 500px; } |
| 그룹 선택자 | 여러 요소에 같은 스타일을 적용할 때 사용 | h1, h2 { text-align: center;} |
①사용자 스타일 -> ②제작자 스타일 -> ③브라우저 기본 스타일
①!important -> ②인라인 스타일 -> ③id스타일 -> ④클래스 스타일 -> ⑤타입 스타일
나중에 작성한 스타일이 먼저 작성한 스타일을 덮어씀