[HTML 핵심 태그] div, span, table, form 태그 자세히 알아보기

---

안녕하세요! 😊 지난번에 HTML의 기본 개념과 기초 태그들을 배웠어요.

[HTML 기초] 태그 구조와 활용법 정리 🚀

이번에는 웹 페이지를 만들 때 정말 많이 쓰이는 핵심 태그들을 더 깊이 있게 알아볼 거예요.

특히, div, span, table, form 같은 태그들은

📌 웹 페이지의 레이아웃을 구성하거나, 데이터를 정리할 때 필수적인 요소들이에요!

자, 그럼 하나씩 차근차근 배워볼까요? 🚀

---

1️⃣ div 태그 - 레이아웃을 만드는 핵심 요소

div는 HTML에서 가장 중요한 레이아웃 태그 중 하나예요.
웹 페이지를 여러 개의 구역(섹션)으로 나누는 역할을 해요.

 

✅ div 태그의 특징

✔ 별다른 의미 없이 단순한 블록(구역)을 생성하는 역할
✔ CSS와 함께 사용하면 디자인을 추가할 수 있음

 

📌 div 태그 예제

<div style="background-color: lightblue; padding: 20px;">
    <h2>여기는 `div` 태그 안입니다!</h2>
    <p>이 태그는 여러 요소를 감싸는 박스 역할을 합니다.</p>
</div>

 

✅ div 태그를 사용하면 특정 영역을 스타일링하거나, 화면을 정리하기 쉬워요!

---

2️⃣ span 태그 - 텍스트를 꾸밀 때 유용한 태그

span 태그는 텍스트의 특정 부분만 스타일을 적용할 때 사용해요.
(💡 div는 블록(block) 요소, span은 인라인(inline) 요소라는 차이가 있어요!)

 

✅ span 태그의 특징

✔ div처럼 구역을 나누는 기능은 없음
✔ 텍스트의 일부분을 스타일링할 때 사용

 

📌 span 태그 예제

<p>이 문장 안에서 <span style="color: red;">이 부분만 빨간색</span>으로 바꿨어요!</p>

 

✅ span 태그는 특정 부분만 강조하고 싶을 때 아주 유용해요!

---

3️⃣ table 태그 - 표(테이블) 만들기

웹 페이지에서 데이터를 표(테이블) 형식으로 정리할 때 table 태그를 사용해요.
(💡 엑셀처럼 행과 열로 정리된 데이터를 표시할 때 사용하는 거예요!)

 

✅ table 태그의 기본 구조

✔ <table> : 테이블의 전체 영역
✔ <tr> : 테이블의 행(row)
✔ <th> : 테이블의 제목(헤더)
✔ <td> : 테이블의 데이터(셀)

 

📌 table 태그 예제

<table border="1">
    <tr>
        <th>이름</th>
        <th>나이</th>
        <th>직업</th>
    </tr>
    <tr>
        <td>홍길동</td>
        <td>30</td>
        <td>개발자</td>
    </tr>
    <tr>
        <td>김영희</td>
        <td>25</td>
        <td>디자이너</td>
    </tr>
</table>

 

✅ 테이블을 만들면 데이터를 정리해서 보기 좋게 표시할 수 있어요!
추가로 CSS를 적용하면 더 깔끔한 디자인이 가능해요.

---

4️⃣ form 태그 - 사용자 입력 받기

웹사이트에서 로그인, 회원가입, 검색 창 등을 만들려면 form 태그를 사용해야 해요.
(💡 사용자로부터 데이터를 입력받고, 서버로 전송하는 역할을 해요!)

✅ form 태그의 기본 구조

✔ <form> : 입력 폼의 시작과 끝
✔ <input> : 사용자 입력 필드 (텍스트, 비밀번호, 이메일 등)
✔ <label> : 입력 필드의 설명
✔ <button> : 폼 제출 버튼

 

📌 form 태그 예제

<form action="/submit" method="post">
    <label for="username">아이디:</label>
    <input type="text" id="username" name="username" required>

    <label for="password">비밀번호:</label>
    <input type="password" id="password" name="password" required>

    <button type="submit">로그인</button>
</form>

 

✅ form 태그를 사용하면 사용자로부터 데이터를 입력받고 전송할 수 있어요!
(로그인, 회원가입, 검색창 등 다양한 기능에서 사용됨)

---

📌 마무리 & 다음 단계는?

오늘은 HTML에서 가장 중요한 핵심 태그 4가지(div, span, table, form)를 배웠어요!
이제 여러분은 웹 페이지에서 레이아웃을 나누고, 데이터를 정리하고, 사용자 입력을 받을 수 있는 태그들을 이해했어요. 🎉

 

📢 다음 글에서는?

👉 HTML과 CSS 연결하기! (디자인 추가하는 방법 알아보기)
👉 HTML 입력 필드 더 깊이 알아보기! (radio, checkbox, select 태그 활용)

[HTML과 CSS] HTML과 CSS 연결하기! 예쁜 웹페이지 만드는 법