HTML에 대해 알아보기

맑음·2025년 5월 15일

HTML이란?

HTML (HyperText Markup Language)은 웹 페이지와 그 내용을 구조화하기 위해 사용하는 마크업 언어입니다
HTML은 웹 사이트에서 뼈대를 담당하고 있으며 텍스트, 이미지, 비디오, 링크 등 다양한 요소를 태그 (tag)로 감싸 웹 브라우저가 이해할 수 있도록 만들어줍니다

HTML이 웹 사이트에서 뼈대를 담당하지만 이 구조에 디자인을 적용하고 동작을 추가하기 위해서는 CSS와 JavaScript와의 결합이 필요합니다

결론적으로 웹은 이 세 가지 기술이 함께 작동하면서 완성됩니다

CSS (Cascading Style Sheets)

CSS은 HTML 요소에 색상, 폰트, 배치, 크기 등의 스타일을 적용하는 언어입니다
HTML로만 작성하면 단순한 흑백 텍스트이지만 CSS를 적용하면 예쁘고 보기 좋은 형태로 바뀝니다

아래는 CSS를 적용하지 않은 페이지와 CSS를 적용한 페이지의 예시입니다
확실히 오른쪽이 더 예쁘죠? ㅎㅎ
위의 사진은 이해를 위해 넣은 간단한 예시이지만 여러분들이 들어가는 웹은 대부분 CSS가 적용되어 있습니다
HTML만 있으면 디자인까지 되는거 아니야? 라고 생각하실 수 있지만 CSS가 있기 때문에 예쁜 웹 디자인이 가능한 것입니다!

JavaScript

JavaScript (JS)는 HTML에 동적인 기능을 추가하는 프로그래밍 언어입니다
예를 들어 버튼을 클릭했을 때, 알림을 띄우거나 내용을 바꾸는 등의 인터랙티브한 기능을 담당합니다

자바스크립트에 대해서는 따로 더 다룰 예정입니다

HTML 문서의 기본 구조

HTML 문서는 아래와 같은 기본 구조를 가집니다

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>문서 제목</title>
  </head>
  <body>
    <!-- 실제 화면에 보이는 내용 -->
  </body>
</html>

<!DOCTYPE html>: HTML 문서임을 선언합니다
브라우저가 문서의 표준 모드를 올바르게 해석하도록 돕는 역할을 합니다
<html lang="ko">: HTML 문서의 시작과 끝을 나타내며, lang 속성으로 문서의 주 언어를 지정할 수 있습니다
예시는 ko로 한국어입니다
<head>: 문서의 정보 (메타데이터), 문자 인코딩, 제목, 스타일, 외부 리소스 링크 등을 정의합니다
<title>: 브라우저 탭에 표시되는 문서의 제목을 지정합니다
<meta charset="UTF-8">: 문자 인코딩을 지정하여 한글 등 다양한 문자가 깨지지 않게 합니다
<body>: 실제 웹 브라우저 화면에 표시되는 모든 콘텐츠 (텍스트, 이미지, 표 등)가 들어가는 영역입니다

HTML의 태그 (tag) 및 요소 (element)

HTML 문서는 다양한 태그 (tag)로 구성됩니다
태그는 요소의 시작과 끝을 표시하는 마크업(markup) 기호입니다
대개 여는 태그 (<태그명>)와 닫는 태그 (</태그명>)로 이루어지며, 그 사이에 내용(contents)이 들어갑니다
예외적으로 <br>, <img>, <hr> 등은 닫는 태그가 없는 단일 태그입니다

아래는 태그에 대한 예시입니다

<p>이것은 문단입니다.</p>
<img src="image.jpg" alt="이미지 설명">

요소 (element)는 웹 브라우저가 문서를 구문 분석한 후에 만든 문서 객체 모델의 내부 표현으로 요소는 태그와 내용을 포함하여 웹 페이지의 구조를 형성합니다
즉, 위의 예시는 태그를 보여주기 위해 적었으나 실제로는 요소의 예시가 더 정확한 표현이라고 볼 수 있습니다

태그의 분류

태그는 블록, 인라인으로 분류가 됩니다
아래는 각각에 대한 특징 및 예시입니다

구분	특징 및 예시
블록	한 줄 전체를 차지, 줄바꿈 발생 `<div>`, `<p>`, `<h1>` 등
인라인	내용만큼만 공간 차지, 줄바꿈 없음 `<span>`, `<a>`, `<img>` 등

속성 (attribute)

속성은 태그에 부가 정보를 추가합니다
예시로 <a href="https://example.com">, <img src="img.png" alt="설명">

속성은 이름="값"의 형태로 작성합니다
대표적인 속성으로는 id, class, style, src, href, alt 등이 있습니다

속성의 예시

아래는 속성들의 예시와 설명을 나타냈습니다

속성	설명
`id`	문서 내에서 유일한 식별자 부여
`class`	여러 요소에 공통 적용, CSS/JS에서 활용
`style`	인라인 스타일 지정
`src`	이미지, 스크립트 등 외부 리소스 경로
`href`	링크 대상 URL 지정
`alt`	이미지 대체 텍스트
`title`	요소에 마우스를 올렸을 때 표시되는 설명
`lang`	문서나 요소의 언어 지정
`data-*`	사용자 정의 데이터 속성 (`data-user`, `data-id` 등과 같이 사용됨)

예시

<img src="cat.jpg" alt="고양이 사진" width="200">
<a href="https://naver.com" target="_blank">네이버로 이동</a>
<div id="main" class="container" style="color:blue;">내용</div>

주요 HTML 태그 종류

