KDT0_JangSuBin2 알툴즈 클론코딩 (기존 PR close 후 새로운 PR)

[wkdtnqls0506]

💊 알툴즈 홈페이지 클론코딩 💊

---

🧷 알툴즈 url : https://altools.co.kr/

🧷 알툴즈 클론코딩 url : https://64c3784440213655395c11f1--friendly-cendol-995833.netlify.app/

🗓️ 과제 기간

---

2023.07.24 ~ 2023.07.28

🌀 과제 요구사항

---

필수 요구사항

[✔️] 과제에 대한 설명을 포함한 README.md 파일을 제공하세요!

[✔️] 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시하세요!

[✔️] 과정에서 사용한 프로젝트 폴더/파일이 모두 포함돼야 합니다, 일부 파일만 제출하지 마세요!

[✔️] 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다.

선택 요구사항

[✔️] <header>, <section> 등 시멘틱 태그를 최대한 활용해보세요.

[✔️] 실제 사이트의 레거시 코드 활용보단 최신의 CSS Flex 혹은 Grid 등을 활용해보세요.

[ ] 부분적으로 BEM 방법론을 도입해보세요.

[✔️] JS가 필요한 부분은 되도록 생략하되 이유를 명시해보세요.(CSS로 대체 가능한지 피드백이 있을 수 있겠죠?!)

[✔️] JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현해보세요.(JS 과제가 아니니까 가볍게 구현하시길 추천해요)

[ ] SCSS 등의 CSS 전처리도구를 도입해보세요.

[ ] SCSS 컴파일에 Webpack이나 Parcel 같은 번들러를 활용해보세요.

🖥️ 화면 구성

---

메인화면1 (section home)	section AD-ZERO

section license	section altools-list

section slide	section grid

section etc & Footer

• Header, Main(7개의 section으로 구성), Footer 나누어 html 작성

✔️ JavaScript를 활용한 구현

---

• header의 세로 길이를 HTMLElement.offsetHeight 속성을 이용하여 요소의 높이를 정수로 받아옵니다.
• Window 인터페이스의 scrollY를 사용하여 문서가 수직으로 얼마나 스크롤 됐는지 픽셀값으로 반환한 후
• HTMLElement.offsetHeight 속성을 이용하여 가져온 header의 높이와 window.scrollY의 값을 비교하여
  • window.scrollY의 높이가 더 클 경우엔 배경색이 바뀔 수 있는 class를 추가해줍니다.
  • window.scrollY의 높이가 더 작을 경우엔 추가했던 class를 삭제합니다.

📖 더 보완해야 할 점

---

◻️ 이미지 슬라이드 부분의 구현 - css로만 구현하려고 하니 꽤나 복잡해서 이미지만 삽입했습니다..🥲

◻️ 반응형 모바일 웹 사이트도 구현해보기

◻️ css를 작성할 때, 공통이 되는 부분은 root를 사용하여 자주 쓰는 조건들을 따로 변수로 설정하기

◻️ html을 좀 더 간결하게 표현될 수 있도록 수정하기

◻️ html class 이름을 좀 더 직관적으로 보일 수 있게 보완하기

[minseokiim]

고생하셨어요 👍

• 리드미 작성을 꼼꼼하게 하셔서 저도 배워가요!
• 클래스 이름이 보기 쉽게 정리되어있어서 한눈에 보기 좋아요.

[jongsujin]

고생 많으셨고 너무 잘하신 것 같습니다!

1. 앞서 민서님 말씀대로 리드미 작성이 너무 보기 좋게 잘 되어 있어서 많이 배웠습니다!
2. offsetHeight 속성에 대해 배울 수 있던 것 같아 감사합니다!

[jinjoo-jung]

리드미도 깔끔하고 클래스 이름을 보기 쉽게 작성해주신 것 같아요!
transition 사용한 것도 배울 수 있었습니다! 수고하셨어요 👍🏻

[syb0127]

다들 생각이 비슷했던거 같습니다 ㅋㅋ 저도 리드미에 모든 페이지가 잘 정리되어 있어서 한 눈에 보기 편했어요! Navbar 저랑 같은 디자인으로 구현하셨길래 정말 반가웠습니다. 페이지도 깔끔하게 잘 만드셨습니다. 수고하셨어요~

[jungHyeonS]

수빈님 정말로 고생하셨습니다~
너무 깔끔하게 작성해주셔서 제가 따로 코드리뷰를 크게 해드릴 부분이 없는거같습니다
스크립트 에 defer 속성까지 정말로 잘작성해주신거같고 추후에는 웹 접근성 부분한 한번 고민해주시면 좋을꺼깥습니다~

[jungHyeonS]

웹 접근성을 위해 이미지 태그에 alt 태그를 꼭 넣어주시면 좋을꺼같습니다~

[wkdtnqls0506]

네! 말씀하신 부분 다시 수정해보겠습니다!😁😁