티스토리 뷰

웹제작 강의

[웹개발강의] HTML 대표 태그 30선 – 초보자용 설명과 예시

Coding Life 2025. 4. 9. 10:35
반응형

HTML 태그 30가지를 초보자도 바로 이해하고 사용할 수 있도록
✔️ 기능 설명 + 예시 코드 + 결과 설명 형식으로 정리해드릴게요!

 

🎯 HTML 대표 태그 30선 – 초보자용 설명과 예시

🔤 기본 구조 관련

  1. <!DOCTYPE html>
    HTML5 문서임을 선언하는 태그 (맨 위에 필수)
<!DOCTYPE html>
  1. <html>
    전체 HTML 문서를 감싸는 최상위 태그
<html> ... </html>
  1. <head>
    문서의 정보(제목, 스타일, 메타 등)를 담음
<head> ... </head>
  1. <title>
    브라우저 탭에 표시되는 제목
<title>내 웹페이지</title>
  1. <body>
    화면에 보이는 실제 콘텐츠 영역
<body> ... </body>

📝 텍스트 및 제목

  1. <h1> ~ <h6>
    제목 태그 (h1이 가장 크고 중요함)
<h1>큰 제목</h1>
<h3>작은 제목</h3>
  1. <p>
    단락(문단)을 만드는 태그
<p>이것은 문단입니다.</p>
  1. <br>
    줄바꿈 (닫는 태그 없음)
Hello<br>World
  1. <hr>
    수평선 (구분선) 삽입
<hr>
  1. <strong> / <b>
    굵은 글씨 (의미 있는 강조는 strong)
<strong>중요한 내용</strong>
<b>굵은 텍스트</b>
  1. <em> / <i>
    기울임 글씨 (의미 있는 강조는 em)
<em>강조</em>
<i>기울임</i>

📷 이미지와 링크

  1. <a>
    하이퍼링크 (다른 페이지로 이동)
구글 가기
  1. <img>
    이미지 삽입 (닫는 태그 없음)
<img src="cat.jpg" alt="고양이" width="200">

🧾 목록 관련

  1. <ul>
    순서 없는 목록
<ul>
  <li>사과</li>
  <li>바나나</li>
</ul>
  1. <ol>
    순서 있는 목록
<ol>
  <li>첫째</li>
  <li>둘째</li>
</ol>
  1. <li>
    목록 항목 (ul 또는 ol 안에 사용)
<li>항목 1</li>

📦 구조 및 컨테이너

  1. <div>
    레이아웃 구획 (블록 요소)
<div style="background: lightblue;">영역 나눔</div>
  1. <span>
    글자 꾸미기용 인라인 영역
<span style="color:red;">강조 텍스트</span>

📋 표 관련

  1. <table>
    표 전체 구조
<table> ... </table>
  1. <tr>
    표의 행(Row)
<tr> ... </tr>
  1. <td>
    표의 셀 (데이터)
<td>내용</td>
  1. <th>
    표의 제목 셀 (굵은 글씨)
<th>제목</th>

🧍 사용자 입력 (폼)

  1. <form>
    사용자 입력을 받는 폼 영역
<form action="submit.php"> ... </form>
  1. <input>
    텍스트 박스, 체크박스 등 (닫는 태그 없음)
<input type="text" placeholder="이름">
  1. <label>
    입력 필드 설명
<label for="name">이름</label>
<input id="name" type="text">
  1. <textarea>
    여러 줄 텍스트 입력
<textarea rows="4" cols="30"></textarea>
  1. <button>
    버튼 만들기
<button>전송</button>
  1. <select> / <option>
    드롭다운 메뉴
<select>
  <option>옵션1</option>
  <option>옵션2</option>
</select>

🧪 기타 유용한 태그

  1. <code>
    코드 텍스트 표시 (고정폭 폰트)
<code>console.log("Hello")</code>
  1. <script>
    JavaScript 코드 삽입
<script>
  alert("안녕하세요!");
</script>

✅ 정리 요약

  • HTML은 구조를 짜는 언어!
  • <div>, <span> 등은 레이아웃 용도
  • <input>, <form> 등은 사용자 입력용
  • <a>, <img> 등은 링크/이미지 삽입
  • <h1>, <p>, <ul> 등은 콘텐츠 표시용

 

HTML 30개 주요테그에 대한 설명자료를 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 대표 태그 30선</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
  <style>
    body {
      background-color: #f8f9fa;
      font-family: 'Noto Sans KR', sans-serif;
    }

    .tag-card {
      background-color: #ffffff;
      border: 1px solid #dee2e6;
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }

    .code-block {
      background-color: #212529;
      color: #f8f9fa;
      padding: 10px;
      border-radius: 5px;
      font-family: monospace;
      font-size: 0.9rem;
      margin-top: 10px;
      white-space: pre-wrap;
    }
  </style>
</head>
<body>
  <div class="container py-5">
    <h1 class="text-center mb-4">📘 HTML 대표 태그 30선 실습 가이드</h1>
    <p class="text-center fs-5 mb-5">설명 + 예시를 보며 직접 배워보세요!</p>

    <!-- Sample 태그들 (5개씩 나누어 구조 반복) -->
    <div class="tag-card">
      <h4>&lt;h1&gt; ~ &lt;h6&gt; - 제목 태그</h4>
      <p>문서의 제목을 표현해요. 숫자가 작을수록 크고 중요해요.</p>
      <div class="code-block">
