반응형
Web Development · CSS
HTML 외부 CSS 연결 —
link · 내부 style · 우선순위 정리
3가지 CSS 적용 방법 + 충돌 시 누가 이기는가
시작 오늘 분석할 코드
같은 head에 내부 style 태그와 외부 CSS link가 함께 있는 코드. 두 곳에 같은 셀렉터가 있다면 누구의 스타일이 적용될까?
<head> <style> section { width: 500px; padding: 15px; border: 5px solid gray; } </style> <link rel="stylesheet" href="css/style.css"> </head>
1 CSS 적용 3가지 방법
인라인 스타일
태그의 style 속성
한 요소만
가장 강함
<p style="...">한 요소만
가장 강함
내부 CSS
head 안 <style>
한 페이지 전체
중간 강도
한 페이지 전체
중간 강도
외부 CSS
.css 파일 + link
여러 페이지 공유
실무 표준
여러 페이지 공유
실무 표준
2 <link> 태그의 속성
<link rel="stylesheet" href="css/style.css"> │ │ │ │ │ └─ 가져올 파일 경로 │ └─ relation = stylesheet └─ relation 속성
| 속성 | 역할 |
|---|---|
rel |
관계 — stylesheet (스타일시트), icon (파비콘) 등 |
href |
파일 경로 (상대·절대·외부 URL) |
type |
MIME 타입 (text/css) — HTML5에선 생략 가능 |
media |
특정 화면에서만 적용 (print, screen, max-width) |
3 외부 CSS의 장점
※ 실무 외부 CSS 권장 이유
- 여러 페이지에서 공유 — 한 파일 = 사이트 전체 디자인
- 유지보수 — 한 곳만 수정하면 모든 페이지 반영
- 브라우저 캐싱 — 한 번 다운로드 후 재사용
- HTML과 CSS 분리 — 구조와 디자인 관심사 분리
- 버전 관리 — 디자인 변경 이력 별도 추적
4 우선순위 — 누가 이기는가?
같은 셀렉터에 다른 값이 있으면 4단계 규칙으로 결정된다.
| 우선순위 | 출처 | 점수 (specificity) |
|---|---|---|
| 1 (최강) | !important | 모든 점수 무력화 |
| 2 | 인라인 style | 1000 |
| 3 | id 셀렉터 | 100 |
| 4 | class · 속성 · 가상클래스 | 10 |
| 5 | 태그 셀렉터 | 1 |
| 6 (최약) | * 전체 셀렉터 | 0 |
※ 같은 점수면 나중에 작성된 것이 이긴다. 외부 CSS와 내부 style이 모두
section { color: red; }이고 점수가 같다면, head에 늦게 작성된 것이 적용됨.반응형
5 link vs @import — 두 가지 외부 CSS 가져오기
외부 CSS를 가져오는 방법은 <link> 외에도 CSS의 @import가 있다.
/* @import: CSS 파일 안에서 다른 CSS 가져오기 */ @import url("base.css"); @import url("layout.css"); /* 단점: 직렬 로드 (느림) */
※ 모던 웹은 link 태그 권장. @import는 직렬 로드라서 페이지 로딩 속도에 불리.
6 media 속성 — 조건부 CSS
<!-- 인쇄 시에만 적용 --> <link rel="stylesheet" href="print.css" media="print"> <!-- 모바일에만 적용 --> <link rel="stylesheet" href="mobile.css" media="(max-width: 768px)">
7 자주 하는 실수
| 실수 | 증상 | 해결 |
|---|---|---|
| href 경로 오타 | 스타일 적용 안 됨 | F12 콘솔에서 404 확인 |
| rel="stylesheet" 빠뜨림 | 인식 안 됨 | rel 필수 |
| 인라인 style 남발 | 유지보수 지옥 | 외부 CSS + class |
| !important 남발 | 구조 망가짐 | 셀렉터 구체성 조정 |
| link를 body에 둠 | FOUC 발생 (스타일 없이 잠깐 표시) | head에 두기 |
핵심 한 줄 요약
CSS 3가지 방식인라인 / 내부 / 외부
<link>외부 CSS 연결 — head에
우선순위!important > 인라인 > id > class > tag
같은 점수늦게 작성한 것이 이김
실무 표준외부 CSS + class
media 속성조건부 CSS — 인쇄·모바일
@import 비추직렬 로드라서 느림
Tags
#link #외부CSS #내부CSS #인라인스타일 #우선순위 #cascade #HTML #CSS #section #스타일시트 #rel #href #웹개발 #티스토리
▼ 티스토리 태그 입력란 복사용
link, 외부CSS, 내부CSS, 인라인스타일, 우선순위, HTML, CSS, section, 스타일시트, rel, href, 웹개발, 티스토리
반응형
'php' 카테고리의 다른 글
| HTML 실습 — 예약 정보 폼 만들기 완전 정리 (0) | 2026.05.03 |
|---|---|
| CSS Transform — rotate · hover · 벤더 프리픽스 완전 정리 (0) | 2026.05.03 |
| CSS 그룹 셀렉터 — 콤마로 한 번에 스타일 적용 완전 정리 (0) | 2026.05.02 |
| CSS 셀렉터 3종 — 태그 · 클래스 · ID 완전 정리 (0) | 2026.05.02 |
| HTML 주문서 종합 — 폼 레이아웃 완전 정리 (0) | 2026.05.02 |
댓글