[HTML] 01. HTML이 뭐예요?
HTML은 웹페이지를 만들기 위한 가장 기본적인 언어입니다.
우리가 인터넷에서 보는 모든 웹사이트는 HTML로 시작합니다.
쉽게 말하면 HTML은 웹사이트의 뼈대(구조)를 만드는 역할을 합니다.
1. HTML이 하는 일
HTML은 화면을 예쁘게 꾸미는 역할이 아닙니다.
HTML은 어디에 무엇이 있는지 정하는 구조 설계를 담당합니다.
- 제목이 어디에 있는지
- 문단이 어디에 있는지
- 이미지가 어디에 들어가는지
- 링크가 어디에 있는지
예를 들어 책으로 비유하면,
- HTML → 책의 목차와 구조
- CSS → 책 디자인 (글자 색, 크기)
- JavaScript → 책 속에서 움직이는 기능
2. 웹페이지는 어떻게 만들어질까?
우리가 주소창에 URL을 입력하면 이런 일이 일어납니다.
- 브라우저가 서버에 요청을 보냅니다.
- 서버가 HTML 파일을 보냅니다.
- 브라우저가 HTML을 읽습니다.
- 브라우저가 화면에 그려줍니다.
즉, 브라우저는 HTML을 해석해서 화면으로 보여주는 프로그램입니다.
3. HTML, CSS, JavaScript 차이
| 구분 | 역할 | 비유 |
|---|---|---|
| HTML | 웹페이지의 구조 | 건물의 뼈대 |
| CSS | 색상, 크기, 배치 | 건물 인테리어 |
| JavaScript | 클릭, 동작, 이벤트 | 엘리베이터, 자동문 |
처음에는 HTML 구조 이해에만 집중해도 충분합니다.
4. 가장 기본적인 HTML 구조
아래는 모든 HTML 문서의 기본 틀입니다.
<!DOCTYPE html>
<html>
<head>
<title>내 첫 HTML</title>
</head>
<body>
안녕하세요!
</body>
</html>
5. 코드 설명
- <!DOCTYPE html> → 이 문서는 HTML5입니다
- <html> → HTML 문서 시작
- <head> → 설정 정보 (제목, 문자 인코딩 등)
- <title> → 브라우저 탭에 보이는 제목
- <body> → 실제 화면에 보이는 내용
6. 실행 결과 (Output)
위 코드를 실행하면 브라우저 화면에는 이렇게 보입니다.
안녕하세요!
그리고 브라우저 탭에는 이렇게 표시됩니다.
내 첫 HTML
이게 바로 HTML의 기본 동작 방식입니다.
7. 정리
- HTML은 웹페이지의 구조를 만든다
- 브라우저는 HTML을 읽어서 화면에 그린다
- HTML은 웹 개발의 시작이다
- 처음에는 태그 구조 이해가 가장 중요하다
'Computer Science > HTML' 카테고리의 다른 글
| [HTML] 06. 목록(List) 태그 완전 정리 (ul, ol, li) (0) | 2026.02.07 |
|---|---|
| [HTML] 05. 텍스트(글자) 관련 태그 완전 정리 (0) | 2026.02.07 |
| [HTML] 04. 블록 요소 vs 인라인 요소 완전 정리 (0) | 2026.02.07 |
| [HTML] 03. 태그(Tag)의 문법 구조 완전 이해 (0) | 2026.02.07 |
| [HTML] 02. HTML 기본 구조 (0) | 2026.02.07 |