Update README.md

README.md

@@ -1 +1,202 @@
-# pf4-hitejinro
+# HITE 디자인클론코딩
+<br>
+
+## 프로젝트 명
+ HITE 홈페이지 디자인클론코딩
+
+## 프로젝트 참가자
+  이젠IT아카데미 강사, 수강생
+
+## 프로젝트 기간
+  202.  .  ~
+
+## 프로젝트 목표
+- 반응형 웹사이트(3단계 웹,PC, 태블렛) 제작 방법 교육
+
+## 프로젝트 과정  ~다를 수 있음~
+
+###  1. 기존 웹사이트 분석
+
+>#### 하이트진로
+  + 주소: https://hitejinro.com/index.asp
+  + 분야(업종): 기업소개
+
+>#### 사이트 목적
++ 기업 소개 (회사 소개, ESG, 투자정보)
++ 자사 브랜드 및 상품 소개
+
+>#### 타겟층
++ 20-30대 , 30-40대
+
+>#### 디자인 컨셉
++ 역동적인
+
+>#### 주요컨텐츠
++ 사진
+
+>#### 주요색상
++ BLUE
+
+>#### 폰트
++  NanumBarunGothic, "나눔바른고딕", "나눔고딕", NanumGothic, "돋움", Dotum, sans-serif
+
+>#### 기능 및 섹션
+
++ 헤더<br>
+  + 정보: 로고, 언어선택, 메뉴 네비게이션, 즐겨찾기, 검색<br>
+  + 작동방법: <br>
++ 타이틀
+	+ 정보: 제품 이미지<br>
+	+ 작동방법: 이미지 슬라이더<br>
++ 컬렉션
+	+ 정보: 자사 제품 브랜드 소개<br>
+	+ 작동방법: Click 이벤트<br>
+ + NEWS
+  	+ 정보: 자사 관련 뉴스 소개<br>
+	+ 작동방법: 링크 클릭시 자사 사이트로 이동<br>
++ SNS
+	+ 정보: 자사 SNS 이벤트 및 제품 소식<br>
+	+ 작동방법: 이미지 클릭시 타사이트 이동<br>
++ Footer
+	+ 정보: 로고, 이용약관, 주소, 패밀리사이트, 카피라이트<br>
+	+ 작동방법:
+
+ >#### 사이트맵
+ 
+ >#### 홈페이지 사진
+<br>
+
+### 2. 디자인 클론 코딩
+
+>#### 기술 스텍
+(프로젝트를 개발할 때 사용한 기술 스택과 도구를 나열)
+- HTML5
+- css
+- SASS
+- jquery
+- javascript
+>#### [HTML]
+- 헤더<br>
+  	- 구성: <br>
+	- 마크업: div> <br>
+ ```bash
+<h1>제목</h1>
+```
+- 타이틀<br>
+	- 구성: <br>
+	- 마크업:<br>
+- 컬렉션<br>
+	- 구성: <br>
+	- 마크업:<br>
+- NEWS<br>
+  	- 구성: <br>
+	- 마크업:<br>
+- SNS<br>
+ 	- 구성: <br>
+	- 마크업:<br>
+- Footer<br>
+  	- 구성: <br>
+	- 마크업:<br>
+
+>#### css
+   - 헤더<br>
+	- 레이아웃:<br> 
+	- 효과:<br>
+  - 타이틀<br>
+	- 레이아웃: <br>
+	- 효과: <br>
+  - 컬렉션<br>
+	- 레이아웃:<br>
+	- 효과:<br>
+  - NEWS<br>
+	- 레이아웃:<br>
+	- 효과:<br>
+   - SNS<br>
+	- 레이아웃:<br>
+	- 효과: 이미지 마우스오버시 설명 나타남<br>
+  - Footer<br>
+	- 레이아웃:<br>
+	- 효과:<br>
+>#### jquery
+- 헤더
+	- 매서드:
+- 타이틀
+	- 매서드:
+- 컬렉션
+	- 매서드:
+- SNS
+	- 매서드:
+- NEWS
+	- 매서드:
+- Footer
+	- 매서드:
+
+>#### 개선 사항 (기존 웹사이트 디자인에서 수정 및 추가작업)
+1. 헤더 로고 및 ham 버튼
+
+>#### 적용화면
+
+<br>
+
+### 3. 오류 및 수정 (프로젝트 진행 중 발생한 오류와 해결 방법)
+- service 부분 제이쿼리 단계별 수정
+- 헤더
+	- 오류:
+	- 수정내역:
+- 타이틀
+	- 오류:
+	- 수정내역:
+- 컬렉션
+	- 오류:
+	- 수정내역:
+- SNS
+	- 오류:
+	- 수정내역:
+- NEWS
+	- 오류:
+	- 수정내역:
+- Footer
+	- 오류:
+	- 수정내역:
+
+
+<h3 align="left">Languages and Tools:</h3>
+<p align="left" style="display: flex; gap: 10px; background-color: #ccc;">
+    <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original-wordmark.svg" alt="css3" width="40" height="40"/>
+    <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original-wordmark.svg" alt="html5" width="40" height="40"/>
+    <img src="https://www.vectorlogo.zone/logos/adobe_illustrator/adobe_illustrator-icon.svg" alt="illustrator" width="40" height="40"/>
+    <img src="https://upload.wikimedia.org/wikipedia/commons/d/d1/Ionic_Logo.svg" alt="ionic" width="40" height="40"/>
+    <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-original.svg" alt="javascript" width="40" height="40"/>
+    <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/nodejs/nodejs-original-wordmark.svg" alt="nodejs" width="40" height="40"/>
+    <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/photoshop/photoshop-line.svg" alt="photoshop" width="40" height="40"/>
+    <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/sass/sass-original.svg" alt="sass" width="40" height="40"/>
+    <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/vuejs/vuejs-original-wordmark.svg" alt="vuejs" width="40" height="40"/>
+</p>
+
+<br>
+
+## 향후 계획
+(추가적인 기능 개발, 디자인 개선, 사용자 피드백 수렴 등)
+- 기능
+  a 링크 연결
+- 디자인
+- 피드백
+  사용 후 수정
+<br>
+
+## 얻은 점
+[제이쿼리 메서드 학습]
+- attr
+- resize
+- 변수
+- windowsize
+- if/else문
+
+<br>
+
+## 작성자 정보
+(이메일 주소나 연락처 정보를 추가)<br>
+<img style="vertical-align: -10;" width="48" height="48"  src="https://img.icons8.com/color/48/gmail-new.png" alt="gmail-new" /> onjeong0721@gmail.com<br>
+<img width="48" height="48" src="https://img.icons8.com/fluency/48/instagram-new.png" alt="instagram-new"/> @onjeong721
+
+