likelion-ssu · KIMGEONHWI · May 2, 2024 · May 3, 2024 · May 3, 2024 · May 6, 2024
diff --git a/.DS_Store b/.DS_Store
diff --git a/week01/.DS_Store b/week01/.DS_Store
diff --git a/week01/week01_geonhwi/.DS_Store b/week01/week01_geonhwi/.DS_Store
diff --git a/week01/week01_geonhwi/assets/header_logo.png b/week01/week01_geonhwi/assets/header_logo.png
diff --git a/week01/week01_geonhwi/assets/main_img.png b/week01/week01_geonhwi/assets/main_img.png
diff --git a/week01/week01_geonhwi/assets/main_section_logo.png b/week01/week01_geonhwi/assets/main_section_logo.png
diff --git a/week01/week01_geonhwi/assets/story_img.png b/week01/week01_geonhwi/assets/story_img.png
diff --git a/week01/week01_geonhwi/index.html b/week01/week01_geonhwi/index.html
@@ -0,0 +1,234 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script
+      src="https://kit.fontawesome.com/455c79571e.js"
+      crossorigin="anonymous"
+    ></script>
+    <link rel="stylesheet" href="./style.css" />
+    <title>instagram</title>
+  </head>
+  <body>
+    <header class="header">
+      <a href="./index.html">
+        <img
+          class="img_header_logo"
+          src="./assets/header_logo.png"
+          alt="헤더 로고 이미지"
+        />
+      </a>
+      <ul class="header_ul_first">
+        <li>
+          <button class="header_btn">
+            <i class="fa-solid fa-house"></i>
+            <span class="header_home_span">홈</span>
+          </button>
+        </li>
+        <li>
+          <button class="header_btn">
+            <i class="fa-solid fa-magnifying-glass"></i>
+            <span class="header_home_span">검색</span>
+          </button>
+        </li>
+        <li>
+          <button class="header_btn">
+            <i class="fa-regular fa-compass"></i>
+            <span class="header_home_span">탐색 탭</span>
+          </button>
+        </li>
+        <li>
+          <button class="header_btn">
+            <i class="fa-solid fa-paper-plane"></i>
+            <span class="header_home_span">메시지</span>
+          </button>
+        </li>
+        <li>
+          <button class="header_btn">
+            <i class="fa-regular fa-heart"></i>
+            <span class="header_home_span">알림</span>
+          </button>
+        </li>
+        <li>
+          <button class="header_btn">
+            <i class="fa-regular fa-square-plus"></i>
+            <span class="header_home_span">만들기</span>
+          </button>
+        </li>
+        <li>
+          <button class="header_btn">
+            <i class="fa-regular fa-user"></i>
+            <span class="header_home_span">프로필</span>
+          </button>
+        </li>
+      </ul>
+      <ul class="heaer_ul_second">
+        <li>
+          <button class="header_btn">
+            <i class="fa-solid fa-ear-listen"></i>
+            <span class="header_home_span">Thread</span>
+          </button>
+        </li>
+        <li>
+          <button class="header_btn">
+            <i class="fa-solid fa-bars"></i>
+            <span class="header_home_span">더 보기</span>
+          </button>
+        </li>
+      </ul>
+    </header>
+    <!-- 세로 수직선 긋기 -->
+    <vr />
+    <main>
+      <div class="content_container">
+        <div class="main_wrapper">
+          <section class="story_section">
+            <div class="story_div">
+              <img src="./assets/story_img.png" alt="스토리 이미지" />
+              <p>story_id</p>
+            </div>
+            <div class="story_div">
+              <img src="./assets/story_img.png" alt="스토리 이미지" />
+              <p>story_id</p>
+            </div>
+            <div class="story_div">
+              <img src="./assets/story_img.png" alt="스토리 이미지" />
+              <p>story_id</p>
+            </div>
+            <div class="story_div">
+              <img src="./assets/story_img.png" alt="스토리 이미지" />
+              <p>story_id</p>
+            </div>
+            <div class="story_div">
+              <img src="./assets/story_img.png" alt="스토리 이미지" />
+              <p>story_id</p>
+            </div>
+            <div class="story_div">
+              <img src="./assets/story_img.png" alt="스토리 이미지" />
+              <p>story_id</p>
+            </div>
+            <div class="story_div">
+              <img src="./assets/story_img.png" alt="스토리 이미지" />
+              <p>story_id</p>
+            </div>
+            <div class="story_div">
+              <img src="./assets/story_img.png" alt="스토리 이미지" />
+              <p>story_id</p>
+            </div>
+            <div class="story_div">
+              <img src="./assets/story_img.png" alt="스토리 이미지" />
+              <p>story_id</p>
+            </div>
+          </section>
+          <article class="main_article">
+            <div class="main_title">
+              <div class="three_elements_div">
+                <img
+                  src="./assets/main_section_logo.png"
+                  alt="메인 프로필 로고"
+                />
+                <p class="main_profile_name">obscura_store.kr</p>
+                <p class="main_time">2시간</p>
+              </div>
+              <div class="one_elements_div">
+                <i class="fa-solid fa-ellipsis"></i>
+              </div>
+            </div>
+            <div class="main_img_div">
+              <img src="./assets/main_img.png" alt="메인 세션 이미지" />
+            </div>
+            <div class="main_fa">
+              <div class="three_fa_div">
+                <i class="fa-regular fa-heart"></i>
+                <i class="fa-regular fa-comment"></i>
+                <i class="fa-solid fa-paper-plane"></i>
+              </div>
+              <div class="one_fa_div">
+                <i class="fa-regular fa-bookmark"></i>
+              </div>
+            </div>
+          </article>
+        </div>
+        <div class="side_div">
+          <aside class="aside">
+            <ul>
+              <div class="aside_profile_container">
+                <div class="aside_profile_box">
+                  <i class="fa-regular fa-user"></i>
+                  <div class="aside_profile_info">
+                    <p class="profile_id">hedgehxgh</p>
+                    <p>김건휘</p>
+                  </div>
+                  <span class="aside_profile_span">전환</span>
+                </div>
+              </div>
+              <div class="aside_recommand_container">
+                <p class="recommand">회원님을 위한 추천</p>
+                <p>모두 보기</p>
+              </div>
+              <div class="aside_profile_container">
+                <div class="aside_profile_box">
+                  <i class="fa-regular fa-user"></i>
+                  <div class="aside_profile_info">
+                    <p class="profile_id">hedgehxgh</p>
+                    <p>김건휘</p>
+                  </div>
+                  <span class="aside_profile_span">팔로우</span>
+                </div>
+              </div>
+              <div class="aside_profile_container">
+                <div class="aside_profile_box">
+                  <i class="fa-regular fa-user"></i>
+                  <div class="aside_profile_info">
+                    <p class="profile_id">hedgehxgh</p>
+                    <p>김건휘</p>
+                  </div>
+                  <span class="aside_profile_span">팔로우</span>
+                </div>
+              </div>
+              <div class="aside_profile_container">
+                <div class="aside_profile_box">
+                  <i class="fa-regular fa-user"></i>
+                  <div class="aside_profile_info">
+                    <p class="profile_id">hedgehxgh</p>
+                    <p>김건휘</p>
+                  </div>
+                  <span class="aside_profile_span">팔로우</span>
+                </div>
+              </div>
+              <div class="aside_profile_container">
+                <div class="aside_profile_box">
+                  <i class="fa-regular fa-user"></i>
+                  <div class="aside_profile_info">
+                    <p class="profile_id">hedgehxgh</p>
+                    <p>김건휘</p>
+                  </div>
+                  <span class="aside_profile_span">팔로우</span>
+                </div>
+              </div>
+              <div class="aside_profile_container">
+                <div class="aside_profile_box">
+                  <i class="fa-regular fa-user"></i>
+                  <div class="aside_profile_info">
+                    <p class="profile_id">hedgehxgh</p>
+                    <p>김건휘</p>
+                  </div>
+                  <span class="aside_profile_span">팔로우</span>
+                </div>
+              </div>
+            </ul>
+          </aside>
+          <footer class="footer">
+            <ul class="footer_ul">
+              <li>소개 · 도움말 · 홍보 센터 · API · 채용 정보 ·</li>
+              <li>개인정보처리방침 · 약관 · 위치 · 언어 ·Meta</li>
+              <br />
+              <li>© 2024 INSTAGRAM FROM META</li>
+            </ul>
+          </footer>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
diff --git a/week01/week01_geonhwi/reset.css b/week01/week01_geonhwi/reset.css
@@ -0,0 +1,43 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}