HTML과 CSS는 웹을 구성하는 가장 기초적인 두 기술입니다. 웹페이지의 뼈대를 만들고, 그 위에 디자인과 스타일을 입히는 역할을 하며, 웹 개발의 출발점이 됩니다. 웹 스크래핑을 공부할 때도 HTML 구조를 정확히 이해해야 데이터를 올바르게 추출할 수 있기 때문에 반드시 알아두어야 하는 기초이기도 합니다. 아래에서는 HTML과 CSS의 개념, 역할, 구성 요소, 예시, 그리고 실제 웹페이지가 만들어지는 흐름까지 체계적으로 정리하였습니다.
1. HTML의 개념과 역할
HTML은 HyperText Markup Language의 약자입니다. 웹페이지를 구성하는 기본 골격을 만드는 언어로, 화면에 보이는 제목, 본문, 이미지, 링크, 표, 메뉴 등 모든 요소는 HTML로 작성됩니다. HTML은 프로그래밍 언어가 아니라 문서를 구조화하기 위한 마크업 언어입니다.
HTML의 핵심 역할은 다음과 같습니다.
- 웹페이지의 구조 정의
- 콘텐츠의 배치와 구분
- 문서 내 정보의 의미 부여(제목, 리스트, 링크 등)
- 브라우저가 내용을 해석하도록 안내
브라우저는 HTML 문서를 해석하여 화면에 내용을 표시합니다. 그 과정에서 HTML의 태그 구조가 기본 골격을 이루며, 이후 CSS가 디자인을 입히는 방식으로 웹페이지가 완성됩니다.
2. HTML의 기본 구성 요소
HTML 문서는 여러 개의 태그(tag)로 구성됩니다. 태그는 <태그명> 형식으로 작성되며, 역할에 따라 브라우저가 내용을 이해합니다.
가장 기본적인 HTML 문서의 틀은 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<title>웹페이지 제목</title>
</head>
<body>
<h1>안녕하세요</h1>
<p>HTML과 CSS 학습 예시입니다.</p>
</body>
</html>
HTML 구조에서 중요한 요소는 다음과 같습니다.
| 요소 | 역할 |
| <html> | HTML 문서 전체 영역 |
| <head> | 화면에 보이지 않는 정보(제목, 문자 인코딩 등) |
| <body> | 실제 화면에 보여지는 내용 |
| <h1> ~ <h6> | 제목 |
| <p> | 문단 |
| <a> | 링크 |
| <img> | 이미지 |
| <div> | 구역(영역을 묶는 태그) |
| <span> | 인라인 요소 묶음 |
HTML은 시각적인 표현보다 콘텐츠의 구조와 의미를 명확하게 하는 것이 중심입니다.
3. CSS의 개념과 역할
CSS는 Cascading Style Sheets의 약자입니다. HTML 문서에 디자인과 스타일을 지정하는 언어입니다.
CSS의 역할은 다음과 같습니다.
- 글꼴, 색상, 크기 지정
- 배치와 레이아웃 구성
- 여백과 정렬 처리
- 반응형 웹(화면 크기에 따라 UI 변경)
- 애니메이션 및 전환 효과
HTML이 뼈대라면, CSS는 옷과 장식입니다. HTML로 구조를 만든 뒤 CSS가 모양과 분위기를 결정합니다.
4. CSS의 기본 문법과 적용 방식
CSS는 선택자(selector) → 속성(property) → 값(value)의 구조로 작성됩니다.
선택자 {
속성: 값;
}
예시:
h1 {
color: blue;
font-size: 36px;
}
p {
line-height: 1.5;
}
CSS를 HTML에 적용하는 방법은 세 가지입니다.
| 방식 | 특징 |
| 인라인 | 태그 안에 직접 스타일 지정 |
| 내부 스타일 | <style> 태그 안에서 작성 |
| 외부 스타일 | .css 파일을 별도 연결 |
실무에서는 유지 보수가 편리한 외부 스타일 파일 방식을 가장 많이 사용합니다.
5. HTML과 CSS가 함께 동작하는 과정
웹페이지가 브라우저에서 보이는 과정은 다음과 같습니다.
- 브라우저가 HTML 문서를 불러온다.
- HTML의 구조를 해석해 페이지의 틀을 만든다.
- 연결된 CSS 파일을 불러온다.
- 각 요소에 스타일을 적용해 화면을 렌더링 한다.
예시:
<!DOCTYPE html>
<html>
<head>
<title>HTML과 CSS 예시</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>웹 개발의 기초</h1>
<p>HTML은 구조, CSS는 디자인을 담당합니다.</p>
</body>
</html>
h1 {
color: orange;
text-align: center;
}
p {
font-size: 18px;
color: #333;
}
위 두 파일이 결합되면 제목은 주황색으로 중앙 정렬되고, 본문은 읽기 좋은 크기로 표시됩니다.
6. 시맨틱 HTML의 중요성
최근 웹 표준에서는 시맨틱(semantic) 태그 사용을 권장합니다. 의미가 느껴지는 태그를 사용해 문서를 구성하면 검색 엔진, 웹 접근성, 스크린 리더 등 다양한 기술에 유리합니다.
| 시맨틱 태그 | 의미 |
| <header> | 머리말 영역 |
| <nav> | 메뉴/네비게이션 |
| <main> | 핵심 콘텐츠 |
| <article> | 독립된 글/기사 |
| <section> | 관련된 주제 묶음 |
| <footer> | 바닥글 |
웹 스크래핑에서도 시맨틱 태그를 이해하면 데이터가 어디에 있는지 훨씬 빠르게 파악할 수 있습니다.
7. HTML과 CSS 학습에서 중요한 관점
웹을 구성하는 기술은 다양하지만 HTML과 CSS의 기반이 확실해야 다음 단계로 자연스럽게 확장됩니다.
배울 때 아래 관점을 가지면 도움이 됩니다.
- HTML의 목적은 구조, CSS의 목적은 스타일
- 태그의 의미를 알고 사용하면 검색 엔진과 사용자 모두에게 유리
- 스타일은 반복보다 재사용을 우선하는 방식이 효율적
- 구조와 디자인을 분리하는 것이 유지 보수에 좋음
- 반응형 웹을 염두에 두고 폭과 여백을 다루기
웹 스크래핑을 배우는 사람이라면 HTML 구조를 바라보는 분석 능력이 핵심입니다.
브라우저의 검사(F12) 기능을 활용해 태그와 클래스 이름을 파악할 수 있으면 원하는 정보를 손쉽게 추출할 수 있습니다.
맺음말
HTML과 CSS는 단순한 기초 기술이 아니라, 웹의 모든 구조와 디자인의 중심이 되는 토대입니다.
웹페이지의 형태, 정보의 구성, 사용자 경험, 그리고 데이터의 배치까지 모두 이 두 기술을 기반으로 조직되어 있습니다.
웹 개발을 하든 웹 스크래핑을 하든,
HTML로 구조를 이해하고 CSS로 스타일을 읽어내는 능력은 필수이며,
이 두 기술을 확실히 이해하면 웹의 흐름을 깊이 있게 바라볼 수 있습니다.
차근차근 학습해 나가면 웹페이지 속 데이터와 구조가 눈에 보이듯이 이해되고,
실제 프로젝트·응용 서비스·자동화 작업에서도 강력한 기반으로 작용할 것입니다.
HTML과 CSS는 웹 세계로 들어가는 가장 든든한 입구입니다.
'HTML' 카테고리의 다른 글
| HTTP 프로토콜 (0) | 2025.11.27 |
|---|---|
| Wix 사용법: 왕초보를 위한 구체적인 단계별 가이드 (1) | 2025.10.20 |
| 코드 편집기 VSCode 설치하기 (0) | 2022.12.05 |
| 코딩에 에디터가 필요할까 (0) | 2022.12.04 |
| 작성된 코드를 FTP로 서버에 올리기 (0) | 2021.09.25 |