웹 개발을 시작할 때 가장 먼저 접하게 되는 두 가지 기술이 바로 HTML과 CSS입니다. 두 언어는 항상 함께 사용되지만, 역할과 특성은 분명히 다릅니다. 이 글에서는 HTML과 CSS의 차이점을 항목별로 살펴보고, 실제 코드 예시와 비교표까지 통해 쉽게 이해해 보겠습니다.
HTML이란?
HTML(HyperText Markup Language, 하이퍼텍스트 마크업 언어)은 웹 페이지의 뼈대를 만드는 마크업 언어입니다.
HyperText Markup Language의 약자로, 웹 페이지와 웹 애플리케이션을 제작하는 데 사용됩니다.
웹 페이지의 전체적인 구조(structure)를 정의하는 역할을 담당합니다.
정적(static) 웹 페이지를 만드는 것도 가능합니다.
데이터를 화면에 표시(display)하는 데 활용됩니다.
하이퍼텍스트(HyperText)는 여러 웹 페이지 사이의 링크를 연결하는 기능을 의미합니다.
마크업 언어(Markup Language)는 태그(tag)를 이용해 텍스트 문서를 정의하며, 이를 통해 웹 페이지에 구조를 부여합니다.
시스템이 텍스트를 이해하고 처리할 수 있도록 마크업(주석) 역할을 수행합니다.
HTML에서 사용할 수 있는 태그의 종류는 정해져 있으며, 대부분 미리 정의(predefined)되어 있습니다.
데이터는 여는 태그와 닫는 태그 사이에 위치하지만, 일부 태그는 닫는 태그가 필수가 아닙니다.
CSS에 비해 백업 및 지원 옵션이 적은 편입니다.
반대로 HTML은 CSS 파일 내부에서는 사용할 수 없습니다.
HTML 코드 예시
<!DOCTYPE html>
<html>
<head>
<title>My title</title>
</head>
<body>
<h1>title</h1>
<p>A sample</p>
</body>
</html>
CSS란?
CSS(Cascading Style Sheets)는 HTML로 만든 구조 위에 디자인을 입히는 스타일 시트 언어입니다.
웹 페이지의 색상, 폰트, 레이아웃 등 스타일을 지정하는 데 사용됩니다.
다양한 스타일링 기능을 활용해 원하는 디자인을 구현할 수 있습니다.
'선택자(selector)'와 '선언 블록(declaration block)'이라는 문법 구조를 사용합니다.
필요에 따라 외부 스타일 시트 파일로 작성하거나, HTML 문서 내부에 포함시킬 수 있습니다.
CSS는 HTML 문서 안에서 자유롭게 사용할 수 있습니다.
HTML보다 폭넓은 백업 및 브라우저 지원을 제공합니다.
CSS 코드 예시
<style>
p {
color: pink;
text-align: left;
}
</style>
HTML과 CSS 차이점 비교 요약
| 구분 | HTML | CSS |
|---|---|---|
| 주요 역할 | 웹 페이지의 구조 정의 | 웹 페이지의 스타일(디자인) 지정 |
| 언어 종류 | 마크업 언어 | 스타일 시트 언어 |
| 사용 방식 | 태그 기반으로 콘텐츠 작성 | 선택자·선언 블록 기반 스타일 선언 |
| 호환성 | CSS 내부에서 사용 불가 | HTML 문서 내부에서 사용 가능 |
| 지원 수준 | 백업·지원 옵션이 상대적으로 적음 | 더 높은 백업 및 브라우저 지원 |
마무리
HTML은 웹 페이지의 구조를 담당하고, CSS는 그 구조 위에 입히는 스타일을 담당합니다. 쉽게 비유하자면 HTML이 집의 뼈대라면, CSS는 인테리어라고 할 수 있습니다. 두 언어는 서로 대체 관계가 아니라 상호 보완적인 관계이며, 웹 개발에서 반드시 함께 익혀야 하는 기본 기술입니다.