안동민 개발노트

1장에서 우리는 웹이 작동하는 방식과 HTML, CSS, 자바스크립트가 웹 페이지를 구성하는 핵심 언어라는 것을 학습했습니다. 그리고 '나의 첫 프로필 페이지'를 만들며 HTML이 웹 페이지의 뼈대를 만든다는 것을 어렴풋이 경험했죠. 이제부터는 웹 개발의 가장 기본적인 건축 자재인 HTML(HyperText Markup Language) 에 대해 더욱 깊이 파고들어 볼 차례입니다.

이 장에서는 HTML 문서가 어떻게 구조화되는지, 그리고 HTML을 이루는 가장 작은 단위인 '요소'와 '태그'는 무엇이며, 어떻게 사용하는지에 대한 문법적인 규칙들을 자세히 살펴보겠습니다. 이 지식은 여러분이 웹 페이지를 만들 때 논리적이고 견고한 구조를 설계하는 데 필수적인 기반이 될 것입니다.

HTML 문서의 기본 구조 이해하기

모든 HTML 문서는 웹 브라우저가 해당 문서를 올바르게 해석하고 표시할 수 있도록 정해진 기본 구조를 따릅니다. 1장에서 잠시 보았던 HTML 코드의 뼈대를 다시 한번 살펴보며 각 부분이 어떤 의미를 가지는지 자세히 알아봅시다.

index.html

<!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>

위 코드는 모든 HTML 문서가 가져야 할 최소한의 구조를 보여줍니다. 각 줄이 무엇을 의미하는지 하나씩 살펴보겠습니다.

<!DOCTYPE html>: 문서 유형 선언 (Document Type Declaration)
- 이 코드는 웹 브라우저에게 "이 문서는 HTML5 표준에 따라 작성된 HTML 문서입니다."라고 알려주는 역할을 합니다.
- 웹 브라우저는 이 선언을 보고 문서를 렌더링할 때 어떤 규칙을 따를지 결정합니다. 이것이 없으면 오래된(구형) 웹 표준에 따라 문서를 해석할 수도 있어, 예상치 못한 방식으로 웹 페이지가 표시될 수 있습니다. 반드시 HTML 문서의 가장 첫 줄에 위치해야 합니다.
<html lang="ko">: HTML 문서의 루트(Root) 요소
- 이 태그는 전체 HTML 문서의 시작과 끝을 나타내는 가장 상위(root) 요소입니다. 모든 HTML 콘텐츠는 이 <html> 태그 안에 포함되어야 합니다.
- lang="ko" 속성은 이 문서의 주요 언어가 한국어(Korean)임을 나타냅니다. 이는 검색 엔진 최적화(SEO)에 도움이 되며, 스크린 리더와 같은 보조 기술이 올바른 언어로 콘텐츠를 읽어줄 수 있도록 돕습니다. 필요에 따라 en(영어), ja(일본어) 등으로 변경할 수 있습니다.
<head>: 문서의 메타데이터 영역
- head 태그는 웹 페이지 자체에 대한 정보(메타데이터)를 담는 영역입니다. 이 안에 있는 내용은 사용자에게 직접적으로 웹 페이지에 표시되지는 않습니다.
- 주로 다음과 같은 정보들이 포함됩니다.
  - <meta> 태그: 문서의 문자 인코딩(charset), 뷰포트 설정(viewport), 웹 페이지 설명(description), 검색 키워드(keywords) 등 웹 페이지에 대한 다양한 메타 정보를 정의합니다.
  - <title> 태그: 웹 브라우저의 탭이나 창 제목 표시줄에 나타나는 웹 페이지의 제목을 정의합니다.
  - <link> 태그: 외부 CSS 파일을 연결하거나 파비콘(Favicon, 웹사이트 아이콘)을 연결할 때 사용합니다.
  - <style> 태그: HTML 문서 내부에 직접 CSS 스타일을 작성할 때 사용합니다.
  - <script> 태그: 자바스크립트 코드를 포함하거나 외부 자바스크립트 파일을 연결할 때 사용합니다.
