🧱 HTML이란? 웹의 뼈대를 만드는 언어!
| HTML이란 무엇인가요?
**HTML (HyperText Markup Language)**는 웹사이트를 구성하는 기초 언어입니다. 쉽게 말해, HTML은 웹페이지의 뼈대를 만드는 역할을 합니다.
🧠 비유하자면?
HTML은 웹이라는 공연 무대의 '세트'를 만드는 일과 같습니다. HTML은 무대와 배경을 세우는 '무대 장치', CSS는 조명과 색감을 더하는 '무대 연출', JavaScript는 배우들이 움직이고 대사를 하는 '공연의 연기'에 해당합니다. 이 세 가지가 조화를 이뤄야 비로소 완성도 있는 웹 페이지가 만들어집니다.
HTML은 **내용(Content)**을 담당
CSS는 **스타일(Design)**을 담당
JavaScript는 **동작(Interaction)**을 담당
| HTML의 기본 구조 이해하기
HTML 문서는 기본적으로 웹 페이지를 구성하는 최소한의 구조를 가지고 있어야 브라우저가 이를 올바르게 해석할 수 있습니다.
이 구조는 마치 책의 표지, 목차, 본문처럼 각 영역이 정해져 있습니다. 아래는 가장 기본적인 HTML 문서의 구성 예시입니다.
[예시]
<!DOCTYPE html> <!-- HTML5 문서 선언 -->
<html> <!-- HTML 문서의 시작 -->
<head> <!-- 문서 정보가 담기는 부분 -->
<title>나의 첫 웹페이지</title> <!-- 브라우저 탭에 표시될 제목 -->
</head>
<body> <!-- 사용자에게 보이는 실제 콘텐츠 영역 -->
<h1>안녕하세요!</h1> <!-- 가장 큰 제목 -->
<p>이것은 HTML의 시작입니다.</p> <!-- 문단 텍스트 -->
</body>
</html> <!-- HTML 문서의 끝 -->
[출력결과]
🔍 각 부분 설명
-
<!DOCTYPE html>: HTML5 문서임을 선언합니다. 브라우저는 이 선언을 보고 해당 문서를 최신 HTML 형식으로 해석합니다. -
<html> ~</html>: 전체 HTML 문서의 시작과 끝을 감싸는 태그입니다. 이 안에 모든 요소가 포함됩니다. -
<head> ~ </head>: 웹 페이지에 대한 정보(메타데이터)를 담는 영역으로, 제목, 문자 인코딩, 외부 리소스 연결 등이 들어갑니다. -
<body> ~ </body>: 사용자에게 실제로 보여지는 콘텐츠가 위치하는 영역입니다. 텍스트, 이미지, 버튼 등 페이지의 실질적인 요소가 이 안에 포함됩니다.
| HTML 태그는 어떤 역할을 하나요?
HTML은 **"태그(tag)"**를 통해 콘텐츠의 의미와 구조를 정의합니다. 여기서는 웹에서 자주 사용되는 대표적인 태그 몇 가지를 간단히 소개합니다.
📌 주요 태그와 예시
1) 제목 태그 <h1>~<h6>
: 태그 안 숫자에 따라 글씨 크기가 변경 <h1> h1 크기 입니다.</h1>
<h2> h2 크기 입니다.</h2>
<h3> h3 크기 입니다.</h3>
<h4> h4 크기 입니다.</h4>
<h5> h5 크기 입니다.</h5>
<h6> h6 크기 입니다.</h6>
💡 출력 결과:
2) 문단 태그 <P>
: 문단은 항상 새 줄에서 시작하고, 문단 앞/뒤 여백을 둔다.
문단태그 없이 그냥 쓴 글 1
문단태그 없이 그냥 쓴 글 2
문단태그 없이 그냥 쓴 글 3
<P>문단태그 쓴 글 1</P>
<P>문단태그 쓴 글 2</P>
<P>문단태그 쓴 글 3</P>
💡 출력 결과:
3) 링크 태그 <a>
: 화면 표시 될 글자(or 버튼, 이미지 등) 링크를 연결 할 부분에 <a>태그를 감싸고, 관련 링크는 <a>
태그 안에 링크 정보를 적어준다.
<a href="https://www.daldallab.com">여기를 클릭하세요</a>
👉 
☞ "여기를 클릭하세요"를 클릭하면 링크 URL로 페이지로 이동
4) 이미지 태그 <img>
: img 태그로 logo.png 이미지 파일을 불러와 페이지에서 이미지 표시, alt속성은 이미지를 알아 볼 수
있게 텍스트로 표시하는 역할 (블로그에 이미지 올릴 때, alt 속성 표현해 주는 것이 SEO 최적화 도움)
<img src="logo.png" alt="로고 이미지">※ logo.png 파일
💡 출력 결과:
5) 리스트 태그 <ul>, <li> (순서 없는 목록)
<ul>
<li>항목 1</li>
<li>항목 2</li>
</ul>
💡 출력 결과:
<ol>, <li> (순서 있 목록)<ol>
<li>항목 1</li>
<li>항목 2</li>
</ol>
🧠 비유하자면?
태그는 문서 편집기의 스타일 버튼과 비슷합니다. '제목'을 누르면 크고 굵은 글자가 되듯, <h1> 태그를 쓰면 브라우저가 알아서 큰 글씨로 보여줍니다.과 비슷합니다. '제목'을 누르면 크고 굵은 글자가 되듯, <h1> 태그를 쓰면 브라우저가 알아서 큰 글씨로 보여줍니다.
💡추가실습
지금까지 html 맛보기로 보여 드렸습니다. 추가로 더 실습을 원하시면, 아래 사이트(W3SCHOOL)에서 참고 하시면 됩니다.
- 추가실습 페이지 보러가기 👉 클릭
📦 웹사이트는 HTML 없이 가능한가요?
아닙니다! 아무리 멋진 기능이 있어도 HTML이 없다면 웹페이지는 존재할 수 없습니다. 웹사이트의 모든 콘텐츠는 HTML을 통해 브라우저에 표시됩니다.
| HTML을 알아야 하는 진짜 이유
HTML은 웹사이트의 뿌리이자 시작점입니다.
만약에 웹으로 무언가를 하고 싶다면, HTML은 필수입니다!
시작이 어렵지, 시작하면 쉽게 배울 수 있습니다.
| 자주 묻는 질문 (Q&A)
Q1. HTML만으로 웹사이트 만들 수 있나요?
A. 가능합니다. 하지만 정적 콘텐츠만 가능하며, 디자인이나 동적 기능은 CSS, JavaScript를 추가해야 합니다.
Q2. HTML 배우기 어렵지 않나요?
A. 전혀 어렵지 않습니다. 영어 알파벳과 기본 문법만 알아도 바로 시작할 수 있어요.
Q3. HTML 공부는 어디서부터 시작하나요?
A. <!DOCTYPE html>부터 따라 치며 구조를 익히는 것이 가장 좋습니다. W3Schools, MDN 등이 좋은 출발점입니다.
Q4. HTML을 잘 하면 어떤 걸 할 수 있나요?
A. 웹페이지 만들기, 블로그 커스터마이징, 마케팅 페이지 제작, 이메일 템플릿 작성 등 다양하게 활용됩니다.
Q5. HTML과 SEO는 어떤 관계가 있나요?
A. 태그 구조가 올바르면 검색엔진이 콘텐츠를 잘 이해하게 되어 SEO 최적화에 큰 도움이 됩니다!
