mason
mason-log.
mason

mason.

안녕하세요. mason 입니다.

html

HTML 기초.

문서 구조, 요소, 속성, 중첩, DOM으로 이어지는 HTML 기본

**HTML(HyperText Markup Language)**은 웹 문서의 구조와 의미를 표현하는 마크업 언어입니다. 브라우저는 HTML을 파싱해 DOM 트리를 만들고, CSS와 JavaScript가 이 구조를 사용합니다.

🧱 문서의 기본 구조

HTML 문서가 DOM 트리로 구성되는 구조

<!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 lang="ko">: 문서의 최상위 요소이며 기본 언어를 알립니다.
  • <head>: 제목, 문자 인코딩, 메타데이터, 외부 리소스를 정의합니다.
  • <body>: 사용자 화면에 표시할 문서 내용을 담습니다.

🏷️ 요소와 속성

HTML 요소는 보통 시작 태그, 콘텐츠, 종료 태그로 구성됩니다.

<a href="/docs" target="_blank">문서 보기</a>
  • 요소(element): <a>문서 보기</a> 전체를 뜻합니다.
  • 태그(tag): 요소의 시작과 끝을 표시합니다.
  • 속성(attribute): href, target처럼 요소에 추가 정보를 줍니다.
  • 빈 요소: img, input, br처럼 종료 태그 없이 사용하는 요소입니다.

속성값은 따옴표로 감싸고, 같은 문서에서는 표기 방식을 일관되게 유지합니다.

🪆 중첩과 문서 트리

요소 안에 다른 요소를 넣으면 부모, 자식 관계가 생깁니다. 태그가 겹치지 않도록 열린 순서의 반대로 닫아야 합니다.

<!-- 올바른 중첩 -->
<p>문서의 <strong>핵심 내용</strong>이다.</p>

<!-- 잘못된 중첩 -->
<p>문서의 <strong>핵심 내용</p></strong>

브라우저는 잘못된 HTML을 가능한 범위에서 복구하지만, 의도와 다른 DOM이 만들어질 수 있습니다.

🔗 자주 쓰는 콘텐츠 요소

  • 제목: h1부터 h6까지 문서의 제목 계층을 표현합니다.
  • 문단: p는 하나의 문단을 나타냅니다.
  • 목록: ul, ol, li로 순서 없는 목록과 순서 있는 목록을 만듭니다.
  • 링크: a는 다른 문서나 같은 문서의 위치로 이동시킵니다.
  • 이미지: img에는 콘텐츠를 설명하는 alt를 함께 제공합니다.
  • 강조: strong, em은 시각적 굵기보다 의미상 중요도와 강세를 나타냅니다.

✅ 기본 체크리스트

  • 문서마다 내용에 맞는 title과 lang을 지정합니다.
  • 제목 단계는 문서 구조에 맞게 순서대로 사용합니다.
  • 클릭 동작에는 역할에 따라 a 또는 button을 선택합니다.
  • 이미지에는 의미 있는 alt를 제공합니다.
  • 표현만을 위해 요소를 선택하지 않고 콘텐츠의 의미를 먼저 봅니다.

🔗 참고 자료