feat: implement intro section component #95
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,114 @@ | ||
| import { css, html } from "../html-css-utils.js"; | ||
|
|
||
| class IntroSection extends HTMLElement { | ||
| constructor() { | ||
| super(); | ||
|
|
||
| this.render(); | ||
| } | ||
|
|
||
| render() { | ||
| this.attachShadow({ mode: "open" }); | ||
| this.shadowRoot.innerHTML = this.createCss() + this.createHtml(); | ||
| } | ||
|
|
||
| createCss() { | ||
| return css` | ||
| section { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
|
|
||
| height: 100vh; | ||
| background: linear-gradient( | ||
| 0deg, | ||
| rgba(251, 250, 255, 0) -10%, | ||
| rgba(251, 250, 255, 1) 25% | ||
| ), | ||
| linear-gradient( | ||
| 90deg, | ||
| rgba(36, 234, 202, 0.8) 0%, | ||
| rgba(132, 109, 233, 0.8) 100% | ||
| ); | ||
| } | ||
|
|
||
| .inner-container { | ||
| display: flex; | ||
| flex-direction: column; | ||
| row-gap: 30px; | ||
|
|
||
| /* NOTE: Requires accurate policy settings */ | ||
| margin: 0 7.5%; | ||
| } | ||
|
|
||
| @media only screen and (min-width: 768px) { | ||
| /* NOTE: Requires accurate policy settings */ | ||
| .inner-container { | ||
| row-gap: 50px; | ||
| margin: 0 9%; | ||
| } | ||
| } | ||
|
|
||
| @media only screen and (min-width: 1024px) { | ||
| .inner-container { | ||
| position: relative; | ||
| flex-direction: row-reverse; | ||
| row-gap: unset; | ||
| /* NOTE: Requires accurate policy settings */ | ||
| margin: 0; | ||
| width: 80%; | ||
| } | ||
| } | ||
|
|
||
| article { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: flex-start; | ||
| align-items: flex-start; | ||
| /* NOTE: Requires accurate policy settings */ | ||
| row-gap: -4.9px; | ||
|
|
||
| width: 70%; | ||
| } | ||
|
|
||
| @media only screen and (min-width: 768px) { | ||
| article { | ||
| /* NOTE: Requires accurate policy settings */ | ||
| row-gap: -3.2px; | ||
| } | ||
| } | ||
|
|
||
| @media only screen and (min-width: 1024px) { | ||
| article { | ||
| row-gap: unset; | ||
| width: 40%; | ||
| } | ||
| } | ||
|
|
||
| @media only screen and (min-width: 1024px) { | ||
| aside { | ||
| width: 60%; | ||
| } | ||
| } | ||
|
Comment on lines
+74
to
+92
There was a problem hiding this comment. 개인적으로는, 미디어쿼리를 아래와 같이 통합하는게 가독성에 더 좋다고 생각하는데, 혹시 각 엘리먼트마다 구분해서 미디어쿼리를 작성하신 이유가 있으실까요? @media only screen and (min-width: 768px) {
.inner-container {
...
}
article {
...
}
}
@media only screen and (min-width: 1024px) {
.inner-container {
...
}
article {
...
}
aside {
...
}
}There was a problem hiding this comment. 이렇게 작성하면 각 엘리먼트, 선택자 별로 어떻게 반응형으로 대응하는지 빠르게 알 수 있는 것을 경험했기 때문에 선호하는 방식이에요. There was a problem hiding this comment. 이것도 스타일 코드 양이 많아질수록 dx가 개선될 수 있는 좋은 안이 될 수 있을 것 같네요! There was a problem hiding this comment. 오 이런 문법이 가능했었군요? 몰랐습니다. 이게 가능하다면 제가 가장 선호하는 방식이 되겠네요!! There was a problem hiding this comment. @DaleSeo 이 스펙에 관련된 문서를 어디서 찾을 수 있을까요?? There was a problem hiding this comment. 너무 최신이라 하이라이팅이 못 따라가네요...ㅋㅋㅋ |
||
| `; | ||
| } | ||
|
|
||
| createHtml() { | ||
| return html` | ||
| <section> | ||
| <div class="inner-container"> | ||
|
There was a problem hiding this comment. 상위 section 요소에 바로 스타일을 해도 되지 않을까요? 현재 section에 적용되어 있는 스타일은 There was a problem hiding this comment. 오? 그랬군요. 알아보고 가능하다면 적용해보겠습니다. |
||
| <aside> | ||
| <slot name="image"></slot> | ||
| </aside> | ||
|
|
||
| <article> | ||
| <slot name="heading"></slot> | ||
| <slot name="button"></slot> | ||
| </article> | ||
| </div> | ||
| </section> | ||
| `; | ||
| } | ||
| } | ||
|
|
||
| customElements.define("ds-intro-section", IntroSection); | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,9 @@ | ||
| import "./components/button-link.js"; | ||
| import "./components/footer-icon.js"; | ||
| import "./components/footer-link/footer-link.js"; | ||
| import "./components/header.js"; | ||
| import "./components/hero.js"; | ||
| import "./components/image.js"; | ||
| import "./components/intro-section.js"; | ||
| import "./components/review-item.js"; | ||
| import "./components/seo-meta-tag/seo-meta-tag.js"; |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@SamTheKorean 단어 단위의 줄바꿈을 위해 hero 컴포넌트에 이 속성을 추가했어요