날짜

2026.01.11

</aside>

활동내용

1. HTML 기본 구조

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>페이지 제목</title>
</head>
<body>
    <!-- 내용 -->
</body>
</html>

2. 텍스트 태그

<!-- 제목 -->
<h1>메인 제목</h1>
<h2>부제목</h2>

<!-- 문단 -->
<p>문단 내용입니다.</p>

<!-- 강조 -->
<strong>굵게</strong>
<em>기울임</em>

3. 링크와 이미지

<!-- 링크 -->
<a href="<https://example.com>">링크</a>
<a href="#section1">페이지 내 이동</a>

<!-- 이미지 -->
<img src="photo.jpg" alt="사진 설명">

4. 목록

<!-- 순서 없는 목록 -->
<ul>
    <li>항목 1</li>
    <li>항목 2</li>
</ul>

<!-- 순서 있는 목록 -->
<ol>
    <li>첫 번째</li>
    <li>두 번째</li>
</ol>

5. 테이블

<table>
    <thead>
        <tr>
            <th>이름</th>
            <th>나이</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>홍길동</td>
            <td>25</td>
        </tr>
    </tbody>
</table>

6. 폼(Form)

<form action="/submit" method="POST">
    <!-- 텍스트 입력 -->
    <label for="name">이름:</label>
    <input type="text" id="name" name="name" required>
    
    <!-- 이메일 -->
    <label for="email">이메일:</label>
    <input type="email" id="email" name="email" required>
    
    <!-- 비밀번호 -->
    <label for="password">비밀번호:</label>
    <input type="password" id="password" name="password">
    
    <!-- 체크박스 -->
    <label>
        <input type="checkbox" name="agree">
        동의합니다
    </label>
    
    <!-- 라디오 버튼 -->
    <input type="radio" name="gender" value="male" id="male">
    <label for="male">남성</label>
    <input type="radio" name="gender" value="female" id="female">
    <label for="female">여성</label>
    
    <!-- 선택 -->
    <select name="country">
        <option value="kr">한국</option>
        <option value="us">미국</option>
    </select>
    
    <!-- 텍스트 영역 -->
    <textarea name="message" rows="5"></textarea>
    
    <!-- 버튼 -->
    <button type="submit">제출</button>
</form>

7. 시맨틱 태그

<header>
    <h1>사이트 제목</h1>
    <nav>
        <a href="/">홈</a>
        <a href="/about">소개</a>
    </nav>
</header>

<main>
    <article>
        <h2>글 제목</h2>
        <p>내용...</p>
    </article>
    
    <aside>
        <h3>관련 링크</h3>
    </aside>
</main>

<footer>
    <p>&copy; 2024 회사명</p>
</footer>

날짜

활동내용

1. HTML 기본 구조

2. 텍스트 태그

3. 링크와 이미지

4. 목록

5. 테이블

6. 폼(Form)

7. 시맨틱 태그

주요 시맨틱 태그