[Web UI 기초 #2] 웹 개발의 첫걸음, HTML을 알아보자

gobugi306 2025. 5. 27. 13:14

🔗 이전 글…

[Web UI 기초 #1] 웹사이트는 어떻게 만들어질까? HTML부터 시작하는 이유

🟡 [시작하기 전에] 웹사이트는 어떻게 만들어질까?“웹 개발을 배운다는데… HTML이 도대체 뭔데?”처음 접하는 사람이라면 누구나 가질 수 있는 의문입니다.웹사이트가 어떻게 만들어지는지,

sesoc.tistory.com

📌 먼저 알아둘 용어

- 태그(Tag):

<h1> <p>처럼 열고 닫는 꺾쇠 기호로 감싸진 명령어.

화면에 표시할 콘텐츠를 담는 박스.
- 속성(Attribute):

<img src="image.jpg">처럼 태그에 정보를 추가해 주는 것.

박스에 붙여둔 설명 스티커(라벨).
- 마크업(Markup):

정보를 구조화하고 표시하는 방식. HTML은 마크업 언어.

설명 없이 나열된 내용에 포장과 라벨을 붙여 정리하는 과정.

🟠 웹의 뼈대를 만드는 언어, HTML

웹사이트를 본 적이 있다면 사실상 HTML을 본 것입니다. 우리가 웹에서 보는 텍스트, 이미지, 버튼, 입력창은 전부 HTML 태그로 구조화되어 있기 때문입니다.

HTML은 HyperText Markup Language의 약자로, 말 그대로 하이퍼텍스트 문서를 마크업(구조화)하는 언어라는 의미를 가집니다.
여기서 중요한 점은 _‘프로그래밍 언어’가 아니라 ‘마크업 언어’_라는 것입니다. HTML은 계산을 하거나 조건문을 쓰는 것이 아니라, 정보를 표현하고 정리하는 역할을 합니다.

✅ 하이퍼텍스트(Hypertext)란 무엇인가?

Hyper + Text

Text: 문서, 글

Hyper: "확장된", "넘어가는"

→ 단순히 읽는 글을 넘어서, 다른 문서로 ‘연결되는’ 글
→ 웹에서 <a href="...">는 하이퍼텍스트를 대표적으로 구현한 태그입니다.

🟠 왜 HTML이 중요한가?

HTML은 단순한 웹 페이지를 넘어서, 모든 프론트엔드 개발의 기반이 됩니다.
CSS가 옷을 입히고, JavaScript가 움직임을 만든다면, HTML은 그 몸체 자체입니다.

따라서, HTML을 제대로 이해하고 의미 있게 마크업 하는 습관을 들이는 것이 앞으로의 개발 실력을 좌우하게 됩니다.

🟢 HTML 작성의 기본 원칙 4가지

웹 페이지를 단순히 ‘보이게’ 만드는 것과 ‘제대로’ 만드는 것은 본질적으로 다릅니다.
실무에서도 지속적으로 요구되는 HTML 작성의 핵심 원칙은 다음과 같습니다:

✅ 1. 의미 있는 태그 사용 (Semantic Markup)

단순히 <div>만 사용하는 대신, header, main, nav, section, article 등 의미가 담긴 태그를 적극 활용해야 합니다.
→ 접근성 향상 + 검색엔진 최적화(SEO)에 유리합니다.

✅ 2. 문서 구조의 기본 템플릿

<!DOCTYPE html> <!-- 문서 유형 선언 -->
<html lang="ko"> <!-- HTML 문서의 루트 요소 및 언어 설정 -->
<head>
  <meta charset="UTF-8"> <!-- 문자 인코딩 설정 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 반응형 웹을 위한 뷰포트 설정 -->
  <title>웹 페이지 제목</title> <!-- 브라우저 탭에 표시될 제목 -->
  <link rel="stylesheet" href="style.css"> <!-- 외부 CSS 파일 연결 -->
  <script src="script.js"></script> <!-- 외부 JavaScript 파일 연결 -->
</head>
<body>
  <header>…</header> <!-- 페이지 헤더 -->
  <main>…</main> <!-- 주요 콘텐츠 영역 -->
  <footer>…</footer> <!-- 페이지 푸터 -->
</body>
</html>

<head>: 메타 정보, 외부 리소스 연결
<body>: 실제 화면에 보이는 콘텐츠

→ 아래는 이 구조를 시각적으로 표현한 트리입니다:

<html>
├── <head>
│   ├── <meta>
│   ├── <title>
│   ├── <link>
│   └── <script>
└── <body>
    ├── <header>
    ├── <main>
    └── <footer>

✅ 3. 필수 속성 적극 활용

<img>에는 반드시 alt 속성을,
<a>에는 title 속성,
<input> 등 폼 요소에는 label 연결을 포함해야 합니다.

→ 이는 접근성 개선, 검색 최적화, UX 향상에 직접적인 영향을 줍니다.

✅ 4. 문법과 계층 구조에 유의

태그는 반드시 닫아야 하며, 속성 값은 큰따옴표 "로 감싸야 합니다.
부모-자식 관계를 명확히 하여 중첩 구조를 올바르게 구성해야 합니다.

아래는 기본 골격을 시각적으로 나타낸 예입니다:

+--------------------------------------+
|             <html>                  |
|   +----------------------------+    |
|   |         <head>             |    |
|   |   메타, 제목, 외부 리소스 연결   |
|   +----------------------------+    |
|   +----------------------------+    |
|   |         <body>             |    |
|   |   <header> <main> <footer> |    |
|   +----------------------------+    |
+--------------------------------------+

🔵 마무리: “HTML은 간단하지만 깊이 있다”

HTML은 누구나 쉽게 배울 수 있지만, 접근성, 구조적 설계, SEO까지 고려하면 결코 단순한 기술은 아닙니다.
기초를 제대로 다지는 것이 앞으로의 웹 개발 실력을 좌우하게 될 것입니다.

🔗 다음 글에서는…

HTML에서 가장 많이 사용하는 기본 태그들과 실제 마크업 예시를 통해 실습에 들어갈 예정입니다.

[Web UI 기초 #3] 내 첫 HTML 문서 만들기 - 기본 구조부터 핵심 태그까지

HTML의 기본 개념을 배웠다면, 이제 가장 중요한 단계는 '직접 써보는 것'입니다. 단순히 머릿속으로 이해한 것과 손으로 입력해보며 체득하는 감각은 완전히 다릅니다. 실습을 통해 감을 잡고, "

sesoc.tistory.com