[이지선] Sprint4

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

README.md

@@ -0,0 +1,37 @@
+# Sprint Mission - 판다마켓켓
+
+### 미션 리스트 1
+- branch : Basic-이지선-sprint1
+- HTML, CSS
+- 메인 페이지 (+반응형)
+
+### 미션 리스트 2
+- branch : Basic-이지선-sprint2
+- HTML, CSS
+- 로그인, 회원가입 페이지 (+반응형)
+
+### 미션 리스트 3
+- branch : Basic-이지선-sprint3
+- 미션 2 + 반응형 (PC: 1200px 이상, Tablet: 768~1199px, Mobile: 375~767px)
+- Table: 로고, 로그인버튼 좌우여백 24px
+- Mobile: 로고, 로그인버튼 좌우여백 16px
+- 오픈그래프 메타태그 추가
+
+## 폴더 구조
+```
+📦src/
+├── 📂 css/
+│        ├── 📂 base/
+│        │        ├── 📒 reset.css
+│        │        └── 📒 variables.css
+│        ├── 📂 components/
+│        │        ├── 📒 button.css
+│        │        ├── 📒 input.css
+│        │        └── 📒 layout.css
+│        └── 📂 pages/
+│        │        ├── 📒 main.css
+│        │        └── 📒 auth.css
+├── 📂 img/
+│        └── 📂 icon/
+├── 📂 js/
+```

css/base/reset.css

@@ -0,0 +1,84 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+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: inherit;
+	vertical-align: baseline;
+  box-sizing: border-box;
+  transition: all .5s;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+  font-family: 'Pretendard', sans-serif;
+  font-size: 16px;
+  color: #111827;
+	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;
+}
+
+
+select, textarea {
+  font-weight: 400;
+  font-size: 16px;
+  color: #1F2937;
+  border: 0;
+  border-radius: 12px;
+  background: #F3F4F6;
+}
+
+textarea::placeholder {
+  font-size: 16px;
+  font-weight: 400;
+  color: #9CA3AF;
+}
+
+select:focus,
+textarea:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+a {
+  color: #111827;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+strong, h1, h2, h3, h4, h5, h6 {
+  font-weight: normal;
+}

css/base/variables.css

@@ -0,0 +1,57 @@
+/* variables.css */
+
+:root {
+  /* Primary Color */
+  --primary-100:              #3692FF;
+  --primary-200:              #1967D6;
+  --primary-300:              #1251AA;
+
+  /* Secondary Color */
+  --secondary-gray-900:       #111827;
+  --secondary-gray-800:       #1F2937;
+  --secondary-gray-700:       #374151;
+  --secondary-gray-600:       #4B5563;
+  --secondary-gray-500:       #6B7280;
+  --secondary-gray-400:       #9CA3AF;
+  --secondary-gray-200:       #E5E7EB;
+  --secondary-gray-100:       #F3F4F6;
+  --secondary-gray-50:        #F9FAFB;
+
+  /* Error Color */
+  --error-red:                #F74747;
+
+  /* Etc Color */
+  --color-white:              #fff;
+
+  /* 폰트 크기 */
+  --font-size-base:            1rem;
+  --font-size-xs:              calc(var(--font-size-base) * 0.75);   /* 12px */
+  --font-size-sm:              calc(var(--font-size-base) * 0.813);  /* 13px */
+  --font-size-md:              calc(var(--font-size-base) * 0.875);  /* 14px */
+  --font-size-lg:              calc(var(--font-size-base) * 1.125);  /* 18px */
+  --font-size-xl:              calc(var(--font-size-base) * 1.25);   /* 20px */
+  --font-size-2xl:             calc(var(--font-size-base) * 1.5);    /* 24px */
+  --font-size-3xl:             calc(var(--font-size-base) * 2);      /* 32px */
+  --font-size-5xl:             calc(var(--font-size-base) * 2.5);    /* 40px */
+
+  /* 폰트 행간 높이 */
+  --line-height-xs:            1.3;
+  --line-height-sm:            1.4;
+  --line-height-base:          1.5;
+  --line-height-md:            1.7;
+
+  /* 폰트 두께 */
+  --font-weight-lighter:       lighter;
+  --font-weight-light:         300;
+  --font-weight-normal:        400;
+  --font-weight-medium:        500;
+  --font-weight-semibold:      600;
+  --font-weight-bold:          700;
+  --font-weight-bolder:        bolder;
+
+  /* Border Radius */
+  --border-radius-sm:          8px;
+  --border-radius-md:          12px;
+  --border-radius-3xl:         40px;
+
+}

css/components/button.css

@@ -0,0 +1,86 @@
+/* button.css */
+
+.btn {
+  width: 100%;
+  font-family: 'Pretendard', sans-serif;
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-md);
+  text-align: center;
+  padding: 10px 0;
+  border: 0;
+  transition: all .5s;
+  cursor: pointer;
+}
+
+.btn:hover {
+  background: var(--primary-200);
+}
+
+.btn:active {
+  background: var(--primary-300);
+}
+
+.btn:disabled,
+.btn.disabled {
+  color: var(--color-white);
+  background: var(--secondary-gray-400);
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+.btn__xs {
+  font-size: var(--font-size-base);
+  max-width: 88px;
+  border-radius: var(--border-radius-sm);
+}
+
+.btn__sm {
+  font-size: var(--font-size-base);
+  max-width: 128px;
+  border-radius: var(--border-radius-sm);
+}
+
+.btn__md {
+  font-size: var(--font-size-lg);
+  max-width: 240px;
+  border-radius: var(--border-radius-3xl);
+}
+
+.btn__lg {
+  font-size: var(--font-size-xl);
+  max-width: 357px;
+  border-radius: var(--border-radius-3xl);
+}
+
+.btn__full {
+  font-size: var(--font-size-xl);
+  max-width: 100%;
+  border-radius: var(--border-radius-3xl);
+}
+
+.btn__primary {
+  color: var(--secondary-gray-100);
+  background: var(--primary-100);
+}
+
+.btn__secondary {
+  color: var(--color-white);
+  background: var(--secondary-gray-400);
+}
+
+.btn__outline__primary {
+  color: var(--primary-100);
+  border: 1px solid var(--primary-100);
+  background: var(--color-white);
+}
+
+/* Mobile (767px이하) */
+@media (max-width: 767px) {
+  .btn__lg {
+    font-size: var(--font-size-lg);
+    max-width: 240px;
+    padding: 8px 0;
+    border-radius: var(--border-radius-3xl);
+  }
+}

css/components/input.css

@@ -0,0 +1,35 @@
+/* input.css */
+input {
+  font-family: 'Pretendard' ,sans-serif;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: var(--line-height-base);
+  width: 100%;
+  padding: 20px;
+  border-radius: 12px;
+  border: 0;
+  background: var(--secondary-gray-100);
+  box-sizing: border-box;
+}
+
+input::placeholder {
+  color: var(--secondary-gray-400);
+}
+
+input.error {
+  box-shadow: 0 0 0 1px var(--error-red);
+}
+
+input.error:focus-visible {
+  outline: 1px solid var(--error-red);
+}
+
+input[type="password"] {
+  padding-right: 72px;
+}
+
+@media (max-width: 767px) {
+  input {
+    padding: 15px 24px;
+  }
+}