diff --git a/components/step-section.js b/components/step-section.js new file mode 100644 index 0000000..8b6c35d --- /dev/null +++ b/components/step-section.js @@ -0,0 +1,37 @@ +import { html, css } from "../html-css-utils.js"; + +class StepsSection extends HTMLElement { + constructor() { + super(); + this.render(); + } + + render() { + this.attachShadow({ mode: "open" }); + this.shadowRoot.innerHTML = this.createCss() + this.createHtml(); + } + + createCss() { + return css` + section { + width: 80%; + max-width: 1550px; + margin: 0 auto; + padding: 100px 0; + @media only screen and (min-width: 1024px) { + padding: 149px 0; + } + } + `; + } + + createHtml() { + return html` +
+ +
+ `; + } +} + +customElements.define("ds-steps-section", StepsSection); diff --git a/components/step.js b/components/step.js new file mode 100644 index 0000000..a6842d1 --- /dev/null +++ b/components/step.js @@ -0,0 +1,166 @@ +import { css, html } from "../html-css-utils.js"; + +class BaseStepElement extends HTMLElement { + constructor() { + super(); + this.render(); + } + + render() { + this.attachShadow({ mode: "open" }); + this.shadowRoot.innerHTML = this.createCss() + this.createHtml(); + } + + validateAttributes(requiredAttributes) { + requiredAttributes.forEach((attr) => { + if (!this.hasAttribute(attr)) { + throw new Error(`The "${attr}" attribute is required.`); + } + }); + } +} + +class StepList extends BaseStepElement { + createCss() { + return css` + .step-list { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + row-gap: 10px; + margin-top: 20px; + + @media only screen and (min-width: 1024px) { + flex-direction: row; + column-gap: 10px; + } + } + .step-list ::slotted(ds-step) { + flex: 1 1 100%; + } + `; + } + + createHtml() { + return html` +
+ +
+ `; + } +} + +class Step extends BaseStepElement { + constructor() { + super(); + this.validateAttributes(["step", "iconSrc"]); + } + + createCss() { + return css` + h3, + ::slotted(p) { + margin: 0; + padding: 0; + } + article { + width: 100%; + height: 400px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + border-radius: 10px; + text-align: center; + border: 5px solid transparent; + background-clip: padding-box, border-box; + background-origin: padding-box, border-box; + background-image: linear-gradient(white, white), + linear-gradient(135deg, #24eaca, #846de9); + padding: 75px 27px; + + @media only screen and (min-width: 768px) { + height: 460px; + padding: 67px 74px; + } + + @media only screen and (min-width: 1024px) { + height: 627px; + padding: 106px 54px; + } + } + .step-title h3 { + font-size: 24px; + font-weight: var(--font-weight-medium); + @media only screen and (min-width: 768px) { + font-size: 36px; + } + } + .step-icon { + width: auto; + height: 40px; + margin: 20px 0; + @media only screen and (min-width: 768px) { + width: 60px; + height: 60px; + margin: 50px 0; + } + } + .step-content { + font-size: 16px; + font-weight: var(--font-weight-regular); + word-break: keep-all; + @media only screen and (min-width: 768px) { + font-size: 24px; + } + } + `; + } + + createHtml() { + const step = this.getAttribute("step"); + const iconSrc = this.getAttribute("iconSrc"); + + return html` +
+
+

Step ${step}

+
+ Step icon +
+ +
+
+ `; + } +} + +class StepTextLink extends BaseStepElement { + constructor() { + super(); + this.validateAttributes(["link"]); + } + + createCss() { + return css` + .step-text-link, + .step-text-link:hover { + text-decoration: underline; + } + `; + } + + createHtml() { + const link = this.getAttribute("link"); + + return html` + + `; + } +} + +customElements.define("ds-step-list", StepList); +customElements.define("ds-step", Step); +customElements.define("ds-step-text-link", StepTextLink); diff --git a/images/icon_step1.png b/images/icon_step1.png new file mode 100644 index 0000000..090e486 Binary files /dev/null and b/images/icon_step1.png differ diff --git a/images/icon_step2.png b/images/icon_step2.png new file mode 100644 index 0000000..b921116 Binary files /dev/null and b/images/icon_step2.png differ diff --git a/images/icon_step3.png b/images/icon_step3.png new file mode 100644 index 0000000..6415a57 Binary files /dev/null and b/images/icon_step3.png differ diff --git a/index.html b/index.html index a9d9626..4c377d0 100644 --- a/index.html +++ b/index.html @@ -130,45 +130,6 @@ place-items: center; } - .review-card { - padding: 2rem; - display: flex; - justify-content: space-between; - align-items: center; - width: 48%; - max-width: 50%; - background-color: #f0f0f0; - box-sizing: border-box; - position: relative; - } - - .picture-placeholder { - width: 10rem; - height: 10rem; - background-color: white; - border-radius: 50%; - display: flex; - justify-content: center; - } - - .picture-placeholder img { - border-radius: 50%; - } - - .review { - flex-grow: 1; - padding: 0.9rem; - font-size: 1.4rem; - } - - .name { - position: absolute; - bottom: 2rem; - right: 4rem; - font-size: 1.6rem; - font-weight: regular; - } - #join-instruction-container { margin-top: 15rem; padding-bottom: 15rem; @@ -179,41 +140,8 @@ font-size: 5rem; font-weight: medium; } - - .instruction-card-list { - margin-top: 4rem; - display: flex; - flex-wrap: wrap; - gap: 0.9rem; - } - - .instruction-card { - align-items: center; - display: flex; - width: 32%; - box-sizing: border-box; - justify-content: center; - flex-direction: column; - border: 0.1rem solid black; - padding: 3rem; - } - - .instruction-card span { - margin-top: 10rem; - margin-bottom: 7rem; - font-weight: medium; - font-size: 3.6rem; - } - - .instruction-card p { - margin-top: 10rem; - margin-bottom: 10rem; - font-size: 2.4rem; - font-weight: regular; - } - - /* 'review-card-list' style will be removed when the review card list component is created */ - /* Medium devices such as tablets (768px and up) */ + + /* 'review-card-list', 'instruction-card-list' style will be removed when the review card list, instruction card list component are created */ @media only screen and (min-width: 768px) { .review-card-list { grid-template-columns: repeat(2, minmax(306px, 1fr)); @@ -316,83 +244,41 @@ -
- 스터디 참여방법 -
-
- Step 1 - - - - - - -

- 현재 스터디 1기가 진행중이에요. (2024년 4/21~8/10) 다음 기수 스터디 - 참여를 원한다면 여기에서 신청할 수 있어요. + + 스터디 참여방법 + + +

+ 현재 스터디 1기가 진행중이에요. (2024년 4/21~8/10) 다음 기수 스터디 참여를 원한다면 + + 여기 + + 에서 신청할 수 있어요.

-
-
- Step 2 - - - - - - -

- 답안 제출과 확인은 깃허브를 통해 이루어져요. 스터디 전체 진행상황을 - 알고 싶다면 프로젝트 보드를 통해 파악할 수 있어요. + + +

+ 답안 제출과 확인은 깃허브를 통해 이루어져요. 스터디 전체 진행상황을 알고 싶다면 + + 프로젝트 보드 + + 를 통해 파악할 수 있어요.

-
-
- Step 3 - - - - - - -

- 매주 스터디 멤버들끼리 디스코드에서 간단한 모임을 가져요. 멤버 간의 - 친밀감도 쌓고 해외 취업 관련한 유용한 정보도 공유하고 있어요. + + +

+ 매주 스터디 멤버들끼리 + + 디스코드 + + 에서 간단한 모임을 가져요. 멤버 간의 친밀감도 쌓고 해외 취업 관련한 유용한 정보도 공유하고 있어요.

-
-
-
+ + +