LEVEL 4 QUEST

HTML 기초 - 웹의 뼈대 이해하기

HTML 기초 - 웹의 뼈대 이해하기 — DevFoil 바이브코딩 Stage 2, Lv.4

HTML이란 무엇인가?

웹페이지의 뼈대 = HTML

HTML(HyperText Markup Language)은 웹페이지의 구조와 내용을 정의하는 언어입니다.
집을 짓는 것에 비유하면, HTML은 골조(뼈대)에 해당합니다.

벽, 지붕, 방의 위치를 잡는 것처럼, HTML은 제목이 어디에 있고, 본문이 어디에 있고, 이미지가 어디에 들어가는지를 결정합니다.

핵심 바이브코딩에서 HTML을 직접 작성할 일은 거의 없지만, AI가 생성한 코드를 읽고 이해하고 수정 요청하려면 기본 구조를 반드시 알아야 합니다.

HTML 문서의 기본 구조

모든 웹페이지의 뼈대

모든 HTML 문서는 아래와 같은 기본 구조를 가집니다. 이 구조는 AI가 코드를 생성할 때도 항상 동일하게 만들어집니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>내 첫 번째 웹페이지</title>
</head>
<body>
    <h1>안녕하세요!</h1>
    <p>이것은 내 첫 웹페이지입니다.</p>
</body>
</html>

<!DOCTYPE html>

이 문서가 HTML5라는 것을 브라우저에게 알려주는 선언입니다.

<html>

HTML 문서 전체를 감싸는 최상위 태그입니다. lang="ko"는 한국어 문서라는 뜻입니다.

<head>

눈에 보이지 않는 설정 영역입니다. 제목, 문자 인코딩, CSS 파일 연결 등이 들어갑니다.

<body>

눈에 보이는 콘텐츠 영역입니다. 화면에 표시되는 모든 내용이 여기에 들어갑니다.

🔒

여기까지는 미리보기입니다

HTML 기초 - 웹의 뼈대 이해하기
무료 가입하면 이어서 볼 수 있고, 강의를 완료할 때마다 XP와 레벨이 쌓입니다.

Google로 3초 만에 시작 →🧵 Threads로 시작 무료 공개 강의 둘러보기 (Lv.1~3)