Merge pull request #5 from kotaeho/Basic-고태호

[고태호]Sprint1
codeit-bootcamp-frontend · Aug 18, 2024 · b8fc20a · b8fc20a
2 parents 4dc5dd0 + 9a4338a
commit b8fc20a
Show file tree

Hide file tree

Showing 23 changed files with 711 additions and 4 deletions.
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -2,9 +2,14 @@
 
 ### 기본
 
-- [x]
-- []
-- []
+- 랜딩 페이지의 url path는 루트(‘/’) 입니다.
+- title은 “판다마켓”으로 설정해 주세요.
+- 화면의 너비가 1920px 이상이면 하늘색 배경색은 너비를 꽉 채우도록 채워지고, 내부 요소들의 위치는 고정되고, 여백만 -    커지도록 해주세요.
+- 화면의 너비가 1920px 보다 작아질 때, “판다마켓” 로고의 왼쪽 여백 200px“로그인" 버튼의 오른쪽 여백 200px이 유지되고,- 화면의 너비가 작아질수록 두 요소간 거리가 가까워지도록 해주세요.
+- 클릭으로 기능이 동작해야 하는 경우, 사용자가 클릭할 수 있는 요소임을 알 수 있도록 cursor: pointer를 설정해 주세요.
+- “판다마켓” 클릭 시 루트 페이지(‘/’)로 이동시켜주세요.
+- “구경하러 가기" 클릭 시 (“/items”)페이지로 이동시켜주세요.(빈 페이지)
+
 
 ### 심화
 
@@ -18,7 +23,7 @@
 
 ## 스크린샷
 
-![image](이미지url)
+https://66b6c74acc7773b04ed9bcb6--weekly-kotaeho.netlify.app/
 
 ## 멘토에게
 

