차근차근

HTML 기초 태그부터 구조 잡는 법｜완전 초보도 이해하는 웹페이지 기본 가이드

디어노미 2025. 4. 17. 17:08
반응형

📌 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구조 #퍼블리셔노미

반응형
저작자표시 비영리 변경금지 (새창열림)