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