📌 HTML 기초 태그부터 구조 잡는 법｜완전 초보도 이해하는 웹 페이지의 첫걸음
안녕하세요, 퍼블리셔 노미입니다 :)
오늘은 HTML을 처음 접하는 분들을 위해 HTML의 기초 태그와 웹 페이지 구조를 잡는 방법에 대해 자세히 설명드릴게요. HTML은 웹의 뼈대라고 불릴 만큼, 웹 페이지를 구성하는 핵심 언어입니다.
처음에는 낯설지만 하나씩 차근히 익히면 누구나 쉽게 시작할 수 있어요!
🔍 HTML이란?
HTML(HyperText Markup Language)는 웹 페이지의 구조를 만드는 마크업 언어입니다.
간단히 말해, 웹 페이지에서 ‘어떤 내용이 어떤 역할을 하는지’를 브라우저에게 알려주는 언어입니다.
- HyperText: 클릭하면 다른 페이지로 이동할 수 있는 링크 개념
- Markup Language: 텍스트에 의미를 부여하는 언어
예를 들어, <h1>은 제목, <p>는 문단, <a>는 링크처럼 역할을 부여할 수 있어요.
📁 HTML 기본 구조
HTML 문서는 기본적으로 아래와 같은 구조를 가지고 있어요.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서 제목</title>
</head>
<body>
<!-- 화면에 보이는 부분 -->
</body>
</html>
<!DOCTYPE html>: HTML5 문서임을 선언<html>: HTML 문서의 시작<head>: 문서의 정보 (제목, 인코딩, 외부 리소스 등)<body>: 실제 화면에 보이는 콘텐츠 영역
✏️ 꼭 알아야 할 HTML 기초 태그
1. 제목 태그 - <h1> ~ <h6>
제목을 표시하는 태그로, <h1>이 가장 큰 제목이고 <h6>이 가장 작은 제목입니다.
<h1>가장 큰 제목</h1>
<h2>그 다음 큰 제목</h2>2. 문단 태그 - <p>
문장을 문단 단위로 나눠줄 때 사용하는 태그입니다.
<p>이것은 문단입니다.</p>3. 줄 바꿈 - <br>
한 줄을 강제로 줄바꿈할 때 사용합니다.
첫 줄입니다.<br>두 번째 줄입니다.4. 굵게, 기울임 - <strong>, <em>
중요한 텍스트에는 <strong> (굵게), <em> (기울임) 태그를 사용합니다.
<strong>중요한 문장입니다</strong>
<em>강조할 부분입니다</em>5. 목록 태그 - <ul>, <ol>, <li>
<ul>: 순서 없는 목록 (●)<ol>: 순서 있는 목록 (1. 2. 3.)
<ul>
<li>사과</li>
<li>바나나</li>
</ul>
6. 링크 태그 - <a>
다른 페이지로 이동하거나 파일을 다운로드할 수 있는 링크를 생성합니다.
<a href="https://www.example.com">여기로 이동</a>7. 이미지 태그 - <img>
웹페이지에 이미지를 표시할 때 사용합니다.
<img src="image.jpg" alt="대체 텍스트">🧱 웹페이지 구조 잡기 - 시멘틱 태그
HTML5에서는 의미 있는 구조를 만들기 위해 시멘틱 태그(Semantic Tag)를 권장합니다.
이런 태그를 사용하면 코드가 더 읽기 쉽고 유지보수도 편리해져요!
자주 사용하는 시멘틱 태그
<header>: 페이지나 섹션의 상단<nav>: 내비게이션 링크<main>: 핵심 콘텐츠<section>: 의미 있는 콘텐츠 영역<article>: 독립적인 콘텐츠 블럭<aside>: 보조 콘텐츠<footer>: 하단 정보
<body>
<header>상단 영역</header>
<nav>메뉴 영역</nav>
<main>
<section>콘텐츠 1</section>
<section>콘텐츠 2</section>
</main>
<footer>하단 정보</footer>
</body>
📦 div와 span의 차이
- <div>: 블록 요소 – 전체 라인을 차지, 박스 구조를 나눌 때 자주 사용
- <span>: 인라인 요소 – 텍스트 안의 일부를 꾸밀 때 사용
<div>전체를 감싸는 박스</div>
<p>문장 중 <span style="color:red">강조</span>할 부분</p>
💡 초보자들이 자주 하는 실수
- 태그를 열었는데 닫지 않음 →
<p>는 꼭</p>로 닫아야 해요 - 중첩 순서가 꼬임 →
<b><i>텍스트</i></b>식으로 순서를 지켜야 해요 - alt 속성을 생략한 이미지 → 시각장애인이나 검색엔진을 위해 꼭
alt작성
🎨 다음 단계는 CSS로 스타일 입히기!
HTML로 구조를 잘 만들었다면, 이제 CSS로 예쁘게 꾸미는 단계로 넘어가면 됩니다.
CSS에서는 색상, 배경, 폰트, 간격, 레이아웃 등을 설정할 수 있어요.
→ 다음 포스팅에서는 CSS 기초와 선택자, 박스 모델을 다룰 예정이니 꼭 이어서 봐주세요!
📚 마무리하며 – HTML 학습 팁
- 처음엔 코드를 직접 따라 써보는 것이 가장 중요해요!
- 브라우저에서 코드 결과를 바로 확인하며 이해도를 높이세요.
- 무작정 외우기보단 ‘왜 이렇게 작성하는가’를 생각해보세요.
- 실습용 에디터 추천: CodePen, JSFiddle
HTML은 웹 개발의 첫걸음입니다.
기초를 탄탄히 다지면 그 위에 멋진 웹페이지를 만들 수 있어요. 앞으로도 기초부터 실전까지 차근차근 알려드릴게요! ✨
#HTML기초 #HTML태그정리 #웹퍼블리싱입문 #시멘틱태그 #HTML5구조 #퍼블리셔노미
'차근차근' 카테고리의 다른 글
| fetch API로 폼 데이터 전송하기｜JavaScript로 배우는 기본부터 실전까지 (0) | 2025.04.22 |
|---|---|
| JavaScript로 폼 유효성 검사하는 법｜기초 문법부터 실전 예제까지 (0) | 2025.04.21 |
| HTML 폼과 CSS로 만드는 실전 입력 폼 완전 정복｜회원가입부터 로그인까지 (0) | 2025.04.20 |
| 반응형 웹 디자인 완전 정복｜모바일부터 데스크탑까지 한 번에 대응하는 퍼블리싱 가이드 (0) | 2025.04.19 |
| CSS 기초부터 시작하는 웹 스타일링 완전 정복｜퍼블리셔 노미의 입문자용 스타일 가이드 (0) | 2025.04.18 |
