$$config title: 도시락통 클론코딩 keywords: - 도시락통 - 클론코딩 $$ # 도시락통 클론코딩 +반응형 - [기존페이지](https://dosiraktong.com/Main/Index) - 작업 기간 : 2022-08/29 ~09/16 - 작업 시간 : 27시간 --- **Select** *some* text and ~~choose a~~ color from the toolbar. # 진행상황 ## 헤더 ### #1-1 헤더 마크업 - [codepen](https://codepen.io/motobi/pen/wvmLERe) - 5시간 - 진행 상황 1. 헤더 마크업 2. 페이지 스크롤 시 헤더 사이즈 및 배경색 변하는 효과내기 +자바스크립트 함수 3. 모바일 메뉴 버튼 마크업 및 커스텀 (일단 숨겨놓음) - 메모 - 기존 사이트 탑바의 자바스크립트 효과때문에 한참을 헤맸다. 실제로 적용된 자바스크립트의 내용을 보고 싶은데 볼 수 있는 방법을 모르겠다. <- 지인 찬스로 우여곡절 끝에 찾아내긴 함. - 자바스크립트의 함수는 기존 사이트가 어떻게 해놨냐에 따라 다르지만 대부분 보안상 알아보기 어려운 구조로 되어 있다고 한다. - 이번에는 운이 좋게 자바스크립트가 보여지는 사이트였지만, 그래도 갖다 쓰기엔 너무 내용이 복잡해서 그동안 수업시간에 배웠던 함수를 활용해서 거의 비슷하게 효과를 냈다. - 추후, 다른 클론코딩 사이트를 선정할 때는 자바스크립트 효과가 있는지, 코드 내에서 알아볼 수 있는지 등을 염두해두고 찾아야할 것 같다. - 추후 재작업해야할 것 : **기존사이트처럼 탑바 `bottom` 라인에 흰색 넣기** - 참고 사이트 - [페이지 스크롤 시 헤더 배경색 변경](https://stackoverflow.com/questions/28266651/change-header-background-colour-when-page-scrolls) - [기존사이트의자바스크립트페이지?](https://dosiraktong.com/Scripts/js/common.js) ### #1-2 탑바 메뉴 밑줄 애니메이션 효과 넣기 - [codepen](https://codepen.io/motobi/pen/dymxzPQ) - 30분 - 진행 상황 1. 탑바 메뉴 밑줄 애니메이션 효과 넣기 - 메모 - 핵심은 밑줄이 `a`에 갖혀 있어야 한다! - 우선 `a`에 position:relative;를 적용시키고 밑줄 부분이 될 `a::after`에는 position:absolute;를 적용시킨다. - 텍스트와 밑줄의 간격을 처음에는 단순하게 `a`에 `height` 를 줘서 조절했는데 미묘하게 맞질 않았다. 다시 기존 사이트의 코딩을 살펴보니 기존 사이트에선 `a::after`에 `bottom:-5px;`를 줘서 조절했다. 굿굿 - 수업 페이지에 잘 설명이 되어 있어서 작업하는데 큰 어려움이 없었다. - 이번처럼 실전에서 기존사이트의 코딩을 봐가면서 배운 것을 적용시킬 때는 그동안 애매하게 이해하던 부분을 다시 복습하는 계기가 된다. - 참고 사이트 - [수업 - 초간단한 ! 1차 메뉴 밑줄 애니메이션](https://codepen.io/vexxxx/pen/GRxxEeN) ### #1-3 탑바 반응형 작업 + 모바일 메뉴 작업 - [codepen](https://codepen.io/motobi/pen/oNqKeMR) - 3시간 - 진행 상황 1. 탑바 반응형 작업 (max-width:1280px; / max-width:1024px;) 2. 햄버거 버튼 애니메이션 효과 및 모바일 메뉴 작업 (max-width:1024px;) + 자바스크립트 함수 - 메모 - 이번 작업은 수업 내용을 주로 참고하면서 클로코딩을 해봤다. - 오랜만에 반응형 작업을 해봐서 그런지 처음에 좀 헤맸지만, 이제는 기존 사이트의 코드도 조금 익숙해져서 어떤 부분을 참고하고, 갖고 와야할지 어느정도 감이 오기 시작했다. - 오류 및 **해결** - ~~`mobile-menu`가 열린 상태에서 창의 너비를 넓힌 다음, 다시 줄이면 `mobile-menu`가 열린 채, 그대로 남아있다.~~ - ~~`mobile-menu`가 열린 상태에서 창의 너비를 넓혔다가 다시 줄였을 때에도 열려있는 모바일 메뉴가 닫혀 있게 하려면 자바스크립트에 아래의 함수를 적용하면 된다.~~ ```javascript $(window).resize(function () { //화면 사이즈가 변경 될 때 함수 실행 if ($(window).width() >= 1024) { // 만약 화면의 넓이가 1024보다 크거나 같을 때 $(".header__mobile-open").removeClass("active"); //remove $(".mobile-menu").removeClass("active"); //remove } }); ``` - 탑바 반응형 작업 중, 'max-width:1208px' 일때 상단 좌측 로고가 상하 센터에 있지 않고 아래로 치우쳐 있다. - 기존 사이트의 코딩에선 이 부분을 아래와 같이 적용 시켰지만, 나는 `logo image`를 `a` 의 자식으로 넣어서 작업했기 때문에 우선 임시방편으로 `.logo`의 `height:30px;`을 `height:45px;`로 조절해서 상하 센터를 맞췄다. <- 추후 다시 살펴볼 예정 ```css //기존 사이트 로고 관련 css 커스텀 .logo { width:150px; height: 30px; background: url(https://d01.wifidosirak.com/tong/images/common/logo_white.png) no-repeat center center; //이 부분이 상하 센터를 잡아줬나??? background-size: 100% auto; //이 부분도?? 상하 센터를 잡아주는건가??? } ``` - 참고 사이트 - [수업 - 햄버거 버튼](https://codepen.io/vexxxx/pen/qBxNMyN) - [수업 - 미디어쿼리예제](https://codepen.io/vexxxx/pen/WNXpxzx) - [수업 - 팝업 열고 닫기](https://codepen.io/jangka44/pen/ZEexRoe) <- 모바일메뉴 관련 다른 유형의 자바스크립트 함수도 있었지만 요번에는 이걸 토대로 적용해봤다. - [w3schools - jQuery resize() Method](https://www.w3schools.com/jquery/event_resize.asp) --- ## 슬라이드 ### #2-1 swiper 슬라이드 적용 + 커스텀 - [codepen](https://codepen.io/motobi/pen/RwyNNOd) - 4시간 30분 - 진행 상황 1. 슬라이드 - 메모 - 원래는 마크업을 먼저 시작 했지만, `top-bar`의 `transition`효과때문에 순서를 조금 바꿔 슬라이드를 탑바 작업 도중에 시작했다. (이미 해둔 탑바는 숨김처리하고 진행) - 기존 사이트의 슬라이드는 `swiper`가 아닌 `slick`이라는 라이브러리라 그대로 따라하진 못하고 `swiper`로 비슷하게 작업을 했다. 다시 복습하는 기분이었다. - 화살표 부분의 hover 기능을 넣는 부분에서 조금 헤맸지만, 검색의 도움없이 스스로 해결했다는 것에 큰 의의를 두고 싶다. - 참고 사이트 - [수업 - SWIPER #4 화면에 꽉찬 슬라이드 2개 만들기](https://codepen.io/vexxxx/pen/abYyOMN) - [수업 - 스와이퍼 강의 #6 navigation 위치 변경하기](https://codepen.io/vexxxx/pen/abYyOMN) - [슬라이드 속도 조절하기](https://ktsmemo.cafe24.com/s/SwiperJS/359) ### #2-2 슬라이드 반응형작업 - [codepen](https://codepen.io/motobi/pen/PoeqOME) - 2시간 30분 - 진행 상황 1. 슬라이드 반응형 작업 - 메모 - 반응형을 클론코딩할 때, 반응형이 된 곳을 일일이 다 찾아야하는 번거로움이 있었다. 여기서 드는 의문점. 내가 한 곳에(?) 모아놓고 작업한 반응형도 웹상에 업로드(?)되면 각각의 선택자 위치 안으로 뿔뿔이 흩어져 있게 되는걸까? - 원래(?)가 미디어쿼리에 적용한 코딩들은 개발자도구에서 각각의 선택자 위치에서 보여진다. - 반응형을 작업하면서 디테일한 부분의 변화까지 똑같이 하기 어려웠다.... - 오류 및 **해결** - ~~탑바 반응형 작업할 때는 아무 문제없이 적용이 됐는데, 작업한 슬라이드 반응형은 적용되지 않고 있다. 뭐가 문제일까?~~ - 오타도 있었고, 미디어쿼리 내에서 해당 css 선택자를 너무 짧게 써서 반응하지 않았다. (수정완료) - 자나깨나 오타조심! 선택자 너무 짧게 쓰지 않도록 주의하기! - ~~반응형 작업시 슬라이드 내의 각각의 `background-image`의 위치를 `top:0;`, `left:0;`으로 고정시키고 싶은데 잘 안된다.~~ ```css //처음 클론코딩할 때 코드, 이것 때문에 계속 이미지가 정중앙에 배치됐음 { background-position: 50% 50%; } //수정한 코드 { background-position: 0 0; } ``` - 참고 사이트 - [수업-미디어쿼리예제](https://codepen.io/vexxxx/pen/WNXpxzx) - [블로그-CSS / background-position / 배경 이미지의 위치를 정하는 속성](https://www.codingfactory.net/10595) --- ## 서비스 단락 ### #3-1 서비스 단락 마크업 + 커스텀 - [codepen](https://codepen.io/motobi/pen/jOxPZWb) - 1시간 30분 - 진행 상황 1. 서비스 단락 마크업 및 레이아웃 나누기 2. 서비스 단락 css 커스텀 - 메모 - 수업 시간에 배운 css 효과들을 실전에 적용해볼 수 있었다. - 기존사이트의 단락을 나누는 코딩이 반응형까지 고려한 것 같아서 그대로 적용해 봤다. - 참고 사이트 - [수업 - 이미지 호버시 이미지가 커지는 효과](https://codepen.io/jangka44/pen/MWpyOXw) - [블로그 - css-rotate](https://velog.io/@korea_webclass/css-rotate) ### #3-2 서비스 단락 반응형 작업 - [codepen](https://codepen.io/motobi/pen/abGOqJq) - 1시간 - 진행 상황 1. 서비스 단락 반응형 작업 - 메모 - 파트별(`top-bar`, `slide` `service`)로 나눠서 반응형 커스텀을 하고 있어서 아직까지 크게 어려움은 없지만, 이런 순서로 하는게 맞는 걸까? - 반응형 사이즈에 따라 폰트의 종류를 포함해서 크기나 간격도, 나름 기존 사이트의 수치대로 조절을 따라한다고 하는데 똑같아 지지 않고 미세하게 다르다. - 왜 다를까? 또 내가 놓치는 부분이 있는걸까? - 참고 사이트 - [수업-미디어쿼리예제](https://codepen.io/vexxxx/pen/WNXpxzx) --- ## 어바웃 단락 ### #4 어바읏 단락 마크업 + 커스텀 + 반응형 작업 - [codepen](https://codepen.io/motobi/pen/PoeGOqB) - 2시간 - 진행 상황 1. 어바웃 단락 마크업 및 레이아웃 나누기 2. 어바웃 단락 css 커스텀 3. 어바웃 단락 반응형 작업 - 메모 - `
`태그를 반응형일 때 없애는 방법을 두고 조금 헤맸다. - 기존 사이트의 코딩은 `
`태그에 클래스를 넣어서 자바스크립트로 처리한거 같았다. 왜냐하면, 개발자도구에 언제 `
`태그가 없어지는지 흔적이 없었다. - 이게 올바른 방법인지는 모르겠으나... 나는 css에서 그 클래스를 해당 반응형 사이즈 일때 `display:none;`으로 처리해서 안보이게 했다. - 단어 기준으로 줄바꿈 하는 속성을 자꾸 까먹는다... 제발 좀 외우도록 하자... ```css .선택자 { word-break:keep-all; //단어 기준으로 줄바꿈하는 속성 } ``` - 오류 및 해결 - ~~어바웃 단락 작업 도중에 서비스 단락과 어바웃 단락의 위아래 마진이 먹히질 않아서 초반에는 내 코드의 오타체크를 하느라 시간이 많이 지체됐었다.~~ - `마진 상쇄현상`의 근본적인 이해 필요 -> 추후 다시 살펴보기 - 하도 답답해서 구글에 `css, margin 안먹힐때` 로 검색해보니 `마진 상쇄현상`에 대한 글들이 많았다. 지금의 내 오류와 많이 비슷해보여서 바로 아래의 코드를 적용해봤더니 해결(?)되었다. - 아래의 코드는 마진 상쇄현상이 일어나는 `마진값이 이미 있는 선택자` 안에다가 추가해야한다. ```css .선택자 { display: inline-block; width:100%; } ``` - 참고 사이트 - [수업-미디어쿼리예제](https://codepen.io/vexxxx/pen/WNXpxzx) - [단어를 기준으로 줄바꿈하기(word-break:keep-all)](https://bskyvision.com/entry/html-%EB%9D%84%EC%96%B4%EC%93%B0%EA%B8%B0-%EA%B8%B0%EC%A4%80%EC%9C%BC%EB%A1%9C-%EA%B8%80-%EC%A0%95%EB%A0%AC%ED%95%98%EA%B8%B0) - [css 마진끼리 겹치는 마진상쇄(margin collapsing) 해결하기](https://sizzf.tistory.com/46) - [CSS 마진 상쇄(Margin-collapsing) 원리 완벽 이해](https://velog.io/@raram2/CSS-%EB%A7%88%EC%A7%84-%EC%83%81%EC%87%84Margin-collapsing-%EC%9B%90%EB%A6%AC-%EC%99%84%EB%B2%BD-%EC%9D%B4%ED%95%B4) --- ## 배너 단락(슬라이드) ### #5-1 배너 단락 마크업(swiper 라이브러리) - [codepen](https://codepen.io/motobi/pen/JjvRLbN) - 1시간 - 진행 상황 1. 배너 단락 마크업 및 레이아웃 나누기 - 메모 - 마크업 하는 도중에 배너단락이 스와이퍼 라이브러리로 만들었다는 것을 알았다... - 수업시간에 배운 스와이퍼 예제를 최대한 활용해서 마크업을 진행했다. - 참고 사이트 - [수업-스와이퍼 강의 #3 기본 슬라이드 2개 만들기](https://codepen.io/vexxxx/pen/GRxvJyv) ### #5-2 swiper 슬라이드 적용 및 커스텀 + 반응형 작업 - [codepen](https://codepen.io/motobi/pen/GRdNrMG) - 2시간 반 - 진행 상황 1. 배너 단락 스와이퍼 라이브러리 적용 및 커스텀 - 메모 - `클래스명`의 적절한 활용에 대해 조금 더 깊이 알게 된 계기가 되었다. - 기존 사이트의 코딩에선 같은 아이템 내에서 1,2,3 나누기보다 `members`, `talk`, `travel` 등의 각각의 관련 단어로 클래스명을 다르게 둬서 커스텀할 때 적절하게 활용한 것 같다. - 평소에는 안보이다가 반응형으로 나타나는 모럴팝업?을 단순 마우스 클릭으로 없어지게 하려면 어떻게 해야할까? 여기서 조금 고민을 많이 했다. - 지금까지 이런 유형은 대체로 `dispaly:none`으로 했다가 css에 .active(display:block;)를 추가한 다음, 자바스크립트의 addClass,removeClass함수를 활용해서 작동을 시켰는데 - 이번 코딩에선 나타나게하는 스타트 자체를 반응형 너비로 지정을 해놔서 처음에 멘붕이 살짝 왔다. 그러다가 자바스크립트에서도 css 속성을 변경할 수 있다는 것이 생각나 적용시켜봤다. - 근데 이게 맞는건가???? 그 외 다른 방법은 없는건가? - 오류 및 해결 - 반응형 작업시 해당 공간의 너비가 작아져야 하는데 적용이 되질 않는다. (해당 반응형 안의 다른 속성값은 적용되고 있음) ```css @media (max-width:1280px) { .main-banner .main-banner__title { font-size:24px; } .main-banner__desc { font-size: 16px; } .main-banner__link::after { //적용안되고있음 width: 70%; //100%->70%로 변경 } } ``` - 참고 사이트 - [수업-미디어쿼리예제](https://codepen.io/vexxxx/pen/WNXpxzx) - [수업-스와이퍼 강의 #5 슬라이드 2, 3칸으로 분할하기](https://codepen.io/vexxxx/pen/qBoXdLa) - [블로그-개발자도구에서 hover 확인하는 방법](https://velog.io/@leyuri/CSS-%ED%81%AC%EB%A1%AC-%EA%B0%9C%EB%B0%9C%EC%9E%90-%EB%8F%84%EA%B5%AC%EC%97%90%EC%84%9C-hover-%EB%A7%88%EC%9A%B0%EC%8A%A4-%EC%98%A4%EB%B2%84-%EC%83%81%ED%83%9C-%ED%99%95%EC%9D%B8%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95) - [수업-스와이퍼 강의 #12 반응형 슬라이드 만들기](https://codepen.io/vexxxx/pen/BarwKxw) - [블로그-swiper breakpoints: (반응형을 위한)](https://velog.io/@hsw7852/swiper-breakpoints-%EB%B0%98%EC%9D%91%ED%98%95%EC%9D%84-%EC%9C%84%ED%95%9C) --- ## 푸터 ### #6-1 맨 위로 돌아가기 버튼 작업 - [codepen](https://codepen.io/motobi/pen/xxjgwmq) - 2시간 - 진행 상황 1. `맨 위로 돌아가기 버튼` 마크업 및 커스텀 2. 자바스크립트 작업 - 메모 - 처음엔 이 부분이 css만으로 커스텀이 되어 있는 줄 알고 쉽게 생각했는데, 탑바에서 사용한 스크롤 관련 함수보다 더 업그레이드 된 작업이었다. - 해당 기능의 명칭이 어떻게 표현해야할지 몰라서 구글검색에서 시간이 많이 지체됐다. - 검색명칭은 검색을 하면 할수록 내 안(?)에서 내용이 다듬어졌다. 이 과정을 통해 구글링하는 키워드의 중요성을 크게 깨달았다. 근데 아직도 이걸 뭐라고 부르는지 모르겠다... - `css 화면 밑에서` -> `화면 맨 아래에서 css커스텀` -> `스크롤이 맨 밑으로 오는 순간` -> `스크롤 맨 아래 감지` - 그래도 괄목할만한 성과가 있었다. 구글링을 통해 얻게 된 함수의 기본 틀을 가지고 약간의 내용을 추가해서 내가 원하는 효과를 구현했다는 점이다. - 참고 사이트 - [블로그-맨 위로 부드럽게 스크롤 이동하는 방법](https://urliveblogger.blogspot.com/2021/01/jquery-scroll-to-top-smoothly.html) - [블로그-자바스크립트 관련 스크롤에 대한 기초지식](https://joo-dev.tistory.com/3) <-설명이 좀 어렵지만... 아이러니하게도 이 블로그를 본 후에 아래의 블로그의 함수 내용을 이해할 수 있었다. - [블로그-스크롤 제일 밑일 때, 감지하기](https://emessell.tistory.com/158) <- 내가 활용한 함수는 이거! ### #6-2 푸터 마크업 및 커스텀 및 반응형 작업 - [codepen](https://codepen.io/motobi/pen/NWMdJYO) - 1시간30분~ - 진행 상황 1. 푸터 마크업 및 커스텀 2. 푸터의 전반적인 반응형 작업 - 메모 - 원래는 `맨 위로 돌아가기 버튼`보다 이 부분을 먼저 하려고 했는데 작업을 진행하다보니 후순위로 밀려났다. - 항상 빨리 끝날 줄 알았던 푸터 부분에서 예상 외의 시간이 지체되는 느낌이다. 아무래도 내가 푸터 부분을 쉽게 보는 경향이 있는 거 같다. 앞으론 그러지 말자... - 저번 클론 코딩에 비해 자바스크립트의 함수 활용 빈도수가 급격히 늘어났다. 그만큼, css 부분과 js 부분의 작업내용이 적절하게 믹스되어야 하는데 그런 작업이 아직 서툰 것 같다. - js함수를 적용한 코드에 반응형 작업을 해야하는데 반응형은 css 작업으로만 해왔어서 사실 이 부분에서 멘붕이 터졌다. - 오류 및 해결 - 전 단계에서 `맨 위로 돌아가기 버튼`의 효과(?)를 자바스크립트로 적용시켰기 때문에 반응형 작업(`맨 위로 돌아가기 버튼`의 위치 조정)에서도 자바스크립트에서 해야할 것 같은데 어떻게 해야할지 모르겠다. - 참고 사이트 - [블로그-javascript 미디어 쿼리 사용 방법 matchMedia()](https://hohoya33.tistory.com/130) 뭔가 이걸로 해결이 될 거 같은데... 응용을 못하겠다... --- ## 작업하면서 느낀 점 - 매번 클론코딩을 할 때마다 느끼는 거지만, 다른 작업자의 코드에 적응하는 시간은 필수인 것 같다. 그래서 헤더 부분의 작업 시간이 긴거 같기도... - 이번 클론코딩은 전반적으로 밑줄애니메이션을 포함해서, 동적인 요소가 바로 전에 작업했던 미건라이프보다 많았다. 물론, 어려운 애니메이션은 패스했지만, 간단한 애니메이션으로도 충분히 페이지가 액티브해 보였다 - 클론코딩에서 처음으로 자바스크립트함수를 적용해봤는데 이번 사이트는 개발자도구에서도 대략적으로 어떤 js함수가 쓰였는지 유추할 수 있어서, 해당 효과의 함수를 수업내용 및 구글링을 통해 클론코딩에 적용시킬 수 있었다. - 기존사이트의 슬라이드 라이브러리는 `slick`이어서, 수업시간에 배웠던 `swiper`를 응용해서 클론코딩을 했다. - 수업페이지 활용도가 높았던 부분이었다. - 반응형 작업은 나중에 한꺼번에 하면 멘붕이 올거 같아서 단락이 끝날때마다 했다. 탁월한 선택이었던 거 같다. - 푸터는 어렵다! 정확하게 말한다면 내용이 많아질수록 복잡해지고 귀찮아진다. 그래서 푸터 부분은 레이아웃 나누는 연습에는 최적(?)인 것 같다. - 반응형을 포함해서 다 만들고보니 무척 뿌듯했다. 처음 작업해봤던 미건라이프와 비교해서 무척 액티브한 페이지를 클론코딩했다고 생각한다. - 물론, 이번 작업을 통해 이 클론코딩의 모든 내용이, 다 내 것이 됐다고는 할 수 없지만, 그래도 하나를 제대로 완성시켰다는 것에 큰 의미부여를 하고 싶다. - 100% 는 아니더라도 할 때마다 얻어가는 것이 있다면, 그 것들이 쌓이고 쌓여 내의 자양분이 될 수 있다면, 그걸로 클론코딩은 제 역할을 하는 것이 아닐까 생각한다.