&lt;h1&gt;제목 1&lt;/h1&gt;
&lt;h3&gt;제목 3&lt;/h3&gt;
&lt;h6&gt;제목 6&lt;/h6&gt;
      </div>
      <div>
        <h1>제목 1</h1>
        <h3>제목 3</h3>
        <h6>제목 6</h6>
      </div>
    </div>

    <div class="tag-card">
      <h4>&lt;p&gt; - 문단</h4>
      <p>글의 단락을 만들 때 사용해요.</p>
      <div class="code-block">
&lt;p&gt;이것은 문단입니다.&lt;/p&gt;
      </div>
      <p>이것은 문단입니다.</p>
    </div>

    <div class="tag-card">
      <h4>&lt;a&gt; - 링크</h4>
      <p>다른 웹 페이지로 연결되는 하이퍼링크를 만들어요.</p>
      <div class="code-block">
&lt;a href="https://www.google.com"&gt;구글로 이동&lt;/a&gt;
      </div>
      <a href="https://www.google.com" target="_blank">구글로 이동</a>
    </div>

    <div class="tag-card">
      <h4>&lt;img&gt; - 이미지</h4>
      <p>웹페이지에 이미지를 표시해요.</p>
      <div class="code-block">
&lt;img src="https://via.placeholder.com/150" alt="예시 이미지"&gt;
      </div>
      <img src="https://via.placeholder.com/150" alt="예시 이미지" />
    </div>

    <div class="tag-card">
      <h4>&lt;ul&gt; &lt;ol&gt; &lt;li&gt; - 목록</h4>
      <p>순서 없는 목록과 순서 있는 목록을 만들어요.</p>
      <div class="code-block">
&lt;ul&gt;
  &lt;li&gt;사과&lt;/li&gt;
  &lt;li&gt;바나나&lt;/li&gt;
&lt;/ul&gt;
&lt;ol&gt;
  &lt;li&gt;첫째&lt;/li&gt;
  &lt;li&gt;둘째&lt;/li&gt;
&lt;/ol&gt;
      </div>
      <ul>
        <li>사과</li>
        <li>바나나</li>
      </ul>
      <ol>
        <li>첫째</li>
        <li>둘째</li>
      </ol>
    </div>

    <div class="tag-card">
      <h4>&lt;input&gt; &lt;button&gt; - 입력과 버튼</h4>
      <p>사용자로부터 입력을 받거나 클릭 동작을 만듭니다.</p>
      <div class="code-block">
&lt;input type="text" placeholder="이름 입력"&gt;
&lt;button&gt;제출&lt;/button&gt;
      </div>
      <input type="text" placeholder="이름 입력" class="form-control mb-2" />
      <button class="btn btn-primary">제출</button>
    </div>

    <div class="tag-card">
      <h4>&lt;div&gt; &lt;span&gt; - 레이아웃</h4>
      <p>&lt;div&gt;는 블록 영역, &lt;span&gt;은 인라인 꾸밈용입니다.</p>
      <div class="code-block">
&lt;div style="background:lightblue;"&gt;박스 영역&lt;/div&gt;
문장 중 &lt;span style="color:red;"&gt;강조&lt;/span&gt;
      </div>
      <div style="background:lightblue; padding:10px;">박스 영역</div>
      <p>문장 중 <span style="color:red;">강조</span> 부분</p>
    </div>

    <div class="tag-card">
      <h4>&lt;table&gt; - 표</h4>
      <p>데이터를 표 형식으로 표시합니다.</p>
      <div class="code-block">
&lt;table border="1"&gt;
  &lt;tr&gt;&lt;th&gt;이름&lt;/th&gt;&lt;th&gt;나이&lt;/th&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;홍길동&lt;/td&gt;&lt;td&gt;30&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
      </div>
      <table class="table table-bordered">
        <tr><th>이름</th><th>나이</th></tr>
        <tr><td>홍길동</td><td>30</td></tr>
      </table>
    </div>

    <div class="tag-card bg-light text-center">
      <h5>🎉 이외에도 20가지 태그가 더 있어요!</h5>
      <p>원하시면 전체 30개 태그를 모두 담은 확장 버전도 만들어드릴게요 😊</p>
    </div>
  </div>
</body>
</html>
반응형
저작자표시 비영리 변경금지

'웹제작 강의' 카테고리의 다른 글

[웹개발강의] CSS 초보자 필수 기법 30선 – 정말 쉬운 설명  (0) 2025.04.10
[웹개발강의] HTML에서 CSS를 적용하는 3가지 방법  (0) 2025.04.10
[웹개발강의] CSS, JS 코드가 들어 있어도 왜 "HTML 문서"라고 부르나요?  (0) 2025.04.08
[웹개발] 주석(Comment) 처리 방법을 HTML, CSS, JavaScript, PHP 각 언어별로 정리  (0) 2025.04.08
[웹개발강의] <div>와 <span> 태그의 차이점은 웹 개발자라면 꼭 알아야 하는 기본 중 기본  (0) 2025.04.07
댓글