CSS 기본 사용법
Inline 방식 : 태그 안에 style 정의
<p style="color: red; font-size: 20px;">This is a red paragraph.</p>장점
- 간편함: 특정 요소에만 스타일을 적용해야 할 때 빠르게 적용할 수 있음
- 직관적: 코드만으로 해당 요소의 스타일을 쉽게 파악할 수 있음
단점
- 유지보수 어려움: 여러 요소에 동일한 스타일을 적용할 때, 일일이 수정해야 하므로 관리가 힘듦
- 재사용성 낮음: 동일한 스타일을 여러 곳에 적용할 수 없음
- 가독성 저하: HTML과 CSS 코드가 섞여 있어 문서의 가독성이 떨어짐
Internal 방식 : style 태그로 지정
<head>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p>This is a blue paragraph.</p>
</body>장점
- 문서 전반에 걸쳐 스타일 적용: 한 문서 내의 여러 요소에 동일한 스타일을 쉽게 적용할 수 있음
- 별도의 파일 불필요: 외부 CSS 파일을 불러올 필요가 없으므로 간단한 프로젝트에서 유용
단점
- 재사용성 제한: 한 문서 내에서만 스타일이 적용되므로, 여러 HTML 문서에 동일한 스타일을 적용 시 비효율
- 문서 크기 증가: 많은 CSS 코드가 문서에 포함되면, 문서의 크기가 커짐
- 가독성 저하: HTML과 CSS가 같은 파일에 포함되어 있어 코드가 복잡
External 방식 : 외부 css파일로 만들기
제일 사용하기에 편하고 장점이 많은 방식
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>This is a paragraph styled by external CSS.</p>
</body>p {
color: green;
font-size: 16px;
}
장점
- 재사용성 높음: 여러 HTML 문서에서 동일한 CSS 파일을 사용 가능
- 유지보수 용이: CSS를 한 곳에서 관리하므로, 스타일 변경 시 모든 문서에 적용
- 가독성 향상: HTML과 CSS가 분리되어 코드가 명확
- 성능 향상: CSS 파일이 한 번만 로드되므로, 여러 페이지에서 캐시를 활용할 수 있어 성능 향상
단점
- 외부 파일 의존성: CSS 파일이 로드되지 않으면 스타일이 적용되지 않으며, 파일 경로를 잘못 설정하면 문제가 발생
CSS Cascading
여러 스타일 규칙이 동일한 요소에 적용될 때, 브라우저가 어떤 규칙을 최종적으로 적용할지 결정하는 메커니즘
이 과정은 스타일의 우선순위를 따져 가장 적합한 스타일을 선택하는 방식
1. 선언 방식에 따른 우선순위 (Cascade Order)
- Inline 스타일 (style 속성): 가장 높은 우선순위
- Internal 및 External 스타일: Inline 스타일 다음으로 높은 우선순위
2. Specificity(구체성)
CSS에서 구체성은 어떤 스타일 규칙이 다른 규칙보다 우선하는지를 결정하는 중요한 요소인데, 구체성은 선택자의 유형에 따라 계산됨
- ID 선택자 (#id)는 가장 높은 구체성
- 클래스 선택자 (.class), 속성 선택자 ([attr]), 가상 클래스 (:hover 등)는 중간 수준의 구체성
- 태그 선택자 (element)와 가상 요소 (::before, ::after)는 가장 낮은 구체성
#id {
color: red; /* 구체성: 100 */
}
.class {
color: blue; /* 구체성: 10 */
}
div {
color: green; /* 구체성: 1 */
}3. 선언 순서 (Source Order)
구체성과 우선순위가 동일한 경우, 선언된 순서에 따라 스타일이 결정
나중에 선언된 스타일이 이전에 선언된 스타일을 덮어씀
4. 중요 스타일 (!important)
어떤 스타일을 무조건 우선 적용하고 싶을 때 !important를 사용할 수 있음
이는 가장 높은 우선순위를 가지며, 구체성과 상관없이 해당 스타일을 적용
하지만 !important는 코드의 유지보수성을 떨어뜨릴 수 있으므로, 꼭 필요할 때만 사용하는 것이 좋음
결론
- 출처에 따른 우선순위 (Inline > Internal/External > 브라우저 기본)
- 구체성 (ID > 클래스 > 태그)
- 선언된 순서 (나중에 선언된 것이 우선)
- !important 규칙 (가장 우선)
'웹' 카테고리의 다른 글
| Express와 Nest (0) | 2024.08.27 |
|---|---|
| DOM (0) | 2024.08.21 |
| CSS Selector (0) | 2024.08.21 |
| HTML 태그 및 속성 (0) | 2024.08.19 |
| 웹 브라우저 DOM 파서 (0) | 2024.07.18 |
