KDT1-FE · wkdtnqls0506 · Jul 30, 2023 · Jul 30, 2023 · Jul 30, 2023
diff --git a/README.md b/README.md
@@ -1,45 +1,91 @@
-[참고 내용]
+## 💊 알툴즈 홈페이지 클론코딩 💊
 
-👀 자신이 원하는 사이트 레이아웃 클론
-원하는 사이트(페이지)를 자유롭게 선택하고 레이아웃을 클론 코딩하세요.
-평소에 도전해 보고 싶었거나 혹은 자신의 수준에 맞는 사이트(페이지)를 선택하세요.
-과제 수행 및 리뷰 기간은 별도 공지를 참고하세요!
+---
 
-과제 수행 및 제출 방법
+🧷 알툴즈 url : https://altools.co.kr/
 
-1. 현재 저장소를 로컬에 클론(Clone)합니다.
-2. 자신의 본명으로 브랜치를 생성합니다.(구분 가능하도록 본명을 꼭 파스칼케이스로 표시하세요, git branch KDT0_이름)
-3. 자신의 본명 브랜치에서 과제를 수행합니다.
-4. 과제 수행이 완료되면, 자신의 본명 브랜치를 원격 저장소에 푸시(Push)합니다.(main 브랜치에 푸시하지 않도록 꼭 주의하세요, git push origin KDT0_이름)
-5. 저장소에서 main 브랜치를 대상으로 Pull Request 생성하면, 과제 제출이 완료됩니다!(E.g, main <== KDT0_이름)
+🧷 알툴즈 클론코딩 url : https://64c3784440213655395c11f1--friendly-cendol-995833.netlify.app/
 
+### 🗓️ 과제 기간
 
-- main 혹은 다른 사람의 브랜치로 절대 병합하지 않도록 주의하세요!
-- Pull Request에서 보이는 설명을 다른 사람들이 이해하기 쉽도록 꼼꼼하게 작성하세요!
-- Pull Request에서 과제 제출 후 절대 병합(Merge)하지 않도록 주의하세요!
-- 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요!
+---
 
-필수 요구사항
+2023.07.24 ~ 2023.07.28
 
-- 과제에 대한 설명을 포함한 README.md 파일을 제공하세요!
-- 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시하세요!
-- 과정에서 사용한 프로젝트 폴더/파일이 모두 포함돼야 합니다, 일부 파일만 제출하지 마세요!
-- 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다.
+### 🌀 과제 요구사항
 
-선택 요구사항
+---
 
-- < header >, < section > 등 시멘틱 태그를 최대한 활용해보세요.
-- 실제 사이트의 레거시 코드 활용보단 최신의 CSS Flex 혹은 Grid 등을 활용해보세요.
-- 부분적으로 BEM 방법론을 도입해보세요.
-- JS가 필요한 부분은 되도록 생략하되 이유를 명시해보세요.(CSS로 대체 가능한지 피드백이 있을 수 있겠죠?!)
-- JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현해보세요.(JS 과제가 아니니까 가볍게 구현하시길 추천해요)
+#### 필수 요구사항
 
-손쉬운 이미지 추출 방법
+[✔️] 과제에 대한 설명을 포함한 `README.md` 파일을 제공하세요!
 
-사이트 클론에 필요한 이미지를 좀 더 쉽게 추출하기 위해서 Chrome 확장 프로그램인 Image Downloader를 사용하세요.
+[✔️] 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시하세요!
 
