KDT0_ShimJeongAh 이솝 클론 코딩 #47
Conversation
|
너무 고생하셨습니다~~! |
|
스크롤에 따라 header가 나타나는 부분 어떻게 구현하셨는지 궁금했는데, scroll 이벤트 js 소스코드 잘 보고 배웠습니다~! 사이트 멋있네요! |
|
클래스 이름들이 직관적이어서 보기에 너무 편합니다. 그리고 자주 사용하는 flex나 gird 속성을 클래스로 만들어 놓고 사용하는 거 정말 좋은 방법인 것 같습니다. 잘 배웠습니다! |
|
swiper js를 활용하여 슬라이더를 깔끔하게 구현하셔서 저도 같은 고민을 하던 사람으로서 참고할 부분이 많았습니다! |
|
common.css에 자주 사용하는 부분들을 미리 class로 빼두어 활용하는 것이 코드 가독성도 좋고 편리한 것 같습니다 . |
|
|
||
| .find-skin-type { | ||
| color: #fffef2; | ||
| background: url(https://www.aesop.com/u1nb1km7t5q7/3YaJbvUsAnHr9Wnb6GTU7m/9ce27fe81388b8726f41d3ce91bb2c77/Aesop_Healthy_Skin_Care_and_Support_2022_Web_Homepage_Primary_Consultant_Full_Bleed_Desktop_L_2880x1044px.jpg) center center / cover no-repeat; |
There was a problem hiding this comment.
background 스타일 사용할때 한줄로 축약해서 사용하신 것 매우 좋은것 같습니다 :)
css/index.css
Outdated
| align-items: center; | ||
| background-color: #fffef2; | ||
| font-size: calc(10px + 0.3vw); | ||
| border-bottom: 1px solid rgba(51, 51, 51, 0.2); |
There was a problem hiding this comment.
만약 반응형을 사용하시려면 미디어 쿼리를 통해 반응형 페이지를 구현할 수 있을것 같아요!
예를 들어 네비게이션 바에서 모바일, 태블릿 등의 사이즈에서 패딩을 조절한다면
@media (max-width: 800px) { // 모바일 기준을 800px으로 설정한다면
padding: 5px 0;
}
이런식으로 padding의 사이즈를 조절할 수 있을것 같아요!
미디어쿼리에 대해 자세히 공부해보면 좋을것 같습니다 :)
js/main.js
Outdated
|
|
||
| const fadeEls = document.querySelectorAll(".fade") | ||
|
|
||
| fadeEls.forEach((fadeEl, i) => { |
There was a problem hiding this comment.
배열의 foreach문에서 parameter로 (fadeEl, i) fadeEls배열의 element와 index의 i를 사용하신것 같습니다.
그런데 index인 i를 사용하지 않으시면 생략하셔도 좋습니다.
✅ Deploy Preview for aesop-clone-yfe ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Aesop 웹사이트 클론코딩
원본 링크 : https://www.aesop.com/kr/c/skin/
클론 데모 : https://aesop-clone-yfe.netlify.app/
📅 프로젝트 기간
2023.07.24 ~ 2023.07.28
프로젝트 소개
header,nav,section,footer등 시멘틱 태그 활용flex,grid를 이용한 레이아웃 구조swiper.js를 이용한 슬라이더 구현hover시 css 애니메이션 동작🖥 구현 내용
🕹 주요 기능
2. 스크롤에 따라 사라지고 나타나는 헤더
3. swiper.js 라이브러리를 이용한 제품 슬라이더
4. 그리드 디스플레이와 hover시 이미지가 어두워지는 효과
JS를 사용한 부분
보완하고 싶은 부분
::after::before등을 이용한 장식적으로 사용된 요소들(화살표 등) 치환. 더 간결한 마크업