$$config title: 장준원 모작 keywords: - html - css $$ # 보기페이지 단축키 - 현재문서 수정하기 : Ctrl + E - 저장 : Ctrl + S
## 유튜브 링크 걸기 $$youtube $$
## 코드 하이라이팅 ```html

``` ```css div {color: #fff;} ```
## 텍스트 커스텀 - [hax컬러 확인 링크 바로가기]( https://www.google.com/search?q=color+picker&oq=color+pi&aqs=chrome.0.0i433i512j69i57j0i512l8.11315j0j15&sourceid=chrome&ie=UTF-8) 텍스트 노란색 형광펜
## 숙제 ## 모작 ### 하나 손해보험 - 관련 사이트 : 하나 손해보험 [공식 홈페이지 이동](https://www.hanainsure.co.kr/) - 1단계: [하나 손해보험 탑바 모작 (완)](https://codepen.io/junwon9/pen/ZEmgoXq) - 2단계: [하나 손해보험 상단메뉴 모작 08.29(완)](https://codepen.io/junwon9/pen/XWoXGVO) ### 셀렉토 커피 - 관련 사이트: 셀렉토 커피 [공식 홈페이지 이동]() - 2단계: [셀렉토 커피 2차메뉴 모작 09.06(완)](https://codepen.io/junwon9/pen/abPJvQw) - 3단계: [반응형 탑바 09.09(완)](https://codepen.io/junwon9/pen/JjwWYzO) ### 카페24 창업센터 - 관련 사이트 :카페24 창업센터 [공식 홈페이지 이동](https://soho.cafe24.com/) - 1단계: [카페24 창업센터 탑바 모작 (완)](https://codepen.io/junwon9/pen/abPoVWy) ### LG UK - 관련 사이트: LG UK [공식 홈페이지 이동](https://www.lg.com/uk/) - 1단계: [LG UK 탑바 모작 (완)](https://codepen.io/junwon9/pen/xxmKmrm) ### apple - 관련 사이트: apple [공식 홈페이지 이동](https://www.apple.com/) - 1단계: [apple 탑바 모작 (완)](https://codepen.io/junwon9/pen/JjwjObN) ### 신차장 다이렉트 - 관련 사이트: 신차장 다이렉트 [공식 홈페이지 이동](https://direct.lotterentacar.net/main/main.do) - 1단계: [신차장 다이렉크 탑바 (완)](https://codepen.io/junwon9/pen/YzdPrKK) ### 현대자동차 - 관련 사이트: 현대자동차 [공식 홈페이지 이동](https://www.hyundai.com/kr/ko/e) - 1단계: [현대 자동차 탑바 모작 (완)](https://codepen.io/junwon9/pen/JjwoQMb) ### 씨벤티지 - 관련 사이트: 씨벤티지 [공식 홈페이지 이동](https://www.seavantage.com/kr) - 1단계: [씨밴티지 탑바 모작 (완)](https://codepen.io/junwon9/pen/ZEVGmNY?editors=1100) ### classbox - 관련 사이트: classbox [공식 홈페이지 이동](https://www.classboxenglish.com/intro.asp?page_ver=1012) - 1단계: [classbox 탑바 모작08.31(완)](https://codepen.io/junwon9/pen/zYyBqYq) ## 반응형 탑바 ### 1단계: [노란색 탑바](https://codepen.io/junwon9/pen/MWZKxoX) ### 2단계: [body, ul, li 노멀라이즈](https://codepen.io/junwon9/pen/RwErdLa?editors=1100) ### 3단계: [형태 잡기](https://codepen.io/junwon9/pen/gOZPEeg) ### 4단계: [로고 넣고 사이즈 조절 및 색상변경](https://codepen.io/junwon9/pen/MWZyopQ?editors=1100) ### 5단계: [폰트어썸 아이콘 적용](https://codepen.io/junwon9/pen/WNLwOZE) ### 6단계: [nav바 리스트 구조 마크업](https://codepen.io/junwon9/pen/xxmVrPB) ### 7단계: [li태그 한줄에 배치](https://codepen.io/junwon9/pen/LYMNLJP) ### 8단계: [조건에 맞춰 동일한 형태 구현](https://codepen.io/junwon9/pen/rNoewZo) ### 9단계: [li안에 텍스트 정렬](https://codepen.io/junwon9/pen/JjwXVgW?editors=1100 ) ### 10단계:[아이콘 색상을 배경색과 어울리게 각각 커스텀](https://codepen.io/junwon9/pen/GRPZapB)