이 글은 입문자가 <link> 태그로 CSS 파일을 연결하고, 경로(path)와 href·rel의 의미를 이해하도록 돕는 실전 가이드입니다.
1) 핵심 요약
- CSS 파일을 만들고 → <head> 안에 <link href="경로/파일.css" rel="stylesheet"> 한 줄을 넣으면 연결 완료.
- href는 “CSS 파일의 위치”, rel="stylesheet"는 “이 링크가 스타일시트임”을 의미.
- 경로가 틀리면 100% 적용 안 됨. ./ (현재 폴더), ../ (상위 폴더)를 기억하세요.
2) 준비물 & 폴더 구조
- 에디터: VS Code(라이브 서버 확장 사용 권장)
- 폴더: 코딩 폴더에 코딩.html, 코딩.css
- 파일명은 가급적 영문 소문자 권장(예: index.html, style.css) — 운영체제/서버 차이로 인한 오류 예방
3) 따라하기: CSS 연결 3단계
3-1) CSS 파일 만들기
3-2) HTML에서 link 삽입
html파일 <head>안에 link 를 생성해요
3-3) href·rel 채우고 저장
4) 태그 개념 정리
<link> — 외부 자원을 문서에 연결
- 정의: HTML 문서와 외부 파일(CSS, 아이콘 등)을 관계(rel)로 연결하는 빈 요소.
- 언제: CSS를 불러올 때 rel="stylesheet"로 사용(대부분의 사이트 필수).
- 위치: <head> 내부.
href — Hypertext Reference(파일 위치)
- 정의: 연결할 파일의 경로. 상대경로(./style.css), 절대경로(/assets/style.css), 전체 URL 모두 가능.
- 포인트: 경로가 틀리면 CSS가 로드되지 않음 → 개발자도구 Network 탭으로 404 확인.
rel="stylesheet" — 연결 관계 정의
- 정의: 이 링크가 스타일시트임을 브라우저에 알려 로딩·적용 순서를 관리.
- 주의: rel이 빠지면 CSS로 인식되지 않을 수 있음.
<head> — 문서 정보를 담는 영역
- 정의: 제목, 메타태그, CSS 연결 등 문서의 설정을 모아 두는 부분.
- 팁: CSS는 보통 <head>에서 먼저 로드해 화면 깜빡임을 줄임.
5) 경로 쉽게 이해하기 — 상대/절대 3분 정리
- 같은 폴더: ./코딩.css 또는 코딩.css
- 상위 폴더: ../reset.css (한 단계 위)
- 하위 폴더: ./css/style.css (css 폴더 안)
- 사이트 기준 절대: /assets/style.css (루트에서 시작)
- 완전한 URL: https://cdn.example.com/style.css
가장 흔한 오류는 철자/대소문자/위치 불일치입니다. 로컬에서는 되는데 서버에서 깨지면 대소문자부터 확인하세요(Linux는 구분 엄격).
6) FAQ
Q1. <link>에 type="text/css"도 적어야 하나요?
현대 브라우저는 CSS MIME 타입을 자동 인식하므로 보통 생략합니다. 표준 최소 형태는 <link href="style.css" rel="stylesheet">.
Q2. CSS를 여러 개 연결해도 되나요?
가능합니다. 다만 아래쪽에 있는 파일이 같은 선택자를 덮어쓴다는 점을 기억하세요.
Q3. HTML 최하단에 <link>를 두면 안 되나요?
기술적으로는 가능하지만, 렌더링 깜빡임을 줄이기 위해 <head>에서 먼저 로드하는 것이 일반적입니다.
7) 요약
- 한 줄: <link href="./style.css" rel="stylesheet">를 <head>에 넣으면 끝.
- 키워드: href=파일위치, rel=연결관계(스타일시트), 경로가 1순위 오류 원인.
- 실전: 경로 헷갈리면 폴더 구조를 종이에 그리고 ./·../부터 점검.