초보자를 위한 HTML 튜토리얼: 오늘 첫 웹페이지 만들기
Source: Dev.to
TL;DR
대부분의 초보자들은 모든 웹페이지를 하나로 묶는 단 하나의 구조적 규칙을 이해하지 못한 채 HTML을 작성하는 데 시간을 허비합니다. 이 가이드는 필수 태그들을 살펴보고, 왜 존재하는지, 그리고 레고처럼 조합하는 방법을 안내합니다 — 하지만 페이지가 실제로 모바일에서 work하도록 만드는 요령은? 그 내용은 더 아래에 숨겨져 있으며, 대부분의 튜토리얼은 이를 완전히 건너뛰고 있습니다.
초보자들이 HTML에 어려움을 겪는 이유 (생각과는 다릅니다)
솔직히 말하자면, HTML은 어렵지 않습니다. 하지만 보통 가르치는 방식은? 정말 가혹합니다.
- 대부분의 초보자용 자료는 첫날에 50개의 태그를 한꺼번에 던져놓고 사전처럼 외우길 기대합니다.
- 결국 이해하지 못한 코드를 복사하게 되고, 뭔가가 맞지 않으며, 조용히 웹 개발이 자신에게 맞지 않는 걸까 생각하게 됩니다.
그것은 당신에게 맞는 것입니다. 단지 더 좋은 출발점이 필요할 뿐입니다.
초보자들이 HTML에 어려움을 겪는 진짜 이유는 태그 자체가 아니라, 태그가 왜 존재하고 서로 어떻게 소통하는지 모르는 것입니다. 그 원리를 이해하면 나머지는 자연스럽게 따라옵니다.
지금 바로 해결해 봅시다.
실제 HTML이란?
HTML은 HyperText Markup Language의 약자입니다. 화려한 이름은 잊으세요. 이렇게 생각하면 됩니다:
- 웹 페이지가 집이라면, HTML은 벽돌, 벽, 그리고 방입니다.
- CSS는 벽을 칠하고 가구를 고릅니다.
- JavaScript는 조명을 켜고 끕니다.
HTML은 구조입니다. 그게 전부입니다. 구조는 언제나 가장 먼저 만드는 것입니다.
모든 HTML 페이지는 태그로 이루어져 있습니다 — <p>와 같이 꺾쇠 괄호 안에 라벨이 붙은 작은 명령어입니다. 대부분의 태그는 쌍을 이룹니다: 시작 태그와 종료 태그.
<p>
This is a paragraph.
</p><p>가 시작하고, </p>가 종료합니다. 그 사이의 모든 것이 내용입니다. 간단하죠.
모든 HTML 페이지에 필요한 골격
헤드라인이나 단락을 하나라도 쓰기 전에, 모든 HTML 페이지는 다음과 같은 골격으로 시작합니다:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
</body>
</html>구성 요소
<!DOCTYPE html>– 브라우저에게 최신 HTML5 규칙을 사용하도록 알려줍니다. 이를 생략하면 브라우저가 추측하게 되며, 대부분 잘못 추측합니다.<html lang="en">– 페이지 전체를 감싸는 요소입니다.lang="en"은 검색 엔진과 스크린 리더에게 콘텐츠의 언어를 알려주어 SEO에 중요합니다.<head>– 보이지 않는 제어실입니다.<head>안에 있는 내용은 페이지에 표시되지 않지만, 뒤에서 모든 것을 제어합니다:<meta charset="UTF-8">– 특수 문자(é, ñ, 😄)가 올바르게 표시되도록 보장합니다.<meta name="viewport" ...>– 초보자들이 가장 많이 놓치는 부분입니다. 이 태그가 없으면 페이지가 확대된 채로 보이거나 휴대폰에서 깨져 보입니다. 세 줄의 코드만으로 사이트를 모바일 친화적으로 만들 수 있습니다.<title>– 브라우저 탭과 Google 검색 결과에 표시되는 텍스트입니다.
<body>– 실제 작업이 이루어지는 영역입니다. 눈에 보이는 모든 콘텐츠(헤드라인, 단락, 이미지, 링크 등)는 여기 안에 위치합니다.
대부분 사용할 태그 90 %의 시간
당신이 실제로 사용할 태그만 기억하면 됩니다.
헤딩 — 당신의 광고판 텍스트
<h1>This is your biggest headline</h1>
<h2>This is a section title</h2>
<h3>This is a subsection</h3>헤딩은 <h1>(가장 큼)부터 <h6>(가장 작음)까지 있습니다. 일반적인 규칙: 페이지당 <h1>은 하나만 사용하세요. 구글도 이를 중요하게 봅니다.
단락 — 당신의 텍스트 블록
<p>
This is where you write your content. Each paragraph gets its own tag.
</p>링크 — 당신의 텔레포터
<a href="https://drivecoding.com" target="_blank">Visit Drive Coding</a>href– 목적지 URL.target="_blank"– 새 탭에서 링크를 엽니다 (매우 편리합니다).
이미지 — 당신의 눈요기
<img src="path/to/image.jpg" alt="A description of the photo"><img>는 자체 종료 태그이며, 닫는 태그가 필요 없습니다.- 항상
alt텍스트를 포함하세요. 시각 장애인 사용자에게 도움이 되며 또한 SEO를 향상시킵니다.
리스트 — 당신의 정리된 트레이
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Learn HTML first</li>
<li>Then CSS</li>
<li>Then JavaScript</li>
</ul>초보자 90 %가 저지르는 실수
대부분의 초보자는 HTML을 마치 텍스트 벽처럼 작성합니다—구조도 없고, 논리도 없고, 태그가 여기저기 흩어져 있죠. 그래서 페이지가 무작위이고 지저분하게 느껴지는 이유를 궁금해합니다.
해결책은 의미론적 HTML입니다—내용이 무엇을 의미하는지 설명하는 태그를 사용하고, 단순히 어떻게 보이는지만을 위한 태그가 아닙니다.
<article>
<h1>My Blog Post Title</h1>
<section>
<h2>Section Title</h2>
<p>Content goes here...</p>
</section>
</article><header>, <nav>, <section>, <article>, <aside>, <footer> 같은 태그는 브라우저와 검색 엔진에 각 콘텐츠 조각이 어떤 역할을 하는지 정확히 알려 주어 접근성, SEO, 유지 보수성을 향상시킵니다.
핵심 요점
- 모든 HTML 페이지는 전체 골격이 필요합니다:
<!DOCTYPE html>,<html>,<head>,<body>. - 뷰포트 메타 태그는 선택 사항이 아닙니다 — 이를 생략하면 모바일 사용자가 불편해집니다.
- 실제 무언가를 만들기 위해서는 약 10개의 태그만 있으면 충분합니다.
- 의미론적 태그는 단순히 모범 사례가 아니라—SEO에 직접적인 영향을 줍니다.
- 이미지의
alt속성은 두 마리 토끼를 잡는 역할을 합니다: 접근성 및 검색 순위.
더 많은 예시와 실습형 프로필 카드 프로젝트, 의미론적 HTML과 비의미론적 HTML의 전체 비교를 포함한 완전한 가이드를 보고 싶다면 Drive Coding에서 전체 글을 확인하세요:
HTML 튜토리얼 for Beginners – HTML 기본에 대한 완전한 소개
원본 게시 위치
https://drivecoding.com/html-tutorial-for-beginners-your-complete-introduction-to-html-basics/