최원종의 개발 블로그

HTML 주요 body 내의 태그 - 5 본문

HTML_CSS/사전학습

HTML 주요 body 내의 태그 - 5

chl6698 2026. 4. 15. 14:58

개념 정리

- **<body>**: 사용자에게 보이는 콘텐츠 영역.
- **주요 태그**
    - <h1>~<h6>: 제목.
    - <p>: 문단.
    - <a>: 링크.
    - <img>: 이미지.
    - <div>: 블록 나누기.
    - <ul>, <ol>, <li>: 목록.
    - <button>: 버튼.
    - **<table>**: 표 형식 데이터 표시.
    - **<form>**: 사용자 입력 수집.
    - **<input>**: 입력 필드 생성.

 

실습 코드

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 1. h1 ~ h6 : 제목 태그, 숫자가 클수록 작아짐 -->
    <h1>큰 제목</h1>
    <h3>중간 제목</h3>
    <h6>작은 제목</h6>

    <!-- 2. p: 문단을 나타냄 -->
    <p>이것은 하니의 문단입니다. 텍스트를 묶어줍니다</p>

    <!-- 3. a: 링크를 생성 href로 목적지를 지정 -->
    <a href="https://www.naver.com" target="_self">여기를 클릭하세요</a>

    <!-- 4. img: 이미지를 삽입, scr와 alt 필수 -->
    <img src="https://picsum.photos/200/300?grayscale" alt="샘플이미지" />

    <!-- 5. div: 콘텐츠를 구획으로 나누는 블록 태그 -->
    <div>
      <p>이 문단은 div 안에 있습니다</p>
      <p>레이아웃을 나눌 때 유용합니다</p>
    </div>

    <!-- 6. ul, li: 순서 없는 목록 -->
    <ol>
      <li>항목1</li>
      <li>항목2</li>
      <li>항목3</li>
    </ol>

    <!-- 7. button: 클릭 가능한 버튼 -->
    <button onclick="alert('클릭 클릭')">나늘 눌러 봐</button>
  </body>
</html>

예제코드

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>table 태그 연습</title>
  </head>
  <body>
    <h2>학생 점수 관리 시스템</h2>
    <p>아래는 학생들의 점수를 정리한 예제입니다.</p>

    <hr />

    <table border="1">
      <thead>
        <tr>
          <th>이름</th>
          <th>국어</th>
          <th>수학</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>김민수</td>
          <td>85</td>
          <td>90</td>
        </tr>
        <tr>
          <td>이영희</td>
          <td>92</td>
          <td>88</td>
        </tr>
      </tbody>
    </table>

    <!-- form과 input : 사용자 입력 폼 -->
    <h3>학생 정보 입력</h3>
    <form action="https://www.naver.com/" method="post">
      <!-- input 태그 :  -->
      <label for="">이름: </label>
      <input type="text" id="name" name="name" placeholder="이름을 입력" />
      <br />

      <label for="">국어 점수:</label>
      <input type="number" id="korean" name="korean" placeholder="국어 점수" />
      <br />

      <label for="">수학 점수:</label>
      <input type="number" id="math" name="math" placeholder="수학 점수" />
      <br />
      <button type="submit">서버에 전송</button>
    </form>
  </body>
</html>

'HTML_CSS > 사전학습' 카테고리의 다른 글

CSS(Cascading Style Sheets) - 7  (0) 2026.04.16
시멘틱 태그란 - 6  (1) 2026.04.15
HTML 속성 - 4  (0) 2026.04.15
HTML 기본 템플릿에 이해 - 3  (1) 2026.04.15
HTML, CSS, Javascript - 2  (0) 2026.04.15
'HTML_CSS/사전학습' Related Articles more