1. CSS의 역할과 선택자(Selector)
- 선택자(Selector): 어떤 HTML 요소에 스타일을 줄 것인지 대상을 지정함.
- 태그 선택자:
h1, p, a 등 특정 태그 전체에 동일한 스타일을 적용함.
- 클래스(Class) 선택자:
.green--text 처럼 앞에 마침표(.)를 붙여 정의함. 여러 요소에 중복으로 재사용할 수 있어 가장 널리 쓰임.
- 아이디(Id) 선택자:
#dark 처럼 앞에 샵(#)을 붙여 정의함. 문서 내에서 고유한 단 하나의 요소에만 적용할 때 사용함.
2. CSS를 적용하는 3가지 방법
- 인라인 스타일 (Inline Style)
- HTML 태그 안에 직접
style="color: blue;" 형태로 작성함.
- 가장 직관적이고 우선순위가 높지만, HTML과 CSS가 섞여 코드가 지저분해지고 유지보수가 힘듦.
- 내부 스타일 시트 (Internal Style)
- HTML 문서의
<head> 태그 안에 <style> 태그를 열고 그 안에 CSS 코드를 작성함.
- 해당 HTML 문서 안에서만 스타일이 적용되므로, 문서 단위의 고유한 스타일을 줄 때 사용함.
- 외부 스타일 시트 (External Style)
- 별도의 확장자를 가진 파일(예:
style.css)을 새로 만들고, HTML <head> 영역에서 <link rel="stylesheet" href="style.css" />로 불러와 연결함.
3. 우선순위와 캐스케이딩(Cascading)
- CSS의 'C'는 폭포수처럼 위에서 아래로 흐른다는 의미임. 똑같은 요소에 여러 스타일이 겹치면 더 아래에 작성된 코드나 더 구체적인 선택자가 이김.
- 우선순위 규칙:
!important > 인라인 스타일 > Id 선택자(#) > Class 선택자(.) > 태그 선택자.
{ color: yellow !important; }를 통해 다른 모든 규칙을 무시하고 최우선으로 강제 적용되는 강력한 속성을 확인