<body>: 문서의 콘텐츠 영역
- body 태그는 웹 브라우저 화면에 실제로 사용자에게 보여질 모든 내용을 담는 영역입니다. 여러분이 웹 페이지에서 보는 모든 텍스트, 이미지, 버튼, 동영상 등은 모두 이 <body> 태그 안에 작성됩니다.
- <h1>, <p>, <img>, <a> 등 콘텐츠를 구성하는 다양한 HTML 요소들이 이곳에 위치합니다.

HTML의 핵심 문법

HTML 문서를 이루는 가장 기본적인 빌딩 블록은 바로 요소(Element) 입니다. 그리고 이 요소를 표현하기 위해 사용하는 것이 바로 태그(Tag) 입니다.

태그(Tag)
- <와 >로 둘러싸인 키워드를 '태그'라고 부릅니다. 예를 들어, <h1>, <p>, <img> 등이 태그입니다.
- 대부분의 태그는 시작 태그(Opening Tag) 와 종료 태그(Closing Tag) 한 쌍으로 이루어집니다. 종료 태그는 시작 태그와 비슷하지만 < 뒤에 /가 붙습니다.
  - 예시: <h1> (시작 태그) </h1> (종료 태그)
요소(Element)
- 시작 태그와 종료 태그, 그리고 그 사이에 포함되는 콘텐츠(Content) 를 모두 합쳐서 '요소'라고 부릅니다.
  - 예시: <h1>이것은 제목입니다.</h1> (하나의 h1 요소)
  - 여기서 <h1>은 시작 태그, </h1>은 종료 태그, '이것은 제목입니다.'는 콘텐츠입니다.
빈 태그 (Self-closing Tag)
- 일부 태그는 콘텐츠를 가질 필요가 없어서 종료 태그가 존재하지 않습니다. 이러한 태그를 '빈 태그' 또는 '셀프 클로징 태그'라고 부릅니다.
- 예시: <img> (이미지), <br> (줄 바꿈), <input> (입력 필드), <meta>, <link>
- HTML5에서는 빈 태그에 /를 붙이지 않는 것이 일반적입니다. (예: <img src="image.jpg">) 하지만 XML/XHTML 스타일로 <img src="image.jpg" />와 같이 작성해도 웹 브라우저는 인식합니다.

속성(Attributes): 요소에 추가 정보 부여하기

HTML 요소는 단순히 내용만 담는 것이 아니라, 추가적인 정보를 가질 수 있습니다. 이러한 추가 정보는 '속성(Attribute)'이라고 불리며, 시작 태그 내에 속성명="값"의 형태로 작성합니다.

<a href="https://www.google.com" target="_blank" title="새 탭에서 구글 열기">구글로 이동</a>
<img src="images/logo.png" alt="회사 로고" width="100" height="50">

위 예시에서 <a> 태그는 링크를 만드는 요소이며, href, target, title이 속성입니다. <img> 태그는 이미지를 삽입하는 요소이며, src, alt, width, height가 속성입니다.

href 속성: 하이퍼링크가 가리키는 URL(주소)을 지정합니다.
target 속성: 링크를 클릭했을 때 페이지를 여는 방식을 지정합니다. _blank는 새 탭이나 새 창에서 링크를 엽니다.
title 속성: 요소에 대한 추가 정보를 제공하며, 마우스 오버 시 툴팁으로 표시될 수 있습니다.
src 속성: 이미지 파일의 경로(Source)를 지정합니다.
alt 속성: 이미지가 로드되지 않았을 때 대신 표시될 텍스트 또는 시각 장애인용 스크린 리더가 이미지를 설명할 때 사용될 대체 텍스트(Alternative text)를 지정합니다. 웹 접근성을 위해 매우 중요합니다.
width, height 속성: 이미지의 너비와 높이를 픽셀 단위로 지정합니다. (일반적으로 크기는 CSS로 제어하는 것이 더 유연합니다.)

주의사항:

