스타일시트가 어디에 위치하느냐에 따라 적용되는 방식과 우선순위가 달라집니다.
스타일시트의 종류와 그 특징을 정리해 드리겠습니다.
1. Browser Style (User Agent Style)
우리가 아무런 CSS를 작성하지 않아도 브라우저가 기본적으로 가지고 있는 스타일입니다.
- 설명: 크롬, 사파리, 엣지 등 각 브라우저는 <h1>은 크게, <a>는 파란색에 밑줄 등 기본 디자인 가이드라인을 가지고 있습니다.
- 특징: 웹 페이지의 가장 기초가 되지만, 브라우저마다 조금씩 다르기 때문에 개발자들은 이를 초기화하는 Reset CSS나 Normalize CSS를 자주 사용합니다.
2. Inline Style (인라인 스타일)
HTML 태그 안에 style 속성을 사용하여 직접 스타일을 입히는 방식입니다.
- 작성법: <div style="color: red;"> ... </div>
- 장점: 특정 요소에만 즉각적으로 스타일을 적용할 때 매우 빠르고 편리합니다.
- 단점: 우선순위가 매우 높아 나중에 수정하기 어렵고, 코드의 가독성을 떨어뜨리며 재사용이 불가능합니다.
3. Internal Style (내부 스타일)
HTML 문서의 <head> 섹션 안에 <style> 태그를 사용하여 작성하는 방식입니다.
- 설명: 보통 해당 HTML 페이지 한 곳에만 적용되는 고유한 스타일이 있을 때 사용합니다.
- 특징: 외부 파일을 불러올 필요가 없어 로딩 속도가 미세하게 빠를 수 있지만, 페이지가 많아지면 관리가 힘들어집니다.
4. External Style (외부 스타일)
별도의 .css 파일을 만들고 HTML 문서에서 <link> 태그로 연결하는 방식입니다.
- 작성법: <link rel="stylesheet" href="style.css">
- 장점: 전 세계 웹 표준이며, 하나의 CSS 파일로 수백 개의 페이지를 관리할 수 있어 유지보수에 가장 유리합니다.
💡 포함과 제외에 관한 보충 설명
일반적으로 CSS에서 **Include(포함)**와 **Exclude(제외)**는 아래와 같은 맥락으로 사용됩니다.
Include Style (스타일 포함)
한 CSS 파일 안에서 다른 CSS 파일을 불러오고 싶을 때 사용하는 @import 규칙이 대표적입니다. 여러 개의 작은 CSS 파일들을 하나의 큰 스타일시트에 포함시켜 구조화할 때 사용합니다.
CSS
/* main.css */
@import url("header.css");
@import url("footer.css");
Exclude Style (스타일 제외)
특정 요소에 적용된 스타일을 제거하거나 예외를 두고 싶을 때 사용하는 기법입니다. 가장 대표적으로는 가상 클래스인 :not() 선택자를 사용해 특정 조건의 요소만 스타일 적용에서 제외할 수 있습니다.
CSS
/* .btn 클래스 중에서 .disabled를 가진 요소만 '제외'하고 스타일 적용 */
.btn:not(.disabled) {
cursor: pointer;
background-color: blue;
}
📋 스타일시트 우선순위 요약
스타일이 충돌할 경우, 아래 순서대로 힘이 강해집니다.
- Browser Style: 가장 약함
- External / Internal Style: 중간 (소스 하단에 있을수록 강함)
- Inline Style: 매우 강함
- !important: 절대적 (우선순위 파괴자)
학습 정리 > * 실무에서는 관리의 편의성을 위해 External Style 방식을 기본으로 사용합니다.
- 아주 특수한 상황(이메일 템플릿 등)이 아니라면 Inline Style은 사용을 지양하는 것이 좋습니다.
스타일시트의 위치와 포함/제외 방식에 대해 정복하셨습니다!
'CSS' 카테고리의 다른 글
| CSS Precedence and Inheritance (0) | 2026.02.18 |
|---|---|
| Types of Selectors (0) | 2026.02.18 |
| CSS (0) | 2026.02.18 |
| CSS Tables property (0) | 2026.02.18 |
| CSS list-style property (0) | 2026.02.18 |