패스트캠퍼스 부트캠프 5기 김필진 카카오 메인페이지 클론코딩 #61
Conversation
> 버튼 모양/크기 변경 > 버튼 안에 로고 삽입
> 각 함수에 관한 내용 주석 첨부
> onScrollFixedCard 함수 안에 leftContent.style.top의 값을 635px로 수정 > 각 로직에 대한 주석 작성
> 원본 사이트에 존재했던 sns 컨텐츠 영역 추가
> 오른쪽 카드의 위치 position: absolute로 위치 재조정 > TODO: content-container의 크기 및 레이아웃 재조정 예정(width값이 1296px인데 1332px로 출력 -> flex 박스 gap 조정 예정)
> content-container에 width 속성 추가 => 바깥으로 밀려나는 레이아웃 수정
> 모달 버튼에 카카오 로고 삽입 > 모양 변경
> 이벤트 scroll에서 wheel로 변경 > onScrollHeader 함수 파라미터에 이벤트 객체 넣은 후, e.deltaY로 휠 이벤트 제어
> 휠업 시, 헤더가 나타나는 기능 구현
> 기존 700px을 635로 변경
|
시멘틱 태그, 라이브러리 없이 바닐라 JS로 동적 UI구현, git commit, SCSS, BEM 모두 너무 잘하셨네요 |
|
index.html의 코드 길이가 생각보다 짧아서 놀랐고 모듈화나 깃 메시지 등 많은걸 배워갈 수 있던 프로젝트라고 생각합니다. 특히 주석으로 해당 코드가 어떤식으로 쓰이는지 한눈에 볼 수 있어서 정말 좋았습니다! 과제 고생 많으셨습니다~~ |
| <link rel="stylesheet" href="src/css/modal.css" /> | ||
| </head> | ||
| <body> | ||
| <noscript>자바스크립트를 켜주세요!</noscript> |
There was a problem hiding this comment.
noscript 태그의 활용은 역시 개념만 알았으나 활용을 전혀 못했던 저의 대한 자기반성을 일깨워줍니다..
There was a problem hiding this comment.
noscript 태그는 사실 그렇게 중요하진 않지만 브라우저를 사용하시는 사용자분들이 드물게 브라우저의 스크립트 기능을 끄시는 분이 있어요. 예전에 실무에서도 이런분들이 많다는 분들 때문에 noscript 태그를 사용하는 것을 습관화 했습니다. 도움 되셨다니 참 다행입니다^^
| if (window.scrollY >= 1000) { | ||
| leftContent.style.position = "absolute"; | ||
| leftContent.style.top = "635px"; | ||
| } |
There was a problem hiding this comment.
뷰포트 값 기준이 아닌 scrollY값으로 기준을 삼으신 이유가 궁금합니다!
There was a problem hiding this comment.
사실 부끄럽습니다만 뷰포트 기준을 잡는걸 까먹었어요 ㅠㅠ 그래서 임기응변으로 console.log로 window 객체에 어떤 이벤트 객체가 있는지 확인하는 과정에서 y축으로 변화하는 객체를 찾아서 조작을 했습니다. 희태님 코멘트 보고 갑자기 뷰포트 값이 생각났습니다 ㅜㅜ 소중한 의견 감사합니다^^
| const tech = gnb[2].querySelector(".tech"); | ||
| const promises = gnb[3].querySelector(".promises"); | ||
|
|
||
| // 서브메뉴 이벤트 함수 |
There was a problem hiding this comment.
저는 모듈화도 하지 못해서 상당히 JS파일이 난잡한데, 모듈화된 JS 파일 내에서도 주석처리를 통해 세분화하여 동작 의도를 표현한 것은 꼭 제가 배워가겠습니다 !!
There was a problem hiding this comment.
저도 실수를 많이 하는 편이라 실수를 하지 않고 효율적으로 프로그래밍을 하기 위해서 열심히 습관을 들였던게 다행히 빛을 발했네요^^
| &:first-child { | ||
| margin: 0; | ||
| } | ||
| &:nth-child(2), | ||
| &:nth-child(3) { | ||
| color: #000; | ||
| font-weight: 700; | ||
| margin-left: 24px; | ||
| } | ||
| &:nth-child(4), | ||
| &:nth-child(5), | ||
| &:nth-child(6), | ||
| &:nth-child(7), | ||
| &:nth-child(8), | ||
| &:nth-child(9), | ||
| &:last-child { | ||
| margin-left: 24px; |
There was a problem hiding this comment.
SCSS의 ampersand(&)와 nth-child()를 활용하니 훨씬 더 간결하고 보기 편하네요! 이것 또한 배워갑니다!!
There was a problem hiding this comment.
스타일링 시 고민을 조금 더 했어야하나 하는 아쉬움이 많이 남았습니다 ㅜㅜ 정말 아쉬운 부분 중 하나이지만 그래도 좋게 봐주셔서 감사합니다 ㅎㅎ
Kakao 웹페이지 클론코딩
링크 - https://pildrum-kakao-clone.netlify.app/
원본 페이지
링크 - https://www.kakaocorp.com/page/
제작기간 - 3월 27일 ~ 4월 6일
사용 기술
주의사항
개발 사항
PC 레이아웃 적용(반응형이 아니라서 뷰포트 줄어들 시 레이아웃 깨질 수 있음 -> 추후 개선 예정)
스크롤 시 상단 메뉴가 자연스럽게 올라가며 없어지는 기능 구현
컨텐츠 영역 왼쪽 배너도 스크롤 시 자연스럽게 따라와서 특정 구간에서 붙음(밑으로 내려올 시 부자연스럽게 특정 구간에 붙는 버그 발생! => 이 부분도 역시 개선해야 함)
상단 메뉴 클릭시 서브메뉴 나타나는 기능 구현
실제 홈페이지로 갈 수 있게 모달창에 링크 구현
실제 홈페이지와 최대한 유사하게 만드려고 스타일링은 원본 코드 참조
자바스크립트의 경우에는 모두 직접 구현
개선 사항