아래는 주요 HTML의 태그를 표로 나타냈습니다

태그	설명
`<h1>`~`<h6>`	제목 (Heading) 태그, 숫자가 작을수록 크고 중요
`<p>`	단락 (Paragraph) 태그
`<a>`	하이퍼링크 (Anchor) 태그, `href` 속성 필요
`<img>`	이미지 삽입 태그, `src`, `alt` 속성 필요
`<br>`	줄바꿈 (Break) 태그
`<hr>`	수평선 (Horizontal Rule) 태그
`<ul>`, `<ol>`, `<li>`	순서 없는/있는 목록, 항목 태그
`<div>`	블록 레벨 영역 분할 태그
`<span>`	인라인 영역 분할 태그
`<table>`, `<tr>`, `<th>`, `<td>`	표 (Table) 관련 태그
`<form>`, `<input>`, `<button>`	폼 및 입력 관련 태그
`<header>`, `<nav>`, `<section>`, `<article>`, `<aside>`, `<footer>`	시맨틱 구조 태그

시맨틱: HTML 태그가 어떤 역할을 하는지 실제 의미가 부여되었다는 것을 의미합니다

HTML 동작 방식

사용자가 웹 사이트에 접속할 때 브라우저는 HTML을 해석해 화면에 나타내줍니다
이 과정은 여러 단계로 이뤄집니다

네트워크 요청과 리소스 수신: 사용자가 웹사이트 주소(URL)를 입력하면 브라우저는 서버에 요청을 보내 HTML, CSS, JavaScript 등 웹페이지에 필요한 리소스를 받아옵니다
HTML 파싱 및 DOM 트리 생성: 브라우저는 받은 HTML 파일을 파싱 (해석)하여 DOM (Document Object Model) 트리를 만듭니다
이 과정에서 HTML의 각 태그와 속성, 계층 구조가 트리 형태의 객체로 변환됩니다
CSS 파싱 및 CSSOM 트리 생성: HTML 파싱 중 <link>, <style> 등 CSS 관련 코드를 만나면 CSS 파일도 받아와 파싱합니다
파싱된 CSS는 CSSOM (CSS Object Model) 트리로 변환됩니다
렌더 트리 (Render Tree) 생성: 브라우저는 DOM 트리와 CSSOM 트리를 결합해 렌더 트리를 만듭니다
렌더 트리에는 실제 화면에 표시될 요소만 포함됩니다
레이아웃 (Layout) 계산: 렌더 트리를 기반으로 각 요소의 크기와 위치를 계산합니다
이 과정에서 상대 단위(%, em 등)는 실제 픽셀 단위로 변환됩니다
페인팅 (Paint) 및 합성 (Composite): 레이아웃이 끝나면, 각 요소를 실제 화면의 픽셀로 그리는 페인팅 단계가 진행됩니다
여러 레이어로 나뉘어 그려진 그래픽 요소를 합성해 최종적으로 사용자가 보는 화면이 완성됩니다
자바스크립트 실행: HTML 파싱 중 <script> 태그를 만나면 자바스크립트를 실행합니다
자바스크립트는 DOM이나 CSSOM을 동적으로 변경할 수 있기 때문에 렌더링 과정에 영향을 줄 수 있습니다

결론적으로 HTML은 브라우저에서 단계별로 파싱되고, CSS와 결합해 렌더 트리로 변환된 뒤, 레이아웃과 페인팅 과정을 거쳐 화면에 표시됩니다

HTML 작성 시 주의사항

HTML을 작성시에는 아래의 내용들을 주의하는 것이 좋습니다

태그와 속성은 대소문자를 구분하지 않지만 소문자 사용을 권장합니다
태그는 반드시 열고 닫는 구조를 지키는 것이 좋습니다
속성 값에 불필요한 공백이 들어가면 오류가 발생 가능합니다
들여쓰기와 중첩 구조를 명확히 하여 가독성을 높임

간단한 HTML 실습

아래는 HTML 예시 코드를 간단하게 작성했습니다
아래에 요소들을 여기서 다루지는 않아 잘 모를 수도 있지만
이 코드를 이용해 직접 웹을 띄워보기만 해도 흥미를 느낄 수 있을 것 같아 첨부했습니다!

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <title>나의 첫 웹페이지</title>
  <style>
    body {
      font-family: 'Segoe UI', sans-serif;
      background-color: #eae6f8;
      padding: 20px;
      margin: 0;
    }
    h1 {
      color: #3e2f5b;
    }
    p {
      font-size: 16px;
      color: #4a4a4a;
    }
    ul {
      color: #4a4a4a;
    }
    button {
      padding: 10px 15px;
      background-color: #7c4dff;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    button:hover {
      background-color: #5e35b1;
    }
  </style>
</head>
<body>

  <h1>안녕하세요!!</h1>
  <p>저는 HTML을 공부 중인 웹 개발자 지망생입니다.</p>

  <p>현재 배우고 있는 기술:</p>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>

  <button onclick="showMessage()">응원하기</button>
  <p id="message"></p>

  <script>
    function showMessage() {
      document.getElementById('message').textContent = "화이팅! 🚀 웹 개발자는 멋져요!";
    }
  </script>

</body>
</html>

위의 내용을 복사해 메모장 등에 붙여넣고 원하는 이름.html형태로 저장하면 브라우저에서 실행이 가능합니다
그럼 이제 실행해봅시다!
웹이 나타나는 것을 확인할 수 있네요!
그럼 이번에는 저 응원하기 버튼을 눌러봅시다!
응윈 메시지가 떴네요!
이게 바로 JavaScript를 활용해 동적인 기능을 추가한 것입니다!