HTML 안에 CSS를 넣어도 될까? 확장자까지 깔끔하게 정리해드립니다

마케터 실무도구/HTML

HTML 안에 CSS를 넣어도 될까? 확장자까지 깔끔하게 정리해드립니다

신마성 2025. 4. 19. 16:29

처음 HTML을 배우다 보면 이런 의문이 생기기 마련입니다.

“HTML 파일 안에 CSS를 써도 되나요?”

“그럼 CSS는 어디에 어떻게 써야 하는 거죠?”

“파일 확장자가 .html이면 CSS도 같이 써도 되는 건가요?”

이번 글에서는 HTML과 CSS의 관계를

확장자 중심으로 아주 쉽게 정리해보겠습니다.

표 + 실습 예시로 구조만 봐도 바로 이해할 수 있도록 정리했어요!

1. HTML과 CSS는 무엇이 다를까?

구분 HTML CSS

정식 명칭	HyperText Markup Language	Cascading Style Sheets
역할	웹페이지의 구조와 내용 정의	내용의 디자인과 스타일 지정
기본 문법	<h1>, <p>, <img> 등	.box { color: red; }
비유	건물의 뼈대	인테리어

HTML은 보여줄 내용을 만든다
CSS는 그 내용을 예쁘게 꾸민다

2. HTML 파일 안에 CSS를 같이 써도 될까?

✅ 정답: YES! 가능합니다.

파일 확장자 설명 HTML 태그 포함 가능 CSS 문법 사용 가능

.html	웹페이지의 구조 + 내용 + CSS 일부 포함	O	O
.css	디자인만 담당하는 스타일 전용 파일	X	O

3. HTML 안에 CSS 쓰는 방법 2가지

방법 1. <style> 태그로 HTML 안에 직접 작성

html
복사편집
<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        color: navy;
      }
    </style>
  </head>
  <body>
    <p>이 문장은 파란색으로 보입니다.</p>
  </body>
</html>

.html 파일 하나에 내용과 스타일을 모두 포함
연습이나 간단한 페이지에 유용

방법 2. 외부 CSS 파일을 연결하기

html
복사편집
<!-- HTML 파일 (.html) -->
<head>
  <link rel="stylesheet" href="style.css">
</head>

css
복사편집
/* style.css 파일 */
p {
  color: green;
}

HTML은 구조, CSS는 스타일을 분리해서 관리
유지보수가 쉽고, 실무에서는 이 방식을 더 많이 사용

4. 어떤 상황에서 어떤 방식을 써야 할까?

상황 추천 방식 이유

간단한 실습	내부 <style> 태그	한 파일로 쉽게 테스트 가능
개인 블로그 스킨 수정	내부 또는 외부	규모 따라 유동적
기업 웹사이트 제작	외부 .css 연결	코드 분리로 유지보수 용이

5. 마무리 요약

.html 파일 안에 CSS를 함께 작성할 수 있다
HTML은 구조와 내용, CSS는 스타일과 꾸밈
CSS를 별도 .css 파일로 분리하는 건 실무에서 자주 사용하는 방식
CSS는 HTML 없이 쓸 수 없고, HTML은 CSS 없이도 동작하지만 투박하다