likelion-ssu · xionng · May 2, 2024 · May 2, 2024 · May 2, 2024 · May 2, 2024
diff --git a/.DS_Store b/.DS_Store
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -2,12 +2,10 @@
 <!--ex) 1주차 인스타그램 클론코딩-->
 
 
-
 ## ✨어려웠던점, 트러블슈팅✨
 <!--과제를 하며 어려웠던 점과, 어떻게 해결했는지 적어주세요!-->
 
 
-
 ## 🤔 PR Point
 <!--잘 모르겠거나 같이 봤으면 하는 코드가 있다면 적어주세요!-->
 
diff --git a/week01/.DS_Store b/week01/.DS_Store
diff --git a/week01/sion/.DS_Store b/week01/sion/.DS_Store
diff --git a/week01/sion/img/.DS_Store b/week01/sion/img/.DS_Store
diff --git a/week01/sion/img/choonsik1.png b/week01/sion/img/choonsik1.png
diff --git a/week01/sion/img/choonsik10.png b/week01/sion/img/choonsik10.png
diff --git a/week01/sion/img/choonsik11.png b/week01/sion/img/choonsik11.png
diff --git a/week01/sion/img/choonsik12.png b/week01/sion/img/choonsik12.png
diff --git a/week01/sion/img/choonsik13.png b/week01/sion/img/choonsik13.png
diff --git a/week01/sion/img/choonsik14.png b/week01/sion/img/choonsik14.png
diff --git a/week01/sion/img/choonsik15.png b/week01/sion/img/choonsik15.png
diff --git a/week01/sion/img/choonsik16.png b/week01/sion/img/choonsik16.png
diff --git a/week01/sion/img/choonsik17.png b/week01/sion/img/choonsik17.png
diff --git a/week01/sion/img/choonsik2.png b/week01/sion/img/choonsik2.png
diff --git a/week01/sion/img/choonsik3.png b/week01/sion/img/choonsik3.png
diff --git a/week01/sion/img/choonsik4.png b/week01/sion/img/choonsik4.png
diff --git a/week01/sion/img/choonsik5.png b/week01/sion/img/choonsik5.png
diff --git a/week01/sion/img/choonsik6.png b/week01/sion/img/choonsik6.png
diff --git a/week01/sion/img/choonsik7.png b/week01/sion/img/choonsik7.png
diff --git a/week01/sion/img/choonsik8.png b/week01/sion/img/choonsik8.png
diff --git a/week01/sion/img/choonsik9.png b/week01/sion/img/choonsik9.png
diff --git a/week01/sion/img/choonsikProfile.png b/week01/sion/img/choonsikProfile.png
diff --git a/week01/sion/img/chpostimg1.jpeg b/week01/sion/img/chpostimg1.jpeg
diff --git a/week01/sion/img/chpostimg2.jpeg b/week01/sion/img/chpostimg2.jpeg
diff --git a/week01/sion/img/chpostimg3.jpeg b/week01/sion/img/chpostimg3.jpeg
diff --git a/week01/sion/img/chpostimg4.jpg b/week01/sion/img/chpostimg4.jpg
diff --git a/week01/sion/img/logo.png b/week01/sion/img/logo.png
diff --git a/week01/sion/index.html b/week01/sion/index.html
@@ -0,0 +1,251 @@
+<!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>
+    <div id="layout"> 
+        <!-- 헤더 부분 -->
+        <header id="headerSection">
+            <img id="logoImg" src="img/logo.png" alt="로고">
+            <ul>
+                <li><div class="menuList"><i class="fa-solid fa-house"></i>홈</div></li>
+                <li><div class="menuList"><i class="fa-solid fa-magnifying-glass"></i>검색</div></li>
+                <li><div class="menuList"><i class="fa-regular fa-compass"></i>탐색 탭</div></li>
+                <li><div class="menuList"><i class="fa-solid fa-clapperboard"></i>릴스</div></li>
+                <li><div class="menuList"><i class="fa-regular fa-paper-plane"></i>메시지</div></li>
+                <li><div class="menuList"><i class="fa-regular fa-heart"></i>알림</div></li>
+                <li><div class="menuList"><i class="fa-regular fa-square-plus"></i>만들기</div></li>
+                <li><div class="menuList"><img id="menuProfile" src="img/choonsikProfile.png" alt="프로필 이미지">프로필</div></li>
+            </ul>
+            <ul>
+                <li><div class="menuList"><i class="fa-brands fa-threads"></i>Threads</div></li>
+                <li><div class="menuList"><i class="fa-solid fa-bars"></i>더 보기</div></li>
+            </ul>
+        </header>
+        <div class='menuLine'></div>
+
+        <!-- 스토리 부분 -->
+        <section id="storySection">
+            <div class="storyProfile">
+                <img src="img/choonsik1.png" alt="기본프사">
+                <p>choon._.vly</p>
+            </div>
+            <div class="storyProfile">
+                <img src="img/choonsik2.png" alt="기본프사">
+                <p>cs_0219</p>
+            </div>
+            <div class="storyProfile">
+                <img src="img/choonsik3.png" alt="기본프사">
+                <p>chxxnxix</p>
+            </div>
+            <div class="storyProfile">
+                <img src="img/choonsik4.png" alt="기본프사">
+                <p>cnstlrdl</p>
+            </div>
+            <div class="storyProfile">
+                <img src="img/choonsik5.png" alt="기본프사">
+                <p>sik_03</p>
+            </div>
+            <div class="storyProfile">
+                <img src="img/choonsik6.png" alt="기본프사">
+                <p>spring._.s</p>
+            </div>
+            <div class="storyProfile">
+                <img src="img/choonsik8.png" alt="기본프사">
+                <p>po_po_</p>
+            </div>
+            <div class="storyProfile">
+                <img src="img/choonsik9.png" alt="기본프사">
+                <p>lcs_187cm</p>
+            </div>
+
+        </section>
+        <!-- 스토리 화살표 -->
+        <!-- <i class="fa-solid fa-circle-chevron-right"></i> -->
+
+        <!-- 게시물 부분 (4개의 게시물) -->
+        <!-- postTop : 프로필, 시간, 더보기 / postProfile : 프로필, 시간 / postBold : 게시물 내의 굵은 글씨 -->
+        <section id="postSection">
+            <article class="post">
+                <div class="postTop">
+                    <div class="postProfile">
+                        <img src="img/choonsik5.png" alt="게시물프사사진">
+                        <P><span class="postBold">sik_03</span> <span class="postTime">・ 4시간</span></P>
+                    </div>
+                    <i class="fa-solid fa-ellipsis"></i>
+                </div>
+                <img class="postImg" src="img/chpostimg3.jpeg" alt="게시물 사진">
+                <div class="postIcon">
+                    <div class="postLeftIcon">
+                    <i class="fa-regular fa-heart"></i>
+                    <i class="fa-regular fa-comment"></i>
+                    <i class="fa-regular fa-paper-plane"></i>
+                    </div>
+                    <i class="fa-regular fa-bookmark"></i>
+                </div>
+                <p><span class="postBold">cnkdj_0726</span>님 <span class="postBold">여러 명</span>이 좋아합니다</p>
+                <p><span class="postBold">sik_03</span> 이언이가 우리 카페 놀러왔다람쥐💛</p>
+                <div class="postReaction">
+                    <input class="postComment" type="text" placeholder="댓글 달기...">
+                    <i class="fa-regular fa-face-smile"></i>
+                </div>
+
+                <div class="postLine"></div>
+                <br>
+            </article>
+
+            <article class="post">
+                <div class="postTop">
+                    <div class="postProfile">
+                        <img src="img/choonsik11.png" alt="게시물프사사진">
+                        <P><span class="postBold">xhxxxix</span> <span class="postTime">・ 6시간</span></P>
+                    </div>
+                    <i class="fa-solid fa-ellipsis"></i>
+                </div>
+                <img class="postImg" src="img/chpostimg1.jpeg" alt="게시물 사진">
+                <div class="postIcon">
+                    <div class="postLeftIcon">
+                    <i class="fa-regular fa-heart"></i>
+                    <i class="fa-regular fa-comment"></i>
+                    <i class="fa-regular fa-paper-plane"></i>
+                    </div>
+                    <i class="fa-regular fa-bookmark"></i>
+                </div>
+                <p><span class="postBold">tldhsdldi_</span>님 <span class="postBold">여러 명</span>이 좋아합니다</p>
+                <p><span class="postBold">xhxxxix</span> 🐚⏳🎧🍽️</p>
+                <div class="postReaction">
+                    <input class="postComment" type="text" placeholder="댓글 달기...">
+                    <i class="fa-regular fa-face-smile"></i>
+                </div>
+
+                <div class="postLine"></div>
+                <br>
+            </article>
+
+            <article class="post">
+                <div class="postTop">
+                    <div class="postProfile">
+                        <img src="img/choonsik2.png" alt="게시물프사사진">
+                        <P><span class="postBold">cs_0219</span> <span class="postTime">・ 3시간</span></P>
+                    </div>
+                    <i class="fa-solid fa-ellipsis"></i>
+                </div>
+                <img class="postImg" src="img/chpostimg4.jpg" alt="게시물 사진">
+                <div class="postIcon">
+                    <div class="postLeftIcon">
+                    <i class="fa-regular fa-heart"></i>
+                    <i class="fa-regular fa-comment"></i>
+                    <i class="fa-regular fa-paper-plane"></i>
+                    </div>
+                    <i class="fa-regular fa-bookmark"></i>
+                </div>
+                <p><span class="postBold">dkjlsd._.</span>님 <span class="postBold">여러 명</span>이 좋아합니다</p>
+                <p><span class="postBold">cs_0219</span> 큐티빠띠</p>
+                <div class="postReaction">
+                    <input class="postComment" type="text" placeholder="댓글 달기...">
+                    <i class="fa-regular fa-face-smile"></i>
+                </div>
+
+                <div class="postLine"></div>
+                <br>
+            </article>
+
+            <article class="post">
+                <div class="postTop">
+                    <div class="postProfile">
+                        <img src="img/choonsik12.png" alt="게시물프사사진">
+                        <P><span class="postBold">ch._.s2</span> <span class="postTime">・ 1일</span></P>
+                    </div>
+                    <i class="fa-solid fa-ellipsis"></i>
+                </div>
+                <img class="postImg" src="img/chpostimg2.jpeg" alt="게시물 사진">
+                <div class="postIcon">
+                    <div class="postLeftIcon">
+                    <i class="fa-regular fa-heart"></i>
+                    <i class="fa-regular fa-comment"></i>
+                    <i class="fa-regular fa-paper-plane"></i>
+                    </div>
+                    <i class="fa-regular fa-bookmark"></i>
+                </div>
+                <p><span class="postBold">happy_cs_life</span>님 <span class="postBold">여러 명</span>이 좋아합니다</p>
+                <p><span class="postBold">ch._.s2</span> 이언이랑 캠핑 갔지룽</p>
+                <div class="postReaction">
+                    <input class="postComment" type="text" placeholder="댓글 달기...">
+                    <i class="fa-regular fa-face-smile"></i>
+                </div>
+
+                <div class="postLine"></div>
+                <br>
+            </article>
+
+
+        </section>
+
+        <!-- 추천친구 부분 -->
+        <!-- profileGap : 사진, 아이디, 이름(내용) / myProfile : 전환버튼 포함 / recommendProfile : 팔로우 버튼 포함 -->
+        <aside id="recommendSection">
+            <ul>
+                <div id="myProfile">
+                    <div class="profileGap">
+                        <img src="img/choonsikProfile.png" alt="내프로필사진">
+                        <p class="profileName"><span class="postBold">xioniya_</span><br><span id="myName">이시온</span></p>
+                    </div>
+                    <p id="changeButton">전환</p>
+                </div>
+                <div id="recommendMent">
+                    <p id="recommendMentForYou">회원님을 위한 추천</p>
+                    <p id="recommendMentAll">모두보기</p>
+                </div>
+                <li><div class="recommendProfile">
+                    <div class="profileGap">
+                        <img src="img/choonsik7.png" alt="추천친구프로필사진">
+                        <p class="profileName"><span class="postBold">0928_cs</span><br><span class="recommendM">회원님을 위한 추천</span></p>
+                    </div>
+                    <p class="followButton">팔로우</p>
+                </div></li>
+                <li><div class="recommendProfile">
+                    <div class="profileGap">
+                        <img src="img/choonsik14.png" alt="추천친구프로필사진">
+                        <p class="profileName"><span class="postBold">_omo_</span><br><span class="recommendM">회원님을 위한 추천</span></p>
+                    </div>
+                    <p class="followButton">팔로우</p>
+                </div></li>
+                <li><div class="recommendProfile">
+                    <div class="profileGap">
+                        <img src="img/choonsik10.png" alt="추천친구프로필사진">
+                        <p class="profileName"><span class="postBold">strong_ch.s</span><br><span class="recommendM">회원님을 위한 추천</span></p>
+                    </div>
+                    <p class="followButton">팔로우</p>
+                </div></li>
+                <li><div class="recommendProfile">
+                    <div class="profileGap">
+                        <img src="img/choonsik17.png" alt="추천친구프로필사진">
+                        <p class="profileName"><span class="postBold">tlrtlr_05</span><br><span class="recommendM">회원님을 위한 추천</span></p>
+                    </div>
+                    <p class="followButton">팔로우</p>
+                </div></li>
+                <li><div class="recommendProfile">
+                    <div class="profileGap">
+                        <img src="img/choonsik15.png" alt="추천친구프로필사진">
+                        <p class="profileName"><span class="postBold">chu_n_o3o</span><br><span class="recommendM">회원님을 위한 추천</span></p>
+                    </div>
+                    <p class="followButton">팔로우</p>
+                </div></li>
+            </ul>
+        </aside>
+
+        <!-- 푸터 부분 -->
+        <footer id="footerSection">
+            <p>소개 . 도움말 . 홍보 센터 . API . 채용 정보 . <br>
+                개인정보처리방침 . 약관 . 위치 . 언어 . Meta Verified</p>
+
+            <p>© 2024 INSTAGRAM FROM META</p>
+        </footer>
+    </div>
+</body>
+</html>