속성명과 값 사이에는 등호(=)가 있어야 합니다.
속성 값은 항상 큰따옴표(") 또는 작은따옴표(')로 묶어야 합니다. 일반적으로 큰따옴표를 사용하는 것이 권장됩니다.
태그와 속성, 속성명과 값 사이에는 공백을 사용하여 구분합니다.

HTML 주석: 코드에 메모 남기기

코드를 작성하다 보면 특정 부분에 대한 설명이나 나중에 참고할 내용을 남겨두고 싶을 때가 있습니다. 이때 주석(Comment) 을 사용합니다. 주석은 웹 브라우저에 표시되지 않으며, 오직 개발자만이 코드를 읽을 때 볼 수 있습니다.

HTML 주석은 ``로 끝납니다.

<p>이것은 주석 아래에 있는 단락입니다.</p>

주석은 코드의 가독성을 높이고, 다른 개발자 또는 미래의 내가 코드를 이해하는 데 큰 도움을 줍니다. 또한, 특정 코드를 일시적으로 비활성화할 때도 유용하게 사용됩니다.

블록 요소와 인라인 요소

HTML의 모든 요소는 기본적으로 두 가지 주요 표시 유형 중 하나를 가집니다. 바로 블록(Block) 요소와 인라인(Inline) 요소입니다. 이 두 가지 개념을 이해하는 것은 웹 페이지의 레이아웃을 이해하고 CSS를 효과적으로 적용하는 데 매우 중요합니다.

블록 요소 (Block-level Elements)
- 블록 요소는 항상 새로운 줄에서 시작하며, 가능한 한 많은 너비(부모 요소의 100%)를 차지합니다.
- 마치 문단이나 제목처럼 '블록' 형태로 존재합니다.
- 대표적인 블록 요소: <div>, <h1>~<h6>, <p>, <ul>, <ol>, <li>, <form>, <header>, <footer>, <section>, <article>, <aside> 등
```
<h1>첫 번째 제목</h1>
<p>첫 번째 단락입니다.</p>
<p>두 번째 단락입니다.</p>
<div>이것은 div 블록입니다.</div>
```
위 코드를 브라우저에서 보면, 각 요소가 모두 새로운 줄에서 시작하고 너비가 화면 전체를 차지하는 것을 확인할 수 있습니다.
인라인 요소 (Inline Elements)
- 인라인 요소는 새로운 줄을 시작하지 않고, 자신의 콘텐츠만큼의 너비만 차지합니다.
- 텍스트의 흐름 속에서 일부를 강조하거나 링크를 삽입할 때 주로 사용됩니다.
- 대표적인 인라인 요소: <span>, <a>, <strong>, <em>, <img>, <input>, <label>, <button> 등
```
안녕하세요, <strong>[여러분의 이름]</strong>입니다.
<a href="#">더 알아보기</a> 이곳에 <img src="icon.png" alt="아이콘"> 이미지가 있습니다.
```
위 코드를 브라우저에서 보면, '안녕하세요' 다음에 <strong> 태그 안의 텍스트가 바로 이어지고, <a> 태그와 <img> 태그도 모두 같은 줄에 이어서 표시되는 것을 확인할 수 있습니다.

이 블록/인라인 개념은 나중에 CSS를 배울 때 각 요소의 배치와 크기를 조절하는 데 핵심적인 역할을 합니다. 어떤 요소가 기본적으로 블록이고 인라인인지 이해하는 것은 웹 페이지를 설계하는 데 매우 중요한 첫걸음입니다.

이번 장에서는 HTML 문서의 기본적인 구조부터 시작하여 요소, 태그, 속성, 주석, 그리고 블록/인라인 요소의 개념까지 HTML의 가장 핵심적인 문법을 상세하게 살펴보았습니다. 이 지식들은 앞으로 다양한 HTML 태그들을 배우고 웹 페이지를 구성하는 데 굳건한 기반이 될 것입니다.

HTML 구조와 문법

HTML 문서의 기본 구조 이해하기

HTML의 핵심 문법

속성(Attributes): 요소에 추가 정보 부여하기

HTML 주석: 코드에 메모 남기기

블록 요소와 인라인 요소

On this page