HTML

웹 페이지의 구조와 내용을 나타내는 마크업 언어입니다. 제목·문단·목록·입력창처럼 화면을 이루는 요소들을 태그로 적어 뼈대를 세웁니다.

한 줄로

HTML^? 은 "무엇이 어디에 있는가"를 표시하는 언어예요. HTML이 구조, CSS^? 가 모양, 자바스크립트가 동작을 맡습니다. React에서 쓰는 JSX^? 도 결국 이 HTML 구조를 닮았습니다.

HTML은 집의 "골조와 방 배치도"입니다. 벽과 방이 어디에 있는지(구조)를 정하고, 페인트칠과 인테리어(모양)는 CSS가, 문을 여닫는 동작은 자바스크립트가 맡아요.

왜 / 어디에 쓰나

화면 뼈대 만들기 — 제목·문단·이미지·링크로 페이지 구조를 잡음
입력 받기 — 폼(<form>)·입력창(<input>)으로 사용자 데이터를 받음
의미 전달 — 시맨틱 태그로 검색엔진·스크린리더가 내용을 이해하게 함
React의 기반 — JSX가 HTML 태그를 그대로 닮았으므로 HTML을 알면 JSX가 쉬움

자주 쓰는 태그

태그	역할
`<h1>`~`<h6>`	제목(크기·중요도 순). 문서당 `<h1>` 은 보통 하나.
`<p>`	문단(paragraph) 텍스트.
`<ul>` / `<ol>` / `<li>`	목록(unordered/ordered)과 각 항목.
`<a href="...">`	다른 페이지로 가는 링크.
`<img src="..." alt="...">`	이미지. `alt` 는 대체 텍스트(접근성).
`<div>` / `<span>`	의미 없는 묶음 상자(블록 / 인라인).
`<input>` / `<button>` / `<form>`	입력창·버튼·폼.

기본 골격

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <title>내 페이지</title>
  </head>
  <body>
    <h1>안녕하세요</h1>
    <p>첫 문단입니다.</p>
    <ul>
      <li>첫째</li>
      <li>둘째</li>
    </ul>
    <a href="https://example.com">링크</a>
  </body>
</html>

태그와 속성

태그는 여는 태그와 닫는 태그로 내용을 감쌉니다. 태그에 추가 정보를 주는 것이 속성(attribute)이에요.

<a href="/about" target="_blank">소개 페이지</a>
<!--  ↑태그   ↑속성       ↑속성        ↑내용        -->

<input type="email" placeholder="이메일" required />
<!-- 닫는 태그가 없는 빈 요소는 / 로 끝냅니다 -->

시맨틱 태그

모두 <div> 로 쓰지 않고, 의미를 가진 태그를 쓰면 구조가 명확해지고 접근성·검색에 유리합니다.

<header>상단 영역</header>
<nav>메뉴</nav>
<main>
  <article>본문 글</article>
  <aside>곁다리 정보</aside>
</main>
<footer>하단 영역</footer>

JSX와의 관계

React^? 의 JSX^? 는 HTML과 거의 똑같이 생겼지만 몇 가지가 다릅니다. HTML의 class 는 JSX에서 className 으로, 모든 태그는 반드시 닫아야 해요(<img />). 즉 HTML을 알면 JSX의 절반은 이미 안다고 봐도 됩니다.

다음 단계

이 구조에 색·여백·배치 같은 모양 입히기 → CSS
구조를 컴포넌트로 만들어 화면을 동적으로 → React 기초