레슨 1 : HTML 기본과 문서 골격

HTML이 뭐야?

웹페이지의 뼈대를 만드는 마크업 언어.
태그(<p>)로 요소(paragraph)를 감싸 구조를 만든다.
요소에 속성(예: lang="ko")을 달아 의미/설정을 더한다.

최소 골격(그대로 붙여서 테스트 해봐!)

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>하온의 첫 HTML</title>
</head>
<body>
  <header>
    <h1>안녕하세요, 하온입니다</h1>
  </header>

  <main>
    <p>이건 제 첫 번째 HTML 문서예요. 즐겁게 배워봐요!</p>
  </main>

  <footer>
    <small>© 2025 Haon</small>
  </footer>
</body>
</html>

포인트

<!doctype html>: 최신 HTML 표준 사용 선언
<html lang="ko">: 문서 기본 언어(접근성·SEO에 도움)
<meta charset="utf-8">: 한글 깨짐 방지
<meta name="viewport">: 모바일 화면 최적화
<header>, <main>, <footer>: 시멘틱(의미 있는) 레이아웃

미니 실습(5분)

위 코드를 메모장에서 index.html로 저장 → 브라우저로 열기(윈도우 창으로 파일을 드래그 해도 됨)
<h1> 텍스트를 네가 원하는 블로그 제목으로 바꾸고, <p> 문단을 2개 더 추가해보기
<title>도 바꿔서 브라우저 탭에 제목이 바뀌는지 확인하기

체크리스트

들여쓰기 2스페이스 또는 2칸/4칸 중 하나로 통일했나요?
모든 여는 태그에 닫는 태그가 있나요? (<p>…</p>)
문서의 유일한 <h1>만 사용했나요? (나머지는 <h2>, <h3>로 단계화)

저작자표시 비영리 변경금지 (새창열림)

'하온과 하윤(AI)의 대화록 > AI로 배우는 HTML' 카테고리의 다른 글

레슨6 : 표(table) & 접근성 기초 (0)	2025.08.08
레슨5 : 폼(form) 기초 — 입력, 검증, 접근성 (0)	2025.08.08
레슨4 : 레이아웃 기본(시멘틱 태그) (0)	2025.08.08
레슨 3. 링크 · 이미지 · 리스트 제대로 쓰는 기 (0)	2025.08.08
레슨 2: 텍스트 태그 제대로 쓰는 법(제목 구조, 강조, 줄바꿈, 인용) (5)	2025.08.08

🛡️ 저작권 안내
본 블로그의 모든 콘텐츠(텍스트·이미지·파일 등)는 하온(Haon)과 AI 도우미 하윤이 공동 제작한 창작물이며, 저작권 이용 안내에 따라 보호됩니다. 무단 복제·배포·변형은 금지됩니다.

📮 시정 및 삭제 조치
게시된 게시물 중 문제가 확인되면 즉시 시정·삭제 조치하겠습니다. 저작권·권리 침해 신고

📌 투자 유의사항 (일부 주식정보·재테크 정보)
본 글은 정보 제공 목적이며, 어떠한 종목 매수·매도 권유가 아닙니다.
투자 결과에 대한 모든 책임은 투자자 본인에게 있습니다.
투자 전 반드시 스스로 충분한 검토와 판단을 하시기 바랍니다.

Haon.ai

레슨 1 : HTML 기본과 문서 골격

'하온과 하윤(AI)의 대화록 > AI로 배우는 HTML' 카테고리의 다른 글

티스토리툴바

레슨 1 : HTML 기본과 문서 골격

'하온과 하윤(AI)의 대화록 > AI로 배우는 HTML' 카테고리의 다른 글

관련글

티스토리툴바