오늘字
아름다운 월요일, 월요일이라면 아침부터 부지런하게 네이버 웹툰에 들어가 월요 웹툰을 보는게 제 루틴입니다. 하지만 이 웹툰을 보기 위해 들어가는 웹사이트을 렌더링 해주는 HTML!!! 오늘 정리해보겠습니다.
HTML 기본 구조와 DOOM(아님)
웹 문서는 브라우저가 파싱하고 렌더링하는 규칙을 결정하기 위해 최상단에 <!DOCTYPE html> 문서 타입 선언을 합니다. 즉, "이 문서는 HTML5 표준을 따릅니다" 라고 하는 것이죠. 일반적으로 HTML은 html 아래에 메타 성격의 정보를 담는 head와 실제 화면에 렌더링될 콘텐츠가 들어가는 body로 나뉩니다.
그리고 가장 눈에 뛰었던 DOM 트리 제가 좋아하는 게임 DOOM과 매우 유사하지만, 전혀 다른 Document Object Model입니다. HTML 코드는 브라우저 내부에서 계층 구조로 모델링되는데, 이를 DOOM(진짜 아님)이라고 부릅니다. HTML 문서를 구성하는 모든 태그와 텍스트, 속성은 메모리 상에 객체로 올라가 노드(Node)로 취급됩니다.
- 엘리먼트(Element) 노드: 일반적인 HTML 태그.
- 어트리뷰트(Attribute) 노드: 태그가 가진 속성.
- 텍스트(Text) 노드: 태그 사이의 문자열 값.
주요 태그(Tag)와 속성(Attribute)들
문서 메타 정보 및 리소스 연결 (Head 영역)
| 분류 | 태그/속성 | 설명 |
|---|
| 제목 | title | 브라우저 탭에 표시되는 문서 제목이며, 즐겨찾기(북마크) 저장 시 이름으로 사용됩니다. |
| 스타일 | style | 문서 내부에 CSS를 직접 작성할 때 사용합니다 (Internal 방식). |
| 외부 연결 | link | 외부의 .css 파일을 문서에 연결할 때 사용합니다. |
| 스크립트 | script | JavaScript 코드를 문서 내에 직접 작성하거나, 외부 .js 파일을 연결할 때 사용합니다. |
텍스트 및 화면 구조화 (Body 영역)
| 분류 | 태그/속성 | 설명 |
|---|
| 제목 | h1 ~ h6 | 제목의 크기 단계를 나타내며, 숫자가 작을수록 폰트 크기가 크게 렌더링됩니다. |
| 문단 | p | 텍스트 문단을 나눌 때 사용합니다. |
| 줄바꿈/구분선 | br / hr | br은 줄바꿈을 유발하며, hr은 가로 구분선(line)을 긋습니다. 둘 다 종료 태그가 없습니다. |
| 인라인 그룹핑 | span | 텍스트의 특정 구간만 선택해 CSS/JS를 적용하기 위해 묶어주는 인라인(Inline) 레벨 태그입니다. |
| 블록 그룹핑 | div | 여러 요소를 블록(Block) 단위로 묶는 대표적인 그룹핑 태그입니다. |
| 시맨틱 태그 | header, footer, section 등 | div 남용을 막기 위해 도입되었으며, 태그 이름 자체에 헤더, 푸터 등의 의미가 담겨 있습니다. |
링크, 이미지 및 보조 태그
| 분류 | 태그/속성 | 설명 |
|---|
| 하이퍼링크 | a | 외부 사이트나 내부 문서 위치로 이동하는 링크를 생성합니다. |
| 링크 이동방식 | href / target | href는 이동할 URL이나 id값을 지정하고, target="_blank" 속성을 주면 새 탭/창으로 열립니다. |
| 이미지 | img | 이미지를 삽입하는 태그로, src 속성에 경로를 지정하고 alt로 대체 텍스트를 입력합니다. |
| 외부 문서 포함 | iframe | 현재 페이지의 특정 영역(프레임) 내부에 다른 외부 HTML 문서를 삽입합니다. |
| 모달 창 | dialog | 버튼 클릭 등으로 열고 닫을 수 있는 형태의 모달 다이얼로그 UI를 만듭니다. |
| 커스텀 데이터 | data-* | 표준 속성 외에 개발자가 임의의 커스텀 데이터를 태그에 담아두기 위해 사용하는 접두어입니다. |
데이터 표시 (테이블 및 리스트)
| 분류 | 태그/속성 | 설명 |
|---|
| 표(테이블) | table | 2차원 형태의 데이터를 표현하는 전체 컨테이너 역할을 합니다. |
| 행과 셀 | tr / th / td | tr로 행을 만들고, 그 안에 헤더 셀(th)과 일반 데이터 셀(td)을 구성합니다. |
| 테이블 그룹핑 | thead / tbody / tfoot | 표 내부의 영역(머리글, 본문, 바닥글)을 시맨틱하게 나누어 유지보수를 돕습니다. |
| 셀 병합 | colspan / rowspan | colspan은 가로 열을 병합하고, rowspan은 세로 행을 병합할 때 사용합니다. |
| 리스트(목록) | ul / ol / li | 순서 없는 목록(ul), 순서 있는 목록(ol)을 만들며, 실제 각 항목은 li 태그로 작성합니다. |
| 리스트 속성 | start | ol 태그 사용 시 리스트의 시작 번호를 임의로 지정할 수 있습니다. |
| 분류 | 태그/속성 | 설명 |
|---|
| 폼 컨테이너 | form | 사용자가 입력한 데이터를 서버로 보내기 위해 입력 태그들을 감싸는 껍데기 역할을 합니다. |
| 전송 목적지 | action | 폼 데이터가 전송될 서버(또는 페이지)의 URL을 지정하는 속성입니다. |
| 전송 방식 | method | 데이터를 보내는 방식으로, URL에 노출되는 GET 방식과 노출되지 않는 POST 방식이 있습니다. |
| 입력 UI | input, select, textarea | 텍스트, 체크박스, 라디오, 드롭다운 등 사용자가 값을 입력하거나 선택하는 UI 요소입니다. |
| 데이터 식별키 | name | 서버로 전달될 때, 어떤 데이터인지 식별하는 키(Key) 값입니다. |
| 데이터 값 | value | 사용자가 입력하거나 선택하여 실제로 서버에 전달되는 **값(Value)**입니다. |
![[멋쟁이사자처럼부트캠프] DOOM은 아니고 HTML](/content/images/size/w2000/2026/04/doom.webp)