[작업일기] 본아이에프 클론 코딩 완료

  이번 경우에는 작업을 두 번 나눠서 진행 하였다. 크게 다를 건 없지만 처음에는 유지, 보수 후 버전으로 작업을 시작해서 그대로 마무리 짓고 싶었고 그 이전에 사이트 형태도 한 번 다뤄보고 싶어서 html은 공유를 하고 나머지를 수정 하였다. 생각보다 왜 오래 걸렸는지 잘 모르겠다...ㅠ 일단 작업하면서 뭔가 계속 문제가 생기고 할게 많아지고 이런 부분은 애초가 뭔가를 잘 못 해서 그런 것 같다는 생각이다.

 

1. 일단 배경을 분리 한다는건 딱히 차이점이 별로 없는 작업인 반면에 배너 광고 하나 넣어주는 것은 생각보다 손이 많이 가는 작업인 것 같다. 배너 광고를 닫았을 때 다른 부분은 어떻게 되며, 스크롤이 되었을 때 바뀌는 점, 또 스크롤을 다시 다시 올렸을 때 바뀌는 부분 등을 고려를 해야한다.
2. 탑바에 바텀 라인이 있을 때 box-sizing:border-box주면 나중에 서브 메뉴 작업할 때 굳이 1px을 띄우지 않아도 라인이 보이는 줄 알았다. 무슨 매직인가? 왜 이런 생각을 한건지 모르겠다. 이노테크 작업을 하면서 혼동 했던 것 같은데 작업을 하다보면 가끔 이런 어이없는 착각을 개념으로 생각하고 사용할 때가 있는 것 같다.
3. visivility:hidden과 disply:none을 사용 목적에 잘 맞게 쓰도록 하자.
4. 자바스크립트를 많이 쓰게 될 경우 어떤 충돌 현상이나 문제점이 생기기도 하는 것 같다. 나 같은 하수는 스크립트를 구체적으로 어떻게 써줘야 하는지 잘 모르기 때문에 꼭 필요한 부분에 써야할 것이고 사용시 다른 부분과 문제가 없는지 잘 살펴 보아야 할 것 같다.
5. 이번 경우는 서브 메뉴를 보여줄 때 hover가 아닌 addClass를 사용하게 되었는데, 메뉴 아이템이 한개가 아닌 여러개 이므로 마우스 오버 할 때마다 실행되서 중첩적으로 보여진다. 비슷한 작업을 할 때 유의해야 할 것 같다.

 

★ 서브 메뉴의 배경을 덮어줄 때, 어떤게 먼저 나오는지에 따라 스크롤 했을 때 배경을 전부 덮어주는지 아닌지 차이점이 생긴다. 선생님 자료로 테스트 했을 때는 이런 차이가 없는데, 왜 내가 했을때는 이런 차이가 발생하는지 모르겠다. 개발자도구로 봤을 때 스크립트는 정상적으로 들어가는데 생각해봐도 이유를 잘 모르겠다. 다시 한 번 살펴보고 원인을 알아야 할 것 같다. 

.top-box.bg-middle .top-bar-bg {
    height:95px;
    transition:height 0.3s;
}
.top-box.bg-all .top-bar-bg {
    height:146px;
    transition:height 0.3s;
}

 

ver 1(메뉴와 서브 메뉴의 배경을 분리하여 작업, 상단 배너 광고 x)

See the Pen 본아이에프 ver1 by sunshine77 (@issue72y) on CodePen.

 

 

ver 2(배경을 한번에 덮어주고 공유하며, 상단 광고 배너 있음)

See the Pen 본아이에프 ver2 by sunshine77 (@issue72y) on CodePen.