HTML — 구조
외울 필요는 없습니다. AI에게 더 정확하게 요청하기 위해 알아두는 것입니다.
웹사이트를 만들 때 가장 먼저 필요한 것은 구조입니다. 이 구조를 만드는 언어가 바로 HTML입니다.
HTML이란?
HTML은 HyperText Markup Language의 줄임말입니다. 이름은 어렵지만 하는 일은 단순합니다.
HTML은 건물의 뼈대(골조)와 같습니다. 벽이 어디에 있고, 문이 어디에 있고, 창문이 몇 개인지를 정하는 설계도입니다.
집을 지을 때 인테리어(페인트, 가구) 전에 먼저 뼈대를 세우잖아요? 웹사이트도 마찬가지입니다. HTML이 뼈대를 만들고, 나머지는 그 위에 입힙니다.
태그(Tag)라는 것
HTML은 태그라는 것으로 구조를 표현합니다. 태그는 꺾쇠 괄호(< >) 안에 이름을 넣은 것입니다.
| 태그 | 의미 | 쉽게 말하면 |
|---|---|---|
|
제목 (Heading 1) | 가장 큰 제목 |
|
문단 (Paragraph) | 본문 텍스트 |
|
이미지 (Image) | 사진 한 장 |
|
구역 (Division) | 내용을 묶는 상자 |
|
버튼 (Button) | 클릭할 수 있는 버튼 |
실제 예시
아래는 아주 간단한 HTML입니다:
<h1>성화 카페</h1>
<p>매일 아침 신선한 원두로 내린 커피</p>
<img src="cafe.jpg" />
<button>메뉴 보기</button>
이렇게 쓰면 화면에는 이런 식으로 보입니다:
- 성화 카페 ← 큰 제목
- 매일 아침 신선한 원두로 내린 커피 ← 본문
- (카페 사진) ← 이미지
- [메뉴 보기] ← 클릭 가능한 버튼
예쁘지는 않죠? 구조만 있고 꾸미기(CSS)를 아직 안 했기 때문입니다. 다음 절에서 꾸미는 법을 알아봅니다.
여러분이 직접 쓸 일은 없습니다
중요한 점을 말씀드리겠습니다.
이 태그들을 직접 쓸 필요는 없습니다. AI가 다 작성해 줍니다.
그런데 왜 알아두는 걸까요? AI에게 요청할 때 이렇게 말할 수 있기 때문입니다:
| 이렇게 말하면 | AI가 더 정확하게 이해합니다 |
|---|---|
| "제목 좀 넣어줘" | |
| "버튼 추가해줘" | |
| "이미지를 넣고 싶어" | |
| "이 부분을 하나로 묶어줘" | |
태그 이름을 몰라도 됩니다. "큰 제목 넣어줘"라고만 해도 AI는 알아듣습니다. 하지만 알아두면 더 빠르고 정확한 대화가 가능합니다.
이 절의 요약
- HTML은 웹사이트의 구조(뼈대)를 만드는 언어입니다
- 태그(
,, - 직접 작성할 필요는 없습니다 — AI가 해줍니다
- 태그 이름을 알아두면 AI에게 더 정확하게 요청할 수 있습니다