HTML
HTML(HyperText Markup Language)은 웹 페이지의 구조를 정의하는 마크업 언어입니다. 이를 통해 웹 브라우저가 내용을 어떻게 표시할지 이해할 수 있습니다.
특징
- 구조 정의 : HTML은 웹 페이지의 제목, 단락, 목록, 링크, 이미지와 같은 요소를 정의합니다.
- 태그 기반 : HTML은 <h1>, <p>, <a>와 같은 태그를 사용하여 문서의 각 요소를 표시합니다.
- 콘텐츠 중심 : HTML은 웹 페이지의 콘텐츠를 작성하는 데 초점을 맞춥니다.
- 정적 문서 : 기본적으로 HTML은 정적인 페이지를 생성하지만, JavaScript와 결합하면 동적인 기능을 추가할 수 있습니다.
예시
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML 예제</title>
</head>
<body>
<h1>안녕하세요, HTML!</h1>
<p>이것은 HTML의 예제입니다.</p>
</body>
</html>CSS
CSS(Cascading Style Sheets)는 웹 페이지의 디자인과 스타일을 담당하는 언어입니다. HTML로 작성된 구조에 시각적인 요소를 추가합니다.
특징
- 디자인 정의 : CSS는 색상, 글꼴, 레이아웃, 간격 등 시각적인 스타일을 지정합니다.
- 선언적 언어 : CSS는 선택자와 선언 블록을 사용하여 스타일을 정의합니다. ex. h1 { color: red; }
- 재사용 가능 : 하나의 CSS 파일로 여러 HTML 문서에 스타일을 적용할 수 있습니다.
- 계층적 구조 : CSS는 스타일 규칙이 겹칠 경우 특정 우선순위(Cascade)를 통해 어떤 규칙을 적용할지 결정합니다.
예시
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: blue;
text-align: center;
}HTML VS CSS
| 구분 | HTML | CSS |
| 역할 | 웹 페이지의 구조와 콘텐츠 정의 | 웹 페이지의 디자인과 스타일 정의 |
| 언어 유형 | 마크업 언어 | 스타일링 언어 |
| 출력 요소 | 텍스트, 이미지, 링크 등 콘텐츠 | 색상, 글꼴, 레이아웃 등 스타일링 |
| 파일 확장자 | .html | .css |
| 독립성 | 브라우저에서 HTML만으로도 실행 가능 | HTML이 필요하며 단독으로 사용 불가 |
요약
HTML과 CSS는 각각 구조와 스타일을 담당하며, 웹 페이지를 만드는 데 필수적인 요소입니다. HTML은 콘텐츠의 뼈대를 제공하고, CSS는 그 뼈대를 꾸며 사용자에게 더 나은 시각적 경험을 제공합니다.
출처
OpenAI의 ChatGPT (https://openai.com)
'Front-end' 카테고리의 다른 글
| [HTML] 표준 HTML 구조 (1) | 2025.02.05 |
|---|---|
| 부트스트랩 (Bootstrap) feat. Card 컴포넌트 (0) | 2025.02.04 |