KDT0_JeongBeomHwan 라인(LINE) 클론 코딩 #59
Conversation
|
dom-loaded 애니메이션 너무 잘 봤습니다~! JS 소스코드 보면서 공부해보고 싶네요! |
|
@JitHoon 좋게 봐주셔서 영광입니다!! 저도 지훈님 프로젝트 보고 많이 배워보겠습니다! 😄 |
|
와 애니메이션 진심 대박인데요?! 너무 잘하시는데요?! 작성하신 코드 보고 공부해야겠습니다!!!와 .. 진짜 일주일만에 저걸 하셨다는게 대단하신데요? |
|
@IAMISTP 감사합니다! 저도 혜민님 작업물 보면서 많이 배워가겠습니다:) |
There was a problem hiding this comment.
플러그인도 적용하고 js로 애니메이션도 구현하셨네요. 멋집니다!
섹션이 많은만큼 시멘틱 태그를 더 고민해보는 것도 좋을 것 같습니다.
그리고 몇가지 팁으로는,
| 1번 | 2번 |
|---|---|
 |
 |
1번) 마우스 호버되는 버튼에는 cursor: pointer css를 적용해주면 좋을 것 같아요.
2번) 문장 줄바꿈은 white-space: .. css 로 어느정도 조절이 가능합니다.
스크롤하면 해당 섹션과 연동된 내비바에 active효과도 넣으셨는데,
여기서 거꾸로 내비바를 클릭하면 해당 섹션으로 이동하는 코드도 js로 구현해보면 좋을 것 같아요. 추후에 여유가 있다면요 :)
기타 참고)
- .DS_store 이 파일은 맥에서 생기는 건데,
.gitignore파일을 만들어 추가하면 커밋에 포함되지 않을 거예요. - woff 폰트도
/asset안으로 넣어도 될 것 같아요~ - 많은 걸 구현한 만큼 README.md를 자세히 작성 하는 것도 좋을 것 같아요.
| <!-- OpenGraph --> | ||
| <meta property="og:type" content="website" /> | ||
| <meta property="og:site_name" content="LINE | 라인은 언제나 사용자와 함께합니다." /> | ||
| <meta property="og:title" content="LINE | 라인은 언제나 사용자와 함께합니다." /> | ||
| <meta property="og:description" content="메신저 앱 그 이상의 경험을 제공합니다. 라인은 새로운 인프라 경험, 새로운 커뮤니케이션 경험을 모두에게 전달하고자 합니다." /> | ||
| <meta property="og:image" content="./images/og_bg.png" /> | ||
| <meta property="og:url" content="https://line.me/ko" /> | ||
|
|
||
| <!-- Twitter --> | ||
| <meta property="twitter:card" content="summary" /> | ||
| <meta property="twitter:site" content="LINE | 라인은 언제나 사용자와 함께합니다." /> | ||
| <meta property="twitter:title" content="LINE | 라인은 언제나 사용자와 함께합니다." /> | ||
| <meta property="twitter:description" content="메신저 앱 그 이상의 경험을 제공합니다. 라인은 새로운 인프라 경험, 새로운 커뮤니케이션 경험을 모두에게 전달하고자 합니다." /> | ||
| <meta property="twitter:image" content="./images/og_bg.png" /> | ||
| <meta property="twitter:url" content="https://line.me/ko" /> | ||
|
|
||
| <!-- Favicon --> | ||
| <link rel="shortcut icon" href="./images/favicon.png" type="image/x-icon" /> | ||
|
|
| .main-products .main-products__service { | ||
| display: flex; | ||
| height: 560px; | ||
| position: relative; | ||
| margin-top: 200px; | ||
| margin-bottom: 85px; | ||
| } | ||
| .main-products .main-products__service.reversed { | ||
| justify-content: flex-end; | ||
| } | ||
| .main-products .main-products__service article { | ||
| margin-left: 40px; | ||
| width: 520px; | ||
| height: 424px; | ||
| } | ||
| .main-products .main-products__service article h3 { | ||
| margin-top: 24px; | ||
| font-size: 48px; | ||
| font-family: "SF pro Display", Arial, sans-serif; | ||
| font-weight: 700; | ||
| } | ||
| .main-products .main-products__service article h4 { | ||
| margin-top: 20px; | ||
| font-size: 18px; | ||
| font-weight: 500; | ||
| color: #07b53b; | ||
| } | ||
| .main-products .main-products__service article p { | ||
| margin: 8px 0 60px; | ||
| } |
There was a problem hiding this comment.
ScSS 을 활용한다면 네스팅 구조를 적용할 수 있을 것 같네요!
.main-products {
.main-products__service {
article..
There was a problem hiding this comment.
오오 SCSS 잘 배워서 활용해보겠습니다. 그리고 cursor hover애니메이션 디테일도 놓쳤었는데 짚어주셔서 감사합니다!
|
처음 시작화면을 완전 잘 구현하셨네요! 그리고 hover 부분도 다 구현하신게 멋집니다 코드 잘 보고 배울게요~ |
|
어우 퀄리티가 정말 높네요. 저는 em이나 rem 같은 상대 단위를 잘 활용을 못하겠던데 반응형 웹 개발에 참고할 수 있을 것 같아요. 또 sticky로 구현된 좌측 내비게이터 바에서 페이지 이동까지 되는 거 보고 깜짝 놀랐습니다.. 많이 배워갑니다 ! |
| */ | ||
|
|
||
| document.addEventListener("DOMContentLoaded", function () { | ||
| //DOM이 자바스크립트 파일을 다 읽는 이벤트를 기점으로 시작합니다. |
There was a problem hiding this comment.
애니메이션 관련 js 코드에 주석을 꼼꼼하게 잘 달아주셔서 코드 리뷰하는 데 도움이 됐어요! 완성된 로딩 애니메이션 정말 멋집니다..⭐️
|
하하 다들 감사합니다! 여러분들 코드도 잘 관찰하면서 배웠습니다 감사해요! |
##기간:
2023-07-27~2023-07-28
##프로젝트 내용:
원본 링크
클론코딩 링크
##자바스크립트를 사용해서 기능 구현한 부분: