안녕하세요! 😊 오늘은 HTML 기초에 대해 차근차근 알아볼 거예요.
HTML이 처음이라면 "도대체 태그가 뭐야?", "어떻게 웹 페이지를 만들지?" 이런 궁금증이 많을 텐데요! 걱정 마세요. 처음부터 천천히 쉽게 설명해 드릴게요.
자, 이제 같이 시작해볼까요? 💡
1️⃣ HTML이 뭐야?
HTML은 HyperText Markup Language의 약자로, 쉽게 말하면 웹 페이지를 만드는 기본 언어예요.
웹사이트에서 우리가 보는 텍스트, 이미지, 버튼, 링크 등은 전부 HTML로 만들어져 있어요.
📌 한마디로 HTML은 웹 페이지의 뼈대라고 생각하면 돼요!
그 위에 CSS(디자인)와 JavaScript(기능 추가)를 얹어서 멋진 웹사이트를 만들 수 있죠.
2️⃣ HTML 기본 문서 구조
HTML 문서를 만들려면 기본적인 문서 구조(틀)부터 알고 있어야 해요.
아래 코드를 보면 HTML 문서가 어떻게 생겼는지 알 수 있어요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 기초 배우기</title>
</head>
<body>
<h1>안녕하세요! HTML을 배워볼까요?</h1>
<p>이제 HTML의 기본 구조를 알아봅시다!</p>
</body>
</html>
✅ 이제 하나씩 살펴볼게요!
| 태그 | 설명 |
| <!DOCTYPE html> | "이 문서는 HTML5 문서야!"라고 선언하는 역할 |
| <html> | HTML 문서의 시작과 끝을 감싸는 태그 |
| <head> | 웹사이트의 정보 (제목, 글자 인코딩, CSS, JavaScript 등) |
| <title> | 웹 브라우저 탭에 표시될 제목 |
| <body> | 화면에 보이는 내용 (텍스트, 이미지, 버튼 등) |
📌 중요한 포인트!
모든 HTML 요소(태그)는 열리는 태그(<태그명>)와 닫히는 태그(</태그명>)로 구성돼요!
예를 들면, <h1>안녕하세요!</h1> 이렇게요!
3️⃣ HTML에서 가장 많이 쓰이는 기본 태그!
이제 HTML에서 가장 중요한 태그들을 살펴볼까요? 💡
🔹 제목 태그 (<h1> ~ <h6>)
HTML에서 제목을 표시할 때 사용하는 태그예요. <h1>이 가장 크고 <h6>이 가장 작아요.
<h1>제목 1 (가장 큼)</h1>
<h2>제목 2</h2>
<h3>제목 3</h3>
<h4>제목 4</h4>
<h5>제목 5</h5>
<h6>제목 6 (가장 작음)</h6>✅ Tip!
검색 엔진(네이버, 구글)은 제목을 중요하게 생각해요!
그래서 <h1> 태그에는 웹 페이지의 가장 중요한 제목을 넣어야 해요.
🔹 문단(텍스트) 태그 (<p>)
HTML에서 문장을 표시할 때 <p> 태그를 사용해요.
<p>이것은 단락을 나타내는 태그입니다.</p>
<p>HTML을 배우면 웹사이트를 만들 수 있어요!</p>✅ <p> 태그를 사용하면 글이 자동으로 줄 바뀜이 돼요!
🔹 링크 태그 (<a>)
웹 페이지에서 다른 페이지로 이동하려면 <a> 태그를 사용해요.
<a href="https://www.naver.com" target="_blank">네이버로 이동</a>
| 속성 | 설명 |
| href="URL" | 이동할 주소 |
| target="_blank" | 새 창에서 링크 열기 |
✅ Tip!
- target="_blank"를 쓰면 새 창에서 열림
- 링크를 누르면 바로 다른 사이트로 이동 가능
🔹 이미지 태그 (<img>)
웹사이트에 이미지를 넣으려면 <img> 태그를 사용해요.
| 속성 | 설명 |
| src | 이미지 경로 (URL 또는 파일명) |
| alt | 이미지 설명 (접근성 향상 & 이미지 로딩 실패 시 표시됨) |
| width, height | 크기 조절 가능 |
✅ Tip!
이미지가 보이지 않을 때 alt 속성을 활용하면 SEO에도 좋아요!
4️⃣ HTML에서 사용자 입력 받기 (폼 요소)
웹사이트에서 사용자로부터 입력을 받을 때 <form>을 사용해요.
예를 들어, 이름과 이메일을 입력받는 폼을 만들 수 있어요.
<form action="/submit" method="post">
<label for="name">이름:</label>
<input type="text" id="name" name="name" required>
<label for="email">이메일:</label>
<input type="email" id="email" name="email" required>
<button type="submit">제출</button>
</form>| 태그 | 설명 |
| <form> | 입력을 받는 폼 생성 |
| <input> | 입력 필드 (text, email, password 등) |
| <label> | 입력 필드 설명 |
| <button> | 버튼 생성 |
✅ Tip!
- required 속성을 넣으면 필수 입력 필드가 돼요!
- type="email"을 쓰면 이메일 형식이 맞는지 자동 체크해 줘요.
📌 마무리 & 다음 단계는?
오늘은 HTML의 기본 개념과 태그들에 대해 알아봤어요!
이제 여러분은 웹 페이지의 기본 구조를 이해할 수 있게 되었어요. 🎉
📢 다음 글에서는?
👉 HTML의 핵심 태그 심화 학습! (div, span, table, form 태그 자세히 알아보기)
👉 HTML과 CSS 연결하기! (디자인 추가하는 방법 알아보기)
[HTML 핵심 태그] div, span, table, form 태그 자세히 알아보기
안녕하세요! 😊 지난번에 HTML의 기본 개념과 기초 태그들을 배웠어요. [HTML 기초] 태그 구조와 활용법 정리 🚀안녕하세요! 😊 오늘은 HTML 기초에 대해 차근차근 알아볼 거예요.HTML이 처음이라
it-afternoon.tistory.com
'개발 공부 > 기타' 카테고리의 다른 글
| [CSS Grid 완벽 정리] 강력한 레이아웃 시스템 grid 배우기! (0) | 2025.03.24 |
|---|---|
| [반응형 웹 디자인] media query 활용법 & 모바일 대응 완벽 가이드! (0) | 2025.03.21 |
| [HTML과 CSS 레이아웃 완전 정복] display, position, flexbox 활용법 총정리! (0) | 2025.03.20 |
| [HTML과 CSS] HTML과 CSS 연결하기! 예쁜 웹페이지 만드는 법 (0) | 2025.03.19 |
| [HTML 핵심 태그] div, span, table, form 태그 자세히 알아보기 (0) | 2025.03.18 |