web-today-i-learn/index.html at main · woowacourse/web-today-i-learn · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="initial-scale=1, width=device-width" />

    <!-- TODO: Open Graph 메타 태그를 설정하세요 -->
    <!-- <meta property="og:title" content="페이지 제목" /> -->
    <!-- <meta property="og:description" content="페이지 설명" /> -->
    <!-- <meta property="og:image" content="./images/thumbnail.jpg" /> -->

    <title>Today I Learn</title>
    <link rel="stylesheet" href="./css/main.css" />
    <script src="./js/index.js" defer></script>
  </head>
  <body>
    <!-- 상단 내비게이션 -->
    <nav class="top-nav">
      <span class="nav-logo">My Page</span>
      <ul class="nav-links">
        <li><a href="#about">자기소개</a></li>
        <li><a href="#gallery">갤러리</a></li>
        <li><a href="#works">인생 작품</a></li>
        <li><a href="#til">TIL</a></li>
      </ul>
    </nav>

    <!-- 프로필 히어로 -->
    <section class="hero" id="about">
      <div class="profile-card">
        <div class="profile-image">
          <!-- TODO: 프로필 이미지를 넣어주세요 -->
          <!-- <img src="./images/profile.jpg" alt="프로필 사진" /> -->
        </div>
        <div class="profile-info">
          <h1>닉네임</h1>
          <p class="tagline">한 줄 소개를 작성해주세요.</p>
        </div>
      </div>
    </section>

    <main>
      <!-- 자기소개 -->
      <section class="content-section">
        <h2>자기소개</h2>
        <p>자기소개를 작성해주세요.</p>
        <!-- TODO: 소개 글 안에 블로그, GitHub 등 관련 링크를 <a> 태그로 연결하세요 -->
      </section>

      <!-- 기본 정보 -->
      <section class="content-section" id="info">
        <h2>기본 정보</h2>
        <!-- TODO: 자신의 기본 정보를 표(<table>)로 정리하세요 -->
        <table class="info-table">
          <tr>
            <th>이름</th>
            <td></td>
          </tr>
          <tr>
            <th>MBTI</th>
            <td></td>
          </tr>
          <tr>
            <th>취미</th>
            <td></td>
          </tr>
          <tr>
            <th>좋아하는 음식</th>
            <td></td>
          </tr>
        </table>
      </section>

      <!-- 나만의 갤러리 -->
      <section class="content-section" id="gallery">
        <h2>나만의 갤러리</h2>
        <p class="section-desc">갤러리 부제를 작성해주세요. (예: 기억에 남는 여행지)</p>
        <div class="gallery-grid">
          <!-- TODO: 9장의 이미지를 배치하세요 -->
          <!--
          <img src="./images/gallery-1.jpg" alt="갤러리 이미지 1" />
          <img src="./images/gallery-2.jpg" alt="갤러리 이미지 2" />
          ...
          -->
        </div>
      </section>

      <!-- 나를 울린 인생 작품 -->
      <section class="content-section" id="works">
        <h2>나를 울린 인생 작품</h2>
        <div class="works-list">
          <!-- TODO: 최소 2가지 작품을 소개하세요 -->
          <!-- TODO: 작품 중 하나는 <video> 또는 <iframe>으로 영상을 삽입하세요 -->
          <article class="work-card">
            <div class="work-thumbnail">
              <!-- 작품 이미지 -->
            </div>
            <div class="work-info">
              <h3>작품 제목</h3>
              <p>작품에 대한 설명을 작성해주세요.</p>
            </div>
          </article>
        </div>
      </section>

      <!-- TIL (Today I Learned) -->
      <section class="content-section" id="til">
        <h2>TIL</h2>
        <p class="section-desc">오늘 새롭게 배운 것들을 기록합니다.</p>

        <!-- TIL 작성 폼 -->
        <form class="til-form" id="til-form">
          <div class="form-group">
            <label for="til-date">날짜</label>
            <input type="date" id="til-date" name="date" required />
          </div>
          <div class="form-group">
            <label for="til-title">제목</label>
            <input type="text" id="til-title" name="title" placeholder="학습 주제를 입력하세요" required />
          </div>
          <div class="form-group">
            <label for="til-content">내용</label>
            <textarea id="til-content" name="content" placeholder="오늘 배운 내용을 정리해주세요" required></textarea>
          </div>
          <div class="form-actions">
            <button type="submit">등록</button>
            <button type="reset">초기화</button>
          </div>
        </form>

        <!-- TIL 목록: 폼으로 등록하면 여기에 항목이 추가됩니다 -->
        <div class="til-list" id="til-list">
          <!-- 아래는 예시 항목입니다. 자유롭게 수정하거나 삭제하세요 -->
          <article class="til-item">
            <time>2026-03-15</time>
            <h3>HTML 시멘틱 태그</h3>
            <p>header, nav, main, section, article, footer 등 시멘틱 태그의 역할과 사용법을 배웠다.</p>
          </article>
        </div>
      </section>

    </main>

    <footer>
      <p>&copy; My Page</p>
    </footer>
  </body>
</html>