diff --git a/faq.html b/faq.html
@@ -0,0 +1,32 @@
+<!-- 
+    <VS Code에서 HTML 기본구조 자동생성하기>
+
+    - `!` 입력 후 tab 키를 누르면 HTML 기본 양식이 입력됩니다.
+
+    - 이때, <html lang="en"> 부분을 매번 lang="ko"로 바꾸는 것이 번거로우니 양식을 바꿔봅시다.
+      command/ctrl + 쉼표 를 눌러 VS Code 설정창을 열고 emmet을 검색해 주세요. 
+      스크롤을 내려 Emmet: Variables 섹션에 Add Item을 누르고 lang Item의 Value를 ko로 바꿔 입력해 주세요. 
+      마지막으로 Add Item 버튼을 눌러 저장하면 끝!
+-->
+
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- 기본 양식 생성 후, 제목을 수정하고 해당 페이지에 적용할 파비콘 및 스타일시트를 추가해 주세요. -->
+    <title>판다마켓 - FAQ</title>
+    <link rel="icon" href="images/logo/favicon.ico" />
+    <link
+      rel="stylesheet"
+      as="style"
+      crossorigin
+      href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css"
+    />
+    <link rel="stylesheet" href="styles/global.css" />
+  </head>
+
+  <body>
+    <h1>임시 FAQ 페이지</h1>
+  </body>
+</html>
diff --git a/images/home/bottom-banner-image.png b/images/home/bottom-banner-image.png
diff --git a/images/home/feature1-image.png b/images/home/feature1-image.png
diff --git a/images/home/feature2-image.png b/images/home/feature2-image.png
diff --git a/images/home/feature3-image.png b/images/home/feature3-image.png
diff --git a/images/home/hero-image.png b/images/home/hero-image.png
diff --git a/images/home/password_eye.png b/images/home/password_eye.png
diff --git a/images/logo/Component 2.png b/images/logo/Component 2.png
diff --git a/images/logo/Component 3.png b/images/logo/Component 3.png
diff --git a/images/logo/favicon.ico b/images/logo/favicon.ico
diff --git a/images/logo/panda-market-logo.png b/images/logo/panda-market-logo.png
diff --git a/images/social/facebook-logo.svg b/images/social/facebook-logo.svg
diff --git a/images/social/instagram-logo.svg b/images/social/instagram-logo.svg
diff --git a/images/social/twitter-logo.svg b/images/social/twitter-logo.svg
diff --git a/images/social/youtube-logo.svg b/images/social/youtube-logo.svg
diff --git a/index.html b/index.html
@@ -0,0 +1,183 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- 브라우저 탭에 표시하고 싶은 제목을 적어주세요. -->
+    <title>판다마켓</title>
+    <!-- 
+      웹사이트를 식별하기 위해 브라우저에 표시하는 작은 아이콘을 '파비콘(Favicon)'이라고 합니다. 
+      일반적으로 16x16px의 .ico 확장자로 되어 있고, 온라인에서 favicon generator를 찾아 사용하면 편리하게 이미지를 파비콘으로 전환할 수 있습니다. 
+    -->
+    <link rel="icon" href="images/logo/favicon.ico" />
+    <!-- 외부 폰트 Pretendard의 스타일시트를 링크해 주세요. -->
+    <link
+      rel="stylesheet"
+      as="style"
+      crossorigin
+      href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css"
+    />
+    <!-- 스타일시트를 링크해 주세요. styles라는 폴더를 만들어 웹사이트 전역에서 공통으로 사용되는 global 스타일링과 각 페이지 별로 특정적인 스타일링을 위한 파일을 나눠 작성하면 가독성을 개선할 수 있어요. -->
+    <link rel="stylesheet" href="styles/global.css" />
+    <link rel="stylesheet" href="styles/home.css" />
+  </head>
+
+  <body>
+    <!-- 
+      <header>는 일반적으로 로고, 내비게이션 메뉴, 검색창 등의 요소로 구성됩니다. 
+      내비게이션 메뉴 버튼이 여러 개라면 <nav> 시맨틱 태그로 감싸주어 레이아웃을 명확하게 해주면 좋습니다. 
+    -->
+    <header>
+      <!-- 
+        - 로고 클릭 시 홈페이지로 이동. index.html로 이동할 때는 href='/'를 사용하면 됩니다. 
+        - <button>과 <a> 태그 두 가지 모두 사용 가능하지만, 단순한 페이지 간 또는 페이지 내에서의 이동에는 <a> 태그를 사용하고, 클릭 시 특정 이벤트가 발생하는 경우에는 <button> 태그를 사용하는 것이 권장됩니다.
+        (<button>을 사용했다면 커서 유형을 pointer로 바꿔주는 것을 잊지 마세요!)
+      -->
+      <!-- 
+        - 이미지 또한 images 폴더를 만들어 카테고리별로 정리해 주면 좋습니다.
+        - 이미지 최적화: 각 이미지의 특징에 따라 알맞은 형식으로 저장하는 것도 웹사이트의 효율에 영향을 미칩니다. 
+          (1) 벡터 기반의 SVG 파일로 저장하면 확대해도 이미지가 깨지지 않는다는 장점이 있습니다. 로고, 아이콘 등 단순한 그래픽의 경우에는 용량이 매우 작지만, 복잡한 그래픽의 경우 용량이 PNG보다 훨씬 커지는 경우가 있으니 주의하세요.
+          (2) JPG/JPEG는 PNG보다 압축률이 높지만 품질 저하가 발생할 수 있습니다. 복잡한 이미지에 적합하며, 배경 이미지 등에 많이 사용됩니다.
+          (3) 투명한 배경이 필요할 때는 PNG를 많이 사용합니다. 품질 저하 없이 저장이 가능하지만, 용량이 큰 경우가 많아 https://tinypng.com/ 같은 사이트를 이용해 이미지 압축을 한 번 하고 프로젝트에 추가하는 것이 권장됩니다.
+        - 사용자가 화면을 확대하거나 고해상도 화면을 사용할 가능성을 대비해 이미지를 실제 필요한 크기보다 2배수 또는 3배수로 저장하는 경우가 많습니다.
+        - 이미지 삽입할 때 잊지 말고 alt 속성에 이미지를 묘사하는 대체 텍스트를 넣어주세요!
+      -->
+      <a href="/"
+        ><img
+          src="images/logo/panda-market-logo.png"
+          alt="판다마켓 홈"
+          width="153"
+      /></a>
+      <!-- 
+        id 이름은 camelCase(단어 연결 시 맨 처음 단어를 제외한 단어들의 첫 글자를 대문자로 표기)로, 
+        class 이름은 kebab-case(단어를 하이픈(-)으로 구분)를 사용하는 것을 권장합니다.
+        하지만 팀마다 선호하는 스타일이 다르기 때문에 naming convention 등 정해진 규칙에 따라 통일성 있게 사용하는 것이 더 중요합니다.
+      -->
+      <!-- 클릭 시 로그인 페이지로 이동. login.html 파일을 생성해 임시 페이지를 만들어 주세요. -->
+      <a href="login.html" id="loginLinkButton" class="button">로그인</a>
+    </header>
+
+    <!-- 
+      웹페이지의 주요 콘텐츠는 <main> 시맨틱 태그에 넣어주세요. 
+      페이지 내용을 기능 및 특징에 따라 <section>으로 나누어 직관적으로 레이아웃을 살펴볼 수 있도록 구성해 보세요.
+    -->
+    <main>
+      <!-- 홈페이지 랜딩 시 가장 상단에 위치해 눈을 사로잡는 역할을 하는 요소를 '히어로 섹션' 또는 '히어로 이미지' 라고 불러요. -->
+      <!-- 
+        전체적인 레이아웃, 디자인, 및 동작성을 먼저 살펴본 후에 비슷한 요소들을 묶어서 개발하면 코드의 재사용성을 높일 수 있어요. 
+        판다마켓 홈페이지에서는 최상단의 히어로 섹션(hero)과 하단 배너 섹션(bottomBanner)의 디자인이 비슷해서 "banner" 클래스로 묶어주었어요. 
+      -->
+      <!-- 각 섹션 내에 컨테이너의 최대 너비를 1200px로 제한하고 화면 중앙에 정렬해 주는 inner wrapper div를 씌워줬어요. -->
+      <section id="hero" class="banner">
+        <div class="wrapper">
+          <h1>
+            일상의 모든 물건을<br />
+            거래해 보세요
+          </h1>
+          <a href="items.html" class="button pill-button">구경하러 가기</a>
+        </div>
+      </section>
+
+      <section id="features" class="wrapper">
+        <!-- features 섹션 내에 비슷한 레이아웃의 요소가 3개 있기 때문에 각 요소에게 feature 라는 클래스명을 부여했어요. -->
+        <div class="feature">
+          <!-- 
+            화면 크기에 따라 이미지 사이즈가 자동으로 조정되도록 이미지의 width를 고정된 px값이 아닌 부모 컨테이너의 너비의 50%로 설정해 주었어요. 
+            각 요소의 크기를 설정하는 방식은 반응형 웹 디자인(responsive web design)을 개발할 때 중요한 고려사항이에요.
+          -->
+          <img
+            src="images/home/feature1-image.png"
+            alt="인기 상품"
+            width="50%"
+          />
+          <div class="feature-content">
+            <h2 class="feature-tag">Hot item</h2>
+            <h1>인기 상품을<br />확인해 보세요</h1>
+            <p class="feature-description">
+              가장 HOT한 중고거래 물품을<br />판다마켓에서 확인해 보세요
+            </p>
+          </div>
+        </div>
+        <div class="feature">
+          <div class="feature-content">
+            <h2 class="feature-tag">Search</h2>
+            <h1>구매를 원하는<br />상품을 검색하세요</h1>
+            <p class="feature-description">
+              구매하고 싶은 물품은 검색해서
+              <br />쉽게 찾아보세요
+            </p>
+          </div>
+          <img
+            src="images/home/feature2-image.png"
+            alt="검색 기능"
+            width="50%"
+          />
+        </div>
+        <div class="feature">
+          <img
+            src="images/home/feature3-image.png"
+            alt="판매 상품 등록"
+            width="50%"
+          />
+          <div class="feature-content">
+            <h2 class="feature-tag">Register</h2>
+            <h1>판매를 원하는<br />상품을 등록하세요</h1>
+            <p class="feature-description">
+              어떤 물건이든 판매하고 싶은 상품을
+              <br />쉽게 등록하세요
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section id="bottomBanner" class="banner">
+        <div class="wrapper">
+          <h1>
+            믿을 수 있는
+            <br />
+            판다마켓 중고거래
+          </h1>
+        </div>
+      </section>
+    </main>
+
+    <footer>
+      <div>©codeit - 2024</div>
+      <div id="footerMenu">
+        <!-- 클릭 시 약관 및 FAQ 페이지로 이동. privacy.html과 faq.html 파일을 생성해 임시 페이지를 만들어 주세요. -->
+        <a href="privacy.html">Privacy Policy</a>
+        <a href="faq.html">FAQ</a>
+      </div>
+      <div id="socialMedia">
+        <!--
+          target="_blank" 속성값을 넣어주어 링크가 새로운 탭에서 열리도록 했어요.
+          새 창에서 하이퍼링크를 열 때에는 보안상 취약점 또는 퍼포먼스 이슈가 발생할 수 있기 때문에 rel="noopener noreferrer" 속성값을 함께 넣어주는 경우가 많습니다.
+        -->
+        <a
+          href="https://www.facebook.com/"
+          target="_blank"
+          rel="noopener noreferrer"
+          ><img src="images/social/facebook-logo.svg" alt="페이스북" width="20"
+        /></a>
+        <a href="https://twitter.com/" target="_blank" rel="noopener noreferrer"
+          ><img src="images/social/twitter-logo.svg" alt="트위터" width="20"
+        /></a>
+        <a
+          href="https://www.youtube.com/"
+          target="_blank"
+          rel="noopener noreferrer"
+          ><img src="images/social/youtube-logo.svg" alt="유튜브" width="20"
+        /></a>
+        <a
+          href="https://www.instagram.com/"
+          target="_blank"
+          rel="noopener noreferrer"
+          ><img
+            src="images/social/instagram-logo.svg"
+            alt="인스타그램"
+            width="20"
+        /></a>
+      </div>
+    </footer>
+  </body>
+</html>
diff --git a/items.html b/items.html
@@ -0,0 +1,32 @@
+<!-- 
+    <VS Code에서 HTML 기본구조 자동생성하기>
+
+    - `!` 입력 후 tab 키를 누르면 HTML 기본 양식이 입력됩니다.
+
+    - 이때, <html lang="en"> 부분을 매번 lang="ko"로 바꾸는 것이 번거로우니 양식을 바꿔봅시다.
+      command/ctrl + 쉼표 를 눌러 VS Code 설정창을 열고 emmet을 검색해 주세요. 
+      스크롤을 내려 Emmet: Variables 섹션에 Add Item을 누르고 lang Item의 Value를 ko로 바꿔 입력해 주세요. 
+      마지막으로 Add Item 버튼을 눌러 저장하면 끝!
+-->
+
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- 기본 양식 생성 후, 제목을 수정하고 해당 페이지에 적용할 파비콘 및 스타일시트를 추가해 주세요. -->
+    <title>판다마켓 - 상품 리스트</title>
+    <link rel="icon" href="images/logo/favicon.ico" />
+    <link
+      rel="stylesheet"
+      as="style"
+      crossorigin
+      href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css"
+    />
+    <link rel="stylesheet" href="styles/global.css" />
+  </head>
+
+  <body>
+    <h1>임시 상품 리스트 페이지</h1>
+  </body>
+</html>