codeit-bootcamp-frontend · addiescode-sj · Apr 11, 2025 · Apr 4, 2025 · Apr 4, 2025 · Apr 4, 2025
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -0,0 +1,48 @@
+# 스프린트 미션 1
+## 배포 링크
+>https://gentle-lamington-bbd035.netlify.app/
+## 요구사항
+- 랜딩 페이지의 url path는 루트(‘/’) 입니다.
+- title은 “판다마켓”으로 설정해 주세요.
+- 화면의 너비가 1920px 이상이면 하늘색 배경색은 너비를 꽉 채우도록 채워지고, 내부 요소들의 위치는 고정되고, 여백만 커지도록 해주세요.
+- 화면의 너비가 1920px 보다 작아질 때, “판다마켓” 로고의 왼쪽 여백 200px“로그인" 버튼의 오른쪽 여백 200px이 유지되고, 화면의 너비가 작아질수록 두 요소간 거리가 가까워지도록 해주세요.
+- 클릭으로 기능이 동작해야 하는 경우, 사용자가 클릭할 수 있는 요소임을 알 수 있도록 cursor:  pointer를 설정해 주세요.
+- “판다마켓” 클릭 시 루트 페이지(‘/’)로 이동시켜주세요.
+- “구경하러 가기" 클릭 시 (“/items”)페이지로 이동시켜주세요.(빈 페이지)
+- “Privacy Policy”, “FAQ”는 클릭 시 각각(‘/privacy’) (‘/faq’)페이지로 이동합니다.
+- 사용자의 브라우저가 크고 작아짐에 따라 페이지의 요소간 간격, 요소의 크기, font-size 등 모든 크기와 관련된 값이 크고 작아지도록 설정해 보세요.(설정값은 자유입니다).
+-  PC사이즈만 고려해 주어진 디자인을 구현합니다.
+- 페이스북, 트위터, 유튜브, 인스타그램 아이콘은 클릭 시 각각의 홈페이지로 새로운 창이 열리면서 이동 합니다.
+- HTML, CSS 파일을 Netlify로 배포해 주세요. (참고: https://www.codeit.kr/learn/5309)
+
+## 프로젝트 구조
+- /assets
+    - /icon
+    - /img
+    - /logo
+- index.html
+- style.css
+
+## HTML 구조 및 구현 사항
+### 전역 CSS 설정
+- `:root` 속성을 활용해 color들을 전역 변수로 지정하여 사용했습니다.
+- `@font-face` 속성을 활용해 웹 폰트를 사용합니다.
+- `font-size: clamp(12px, 1.6vw, 16px)` 를 통해, 폰트 사이즈가 12px에서 16px 사이로 유연하게 조절됩니다.
+- `.pointer` 클래스를 사용하여 사용자가 클릭하는 요소임을 알 수 있습니다.
+### HTML 구조
+- 크게 header, main, footer 영역으로 나뉘어 있습니다.
+- **header**는 `position: fixed` 를 사용하여 상단에 고정되어 있습니다.
+- **main**은 각 section들로 구성되어 있고, `.top`, `.bottom`, `.section`으로 나뉩니다.
+- 세부 정렬은 대부분 **flexbox**를 활용했습니다. 
+
+### 요구사항 구현
+- `.landing` 클래스는 하위 박스인 `.wrap` 에서, `max-width`와 `margin: 0 auto`를 활용해서 하늘색 배경색은 너비를 꽉 채우도록 채워지고, 내부 요소들의 위치는 고정되고, 여백만 커지도록 구현했습니다.
+- 링크로 연결되는 항목들은 `<a>`태그로 감싸서, 클릭시 특정 페이지들로 이동할 수 있습니다.
+- 폰트, 이미지, 몇몇 여백들은 `vw`를 활용해서 동적으로 크기가 조절됩니다.
+- 새 창으로 열리는 페이지들은 `target="_blank" rel="noopener"`속성을 사용하여, 보안상 취약점이 발생하고 퍼포먼스가 저하되는 문제를 해결했습니다.
+
+### 코드 리뷰 요청 사항
+- 미디어쿼리를 사용하지 않고 제작하여 화면이 줄어들면 의도치 않은 디자인의 변경이 이루어집니다.
+- figma를 기준으로 제작했을때 여백이나 위치 등 css를 어느 수준가지 일치시켜야 하는지 기준이 궁금합니다.
+- 코드의 개선이 가능하다면 어떤 점을 개선해야할지 궁금합니다.
+
diff --git a/assets/.DS_Store b/assets/.DS_Store
diff --git a/assets/icon/ic_facebook.png b/assets/icon/ic_facebook.png
diff --git a/assets/icon/ic_instagram.png b/assets/icon/ic_instagram.png
diff --git a/assets/icon/ic_twitter.png b/assets/icon/ic_twitter.png
diff --git a/assets/icon/ic_youtube.png b/assets/icon/ic_youtube.png
diff --git a/assets/img/Img_home_01.png b/assets/img/Img_home_01.png
diff --git a/assets/img/Img_home_02.png b/assets/img/Img_home_02.png
diff --git a/assets/img/Img_home_03.png b/assets/img/Img_home_03.png
diff --git a/assets/img/Img_home_bottom.png b/assets/img/Img_home_bottom.png
diff --git a/assets/img/Img_home_top.png b/assets/img/Img_home_top.png
diff --git a/assets/logo/logo_lg.png b/assets/logo/logo_lg.png
diff --git a/assets/logo/logo_md.png b/assets/logo/logo_md.png
diff --git a/assets/logo/logo_sm.png b/assets/logo/logo_sm.png
diff --git a/assets/logo/logo_typo.png b/assets/logo/logo_typo.png
diff --git a/index.html b/index.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="kr">
-<html lang="kr">
+<html lang="ko">
-<html lang="kr">
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>판다마켓</title>
+    <link rel="stylesheet" href="style.css"/>
+</head>
+<body>
+    <header>
+        <div class="wrap">
+            <a href="/" class="logo pointer">
+                <img src="./assets/logo/logo_sm.png" alt="판다마켓">
+            </a>
+            <a href="/login" class="login pointer">
+                <div class="login-button" >로그인</div>
+            </a>
+        </div>
+
+
+    </header>
+    <main>
+        <section class="top landing">
+            <div class="wrap">
+                <div class="contents">
+                    <p class="title">일상의 모든 물건을<br> 거래해 보세요</p>
+                    <a class=" pointer">
+                        <div class="items-button" href="/items">구경하러 가기</div>
+                    </a>
+                </div>
+                <img src="./assets/img/Img_home_top.png" alt="판다 이미지">
+            </div>         
+        </section>
+        <section class="section">
+            <div class="wrap left">
+                <img src="./assets/img/Img_home_01.png" alt="home1">
+                <div class="contents right">
+                    <p class="category">Hot item</p>
+                    <p class="title">인기 상품을<br>확인해 보세요</p>
+                    <p class="content">가장 HOT한 중고거래 물품을<br>판다 마켓에서 확인해 보세요</p>
+                </div>
+            </div>
+        </section>
+
+        <section class="section">
+            <div class="wrap right">
+                <img src="./assets/img/Img_home_02.png" alt="home2">
+                <div class="contents left">
+                    <p class="category">Search</p>
+                    <p class="title">구매를 원하는<br>상품을 검색해보세요</p>
+                    <p class="content">구매하고 싶은 물품은 검색해서<br>쉽게 찾아보세요</p>
+                </div>
+            </div>
+        </section>
+
+        <section class="section">
+            <div class="wrap left">
+                <img src="./assets/img/Img_home_03.png" alt="home3">
+                <div class="contents right">
+                    <p class="category">Register</p>
+                    <p class="title">판매를 원하는<br>
+                        상품을 등록하세요</p>
+                    <p class="content">어떤 물건이든 판매하고 싶은 상품을<br>쉽게 등록하세요</p>
+                </div>
+            </div>
+        </section>
+
+        <section class="bottom landing">
+            <div class="wrap">
+                <p class="title">믿을 수 있는<br>판다마켓 중고 거래</p>
+                <img src="./assets/img/Img_home_bottom.png" alt="판다 이미지">
+            </div>
+        </section>
+    </main>
+    <footer>
+        <div class="wrap">
+            <p class="codeit">©codeit - 2024</p>
+            <div class="link-wrap">
+                <a href="/privacy" class="pointer">Privacy Policy</a>
+                <a href="/faq" class="pointer">FAQ</a>
+            </div>
+            <div class="social-wrap">
+                <a href="https://www.facebook.com/codeit.kr" target="_blank" rel="noopener noreferrer" class="pointer">
+                    <img src="./assets//icon/ic_facebook.png" alt="facebook">
+                </a>
+                <a href="https://x.com/codeitkr" target="_blank" rel="noopener noreferrer" class="pointer">
+                    <img src="./assets//icon/ic_twitter.png" alt="twitter">
+                </a>
+                <a href="https://www.youtube.com/@codeit-kr" target="_blank" rel="noopener noreferrer" class="pointer">
+                    <img src="./assets//icon/ic_youtube.png" alt="youtube">
+                </a>
+                <a href="https://www.instagram.com/codeit_kr" target="_blank" rel="noopener noreferrer" class="pointer">
+                    <img src="./assets//icon/ic_instagram.png" alt="instagram">
+                </a>
+
+            </div>
+        </div>
+    </footer>
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,234 @@
+:root {
+    --background-skyblue: #CFE5FF;
+    --background-litegray: #FCFCFC;
+    --primary-100: #3692FF;
+    --secondary-200: #E5E7EB;
+    --secondary-400: #9CA3AF;
+    --secondary-700: #374151;
+    --secondary-900: #111827;
+}
+@font-face {
+    font-family: 'Pretendard-Regular';
+    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
+    font-weight: 400;
+    font-style: normal;
+}
+
+* {
+    box-sizing: border-box;
+}
+html {
+    font-family: 'Pretendard-Regular';
+    font-size: clamp(12px, 1.6vw, 16px)
+}
+body {
+    margin: 0;
+}
+
+.pointer {
+    cursor: pointer;
+}
+
+/* header */
+header {
+    position: fixed;
+    top:0; left: 0; right:0;
+
+    height: 70px;
+    width: 100%;
+
+    z-index: 1;
+    background: white;
+    border: 1px solid #DFDFDF;
+
+}
+header .wrap {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 9px 0;
+    max-width: 1920px;
+    margin: 0 auto;
+
+}
+
+header .logo {
+    margin-left: 200px;
+
+}
+
+header .login {
+    text-decoration: none;
+    margin-right: 200px;
+}
+
+.login-button {
+    background-color: var(--primary-100);
+    color: white;
+    padding: 12px 23px;
+    border: none;
+    border-radius: 8px;
+    font-size: 1rem;
+    font-weight: 600;
+
+}
+
+/* main contents */
+main {
+    width: 100%;
+    margin: 70px auto 0; 
+}
+
+.landing {
+    position: relative;
+    background-color: #CFE5FF;
+    width: 100%;
+    height: 540px;
+    display: flex;
+    align-items: end;
+    justify-content: center;
+    flex: 1;
+
+}
+.landing .wrap {
+    max-width: 1920px;
+    width: 100%;
+    padding: 0 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.top .contents {
+    padding-bottom: 60px;
+
+}
+
+.top img, .bottom img{
+    max-width: 746px;    
+    width: 100%;
+    height: auto;
+}
+
+
+.landing .title {
+    color: var(--secondary-700);
+    font-size: 2.5rem;
+    font-weight: 700;
+    letter-spacing: 140%;
+
+}
+.top .items-button {
+    width: 100%;
+    border-radius: 40px;
+    padding: 16px clamp(80px, 6.46vw, 124px);
+    color: white;
+    background-color: var(--primary-100);
+    font-size: 1.25rem;
+    white-space: nowrap;
+}
+/* section */
+.section {
+
+    padding: 138px 0;
+    white-space: nowrap;
+}
+.section .wrap {
+    margin: 0 auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 50px;
+    background-color: var(--background-litegray);
+    border-radius: 12px;
+    max-width: 988px;
+    width: 100%;
+
+
+}
+.section .wrap.right {
+    flex-direction: row-reverse;
+}
+
+.section .wrap img {
+    max-width: 579px;
+    width: 100%;
+    height: auto;
+}
+.section .contents {
+    flex: 1;
+}
+.section .contents.right{
+    padding-right: auto;
+    text-align: left;
+
+}
+.section .contents.left{
+    padding-left: auto;
+    text-align: right;
+
+}
+
+.section .contents .category {
+    font-size: 1.2rem;
+    color: var(--primary-100);
+    font-weight: 700;
+}
+
+.section .contents .title {
+    font-size: 2.5rem;
+    color: var(--secondary-700);
+    font-weight: 700;
+    letter-spacing: 2%;
+    line-height: 140%;
+}
+
+.section .contents .content {
+    font-size: 1.5rem;
+    color: var(--secondary-700);
+    font-weight: 500;
+
+}
+/* footer */
+footer {
+    background: var(--secondary-900);
+    width: 100%;
+    height: 160px;
+    font-size: 1rem;
+    font-weight: 400;
+}
+
+footer .wrap {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    max-width: 1920px;
+    width: 100%;
+    padding: 32px 200px;
+    margin: 0 auto;
+
+}
+
+footer .codeit {
+    color: var(--secondary-400);
+
+}
+
+footer .link-wrap {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 40px;
+}
+
+footer .link-wrap a{
+    text-decoration: none;
+    color: var(--secondary-200);
+    font-weight: 400;
+}
+footer .social-wrap {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 12px;
+}
+