HTML만으로도 괜찮다고요?
디자인 안 입힌 HTML은 그냥 밋밋한 뼈대일 뿐입니다.
눈에 보이는 건 결국 CSS가 만들어주는 거예요.
버튼 하나, 간격 하나, 폰트의 질감까지.
그런데 아직도 CSS를 어떻게 연결할지 모르겠다면, 이번 글이 꽤 실용적일 겁니다.
오늘은 HTML에 CSS 파일을 연결하고 제대로 활용하는 방법에 대해 정리해 보겠습니다.
오늘 배울 건
HTML에서 CSS 파일 추가하는 법입니다.
<head>
<link rel="stylesheet" href="styles.css">
</head>
HTML에 외부 CSS를 연결하려면 <link> 태그를 사용합니다. rel="stylesheet"는 이 파일이 CSS임을 나타내고, href="styles.css"는 연결할 CSS 파일의 경로입니다.
이 태그는 반드시 <head> 안에 넣어야 브라우저가 문서를 로딩하면서 스타일을 바로 적용할 수 있어요.
// styles.css
body {
font-family: 'Segoe UI', sans-serif;
background-color: #f9f9f9;
color: #333;
}
h1 {
color: #4f709c;
}
CSS 파일에는 이렇게 선택자와 속성을 조합해 스타일을 작성합니다.
외부 CSS는 HTML과 명확히 분리되어 유지 관리에 유리하고, 브라우저 캐시도 활용되기 때문에 성능 면에서도 이득이죠.
<style>
p {
line-height: 1.6;
margin-bottom: 20px;
}
</style>
간단한 스타일은 HTML 문서 안에 직접 작성할 수도 있어요. <style> 태그를 <head> 안에 넣고 여기에 CSS를 작성하면 됩니다.
하지만 유지보수 측면에서는 외부 CSS가 더 좋습니다. 정말 간단한 스타일이거나 페이지 하나만 사용하는 경우에 한정해서 사용하세요.
<p style="color: red; font-size: 18px;">
인라인 스타일 예시입니다.
</p>
style="" 속성은 인라인 스타일이라고 부릅니다.
한 요소에만 간단하게 스타일을 주고 싶을 때 사용하긴 하지만, 다량으로 쓰면 유지보수가 지옥이 됩니다.
정말 ‘딱 한 번만’ 필요한 스타일에만 쓰세요.
// 응용: 다크모드 스타일 분기
<link rel="stylesheet" href="light.css" media="(prefers-color-scheme: light)">
<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">
media 속성을 활용하면 사용자 시스템 설정에 따라 다른 CSS를 적용할 수 있어요. prefers-color-scheme은 다크모드와 라이트모드를 감지하는 방법 중 하나입니다.
요즘은 이런 디테일이 사용자 경험을 좌우하죠.
// 조건부 CSS 적용 예시 (IE 대응 등)
<!--[if IE]>
<link rel="stylesheet" href="ie-only.css">
<![endif]-->
이건 요즘은 거의 쓰지 않지만, 예전에는 브라우저별 CSS 적용을 위해 자주 사용됐습니다.
지금은 CSS 조건문보다 feature detection이나 @supports로 해결하는 게 더 적절합니다.
💡 파일 관리 팁
CSS 파일은 reset.css → layout.css → component.css 이런 식으로 분리해두면 관리하기 편해요.
한 파일에 다 몰아넣는 건 나중에 발목 잡습니다. 특히 프로젝트 커질수록 구조적인 분리가 중요해요.
마무리하며 🌿
HTML은 구조지만, CSS는 그 구조를 사람의 눈에 맞게 바꿔주는 기술입니다.
CSS 파일을 제대로 연결하고 관리하는 건 그 시작에 불과하죠.
중요한 건, 보이는 결과에 신경 쓰는 습관입니다.
👉 더 많은 HTML 팁은 제 블로그에서 확인해보세요 https://jjaeho.tistory.com
배웠다 말았다 다시 시작했다😎
흥미로운 나만의 홈페이지를 만들기 위한 공간입니다. #Pixel #Art #HTML #CSS #JAVASCRIPT
jjaeho.tistory.com
'HTML,CSS,JavaScript > HTML,CSS,JAVASCRIPT' 카테고리의 다른 글
| [HTML] label 왜 쓰냐고?? (0) | 2025.04.06 |
|---|---|
| [HTML] Hidden 활용으로 숨기기 (0) | 2025.04.06 |
| [HTML] Slot 아주 유연해~ (0) | 2025.04.05 |
| [HTML] Table 아직 살아있다.. (0) | 2025.04.05 |
| [HTML] 특수문자 아직도 헷갈린다고?? (0) | 2025.04.04 |