-1. 원하는 사이트 접속
-2. Image Downloader 확장 프로그램 실행
-3. 다운로드 원하는 이미지 선택
-4. 서브 폴더 이름(Save to subfolder) 명시
-5. 다운로드!
+[✔️] 과정에서 사용한 프로젝트 폴더/파일이 모두 포함돼야 합니다, 일부 파일만 제출하지 마세요!
+
+[✔️] 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다.
+
+#### 선택 요구사항
+
+[✔️] `<header>`, `<section>` 등 시멘틱 태그를 최대한 활용해보세요.
+
+[✔️] 실제 사이트의 레거시 코드 활용보단 최신의 CSS Flex 혹은 Grid 등을 활용해보세요.
+
+[ ] 부분적으로 BEM 방법론을 도입해보세요.
+
+[✔️] JS가 필요한 부분은 되도록 생략하되 이유를 명시해보세요.(CSS로 대체 가능한지 피드백이 있을 수 있겠죠?!)
+
+[✔️] JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현해보세요.(JS 과제가 아니니까 가볍게 구현하시길 추천해요)
+
+[ ] SCSS 등의 CSS 전처리도구를 도입해보세요.
+
+[ ] SCSS 컴파일에 Webpack이나 Parcel 같은 번들러를 활용해보세요.
+
+### 🖥️ 화면 구성
+
+---
+
+| 메인화면1 (section home)                                                                                                                                                                                   | section AD-ZERO                                                                                       |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
+| ![](https://velog.velcdn.com/images/wkdtnqls0506/post/e27ffad6-b274-45be-9405-6167aad066dd/image.png)![](https://velog.velcdn.com/images/wkdtnqls0506/post/c0a8b877-8e49-4ea8-8222-f3d18bc11755/image.png) | ![](https://velog.velcdn.com/images/wkdtnqls0506/post/d3176258-25ee-452b-99c4-9cd4b96f9e1a/image.png) |
+
+| section license                                                                                       | section altools-list                                                                                  |
+| ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
+| ![](https://velog.velcdn.com/images/wkdtnqls0506/post/f40e77af-b30c-4f0c-a6be-92ee87a19e66/image.png) | ![](https://velog.velcdn.com/images/wkdtnqls0506/post/342c7170-e2ae-4fae-b3db-67c47782c7d3/image.png) |
+
+| section slide                                                                                         | section grid                                                                                          |
+| ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
+| ![](https://velog.velcdn.com/images/wkdtnqls0506/post/38e887f2-4e31-4019-9738-3809b882f22a/image.png) | ![](https://velog.velcdn.com/images/wkdtnqls0506/post/45cd9aee-3f43-489c-8462-6f033cec4aa8/image.png) |
+
+| section etc & Footer                                                                                  |
+| ----------------------------------------------------------------------------------------------------- |
+| ![](https://velog.velcdn.com/images/wkdtnqls0506/post/58a6384c-8aeb-46c1-9335-466f3f3d7031/image.png) |
+
+- Header, Main(7개의 section으로 구성), Footer 나누어 html 작성
+
+### ✔️ JavaScript를 활용한 구현
+
+---
+
+![](https://velog.velcdn.com/images/wkdtnqls0506/post/871303f8-d0f3-4d3f-a9ac-95fd929fa98a/image.gif)
+
+- header의 세로 길이를 HTMLElement.offsetHeight 속성을 이용하여 요소의 높이를 정수로 받아옵니다.
+- Window 인터페이스의 scrollY를 사용하여 문서가 수직으로 얼마나 스크롤 됐는지 픽셀값으로 반환한 후
+- HTMLElement.offsetHeight 속성을 이용하여 가져온 header의 높이와 window.scrollY의 값을 비교하여
+  - window.scrollY의 높이가 더 클 경우엔 배경색이 바뀔 수 있는 class를 추가해줍니다.
+  - window.scrollY의 높이가 더 작을 경우엔 추가했던 class를 삭제합니다.
+
+### 📖 더 보완해야 할 점
+
+---
+
+◻️ 이미지 슬라이드 부분의 구현 - css로만 구현하려고 하니 꽤나 복잡해서 이미지만 삽입했습니다..🥲
+
+◻️ 반응형 모바일 웹 사이트도 구현해보기
+
+◻️ css를 작성할 때, 공통이 되는 부분은 root를 사용하여 자주 쓰는 조건들을 따로 변수로 설정하기
+
+◻️ html을 좀 더 간결하게 표현될 수 있도록 수정하기
+
+◻️ html class 이름을 좀 더 직관적으로 보일 수 있게 보완하기
diff --git a/Y_FE_HTML_CSS b/Y_FE_HTML_CSS
diff --git a/images/banner_main_1.png b/images/banner_main_1.png
diff --git a/images/banner_main_1_3x.png b/images/banner_main_1_3x.png
diff --git a/images/banner_main_2.png b/images/banner_main_2.png
diff --git a/images/banner_main_2_3x.png b/images/banner_main_2_3x.png
diff --git a/images/banner_main_3.png b/images/banner_main_3.png
diff --git a/images/banner_main_3_3x.png b/images/banner_main_3_3x.png
diff --git a/images/bg_adzero.59f100d4.png b/images/bg_adzero.59f100d4.png
diff --git a/images/bg_business.8752c5a0.png b/images/bg_business.8752c5a0.png
diff --git a/images/bg_gridBox_1.81b08ab0.png b/images/bg_gridBox_1.81b08ab0.png
diff --git a/images/bg_gridBox_2.d7a18463.png b/images/bg_gridBox_2.d7a18463.png
diff --git a/images/bg_gridBox_2.pdf.png b/images/bg_gridBox_2.pdf.png
diff --git a/images/bg_gridBox_3.91b1293b.png b/images/bg_gridBox_3.91b1293b.png
diff --git a/images/bg_gridBox_4.26f2acda.png b/images/bg_gridBox_4.26f2acda.png
diff --git a/images/bg_gridBox_4.파일명.png b/images/bg_gridBox_4.파일명.png
diff --git a/images/bg_gridBox_5.b11379ab.png b/images/bg_gridBox_5.b11379ab.png
diff --git a/images/bg_gridBox_5.알씨.png b/images/bg_gridBox_5.알씨.png
diff --git a/images/bg_news.png b/images/bg_news.png
diff --git a/images/favicon-32x32.f4f4eaba.png b/images/favicon-32x32.f4f4eaba.png
diff --git a/images/icon_120_alan.png b/images/icon_120_alan.png
diff --git a/images/icon_120_aldrive.png b/images/icon_120_aldrive.png
diff --git a/images/icon_120_alpdf.png b/images/icon_120_alpdf.png
diff --git a/images/icon_120_alsee.png b/images/icon_120_alsee.png
diff --git a/images/icon_120_alsong.png b/images/icon_120_alsong.png
diff --git a/images/icon_120_alsongMobile.png b/images/icon_120_alsongMobile.png
diff --git a/images/icon_120_alyac.png b/images/icon_120_alyac.png
diff --git a/images/icon_120_alyacMobile.png b/images/icon_120_alyacMobile.png
diff --git a/images/icon_120_alzip.png b/images/icon_120_alzip.png
diff --git a/images/icon_120_alzipMobile.png b/images/icon_120_alzipMobile.png
diff --git a/images/icon_120_picnicMobile.png b/images/icon_120_picnicMobile.png
diff --git a/images/icon_120_psp.png b/images/icon_120_psp.png
diff --git a/images/icon_120_알캡쳐.png b/images/icon_120_알캡쳐.png
diff --git a/images/icon_blog.d455c7a6.png b/images/icon_blog.d455c7a6.png
diff --git a/images/icon_estsecurity.9280af33.png b/images/icon_estsecurity.9280af33.png
diff --git a/images/icon_estsoft.1d5ce93a.png b/images/icon_estsoft.1d5ce93a.png
diff --git a/images/icon_pc_altools.png b/images/icon_pc_altools.png
diff --git a/images/icon_알PDF.png b/images/icon_알PDF.png
diff --git a/images/icon_알드라이브.png b/images/icon_알드라이브.png
diff --git a/images/icon_알송.png b/images/icon_알송.png
diff --git a/images/icon_알씨.png b/images/icon_알씨.png
diff --git a/images/icon_알약.png b/images/icon_알약.png
diff --git a/images/icon_알집.png b/images/icon_알집.png
diff --git a/images/icon_알캡쳐.png b/images/icon_알캡쳐.png
diff --git a/images/icon_통합팩.png b/images/icon_통합팩.png
diff --git a/images/img_mainSlide_1.98cc2793.png b/images/img_mainSlide_1.98cc2793.png
diff --git a/images/img_mainSlide_1_3x.c51bd0ec.png b/images/img_mainSlide_1_3x.c51bd0ec.png
diff --git a/images/img_mainSlide_2.29a39dd2.png b/images/img_mainSlide_2.29a39dd2.png
diff --git a/images/img_mainSlide_2_3x.3dad0c1a.png b/images/img_mainSlide_2_3x.3dad0c1a.png
diff --git a/images/img_mainSlide_3.fe8eba3d.png b/images/img_mainSlide_3.fe8eba3d.png
diff --git a/images/img_mainSlide_3_3x.0a6c8269.png b/images/img_mainSlide_3_3x.0a6c8269.png
diff --git a/images/img_알PDF.png b/images/img_알PDF.png
diff --git a/images/img_알드라이브.png b/images/img_알드라이브.png
diff --git a/images/img_알송.png b/images/img_알송.png
diff --git a/images/img_알씨.png b/images/img_알씨.png
diff --git a/images/img_알약.png b/images/img_알약.png
diff --git a/images/img_알집.png b/images/img_알집.png
diff --git a/images/img_알캡쳐.png b/images/img_알캡쳐.png
diff --git a/images/img_알통합팩.png b/images/img_알통합팩.png
diff --git a/images/sns_facebook.png b/images/sns_facebook.png
diff --git a/images/sns_home.png b/images/sns_home.png
diff --git a/images/sns_message.png b/images/sns_message.png
diff --git a/images/spr_footer_icon.e708fb81.png b/images/spr_footer_icon.e708fb81.png
diff --git a/images/spr_logo_estsoft.722c4838.png b/images/spr_logo_estsoft.722c4838.png
diff --git a/images/오른쪽 화살표.png b/images/오른쪽 화살표.png
diff --git a/images/왼쪽 화살표.png b/images/왼쪽 화살표.png