[작업 일기] 이노테크 탑바 클론 코딩 완료 (+fullPage.js)

 

고정 너비가 없는 반응형 사이트 

1. 탑바를 position:absolute + width:100% 했을 때, 좌우로 padding값을 주니 탑바가 잘려 버렸다. 그 부분을 확인 하는데 시간이 많이 걸렸던 것 같다. 문제가 메뉴 자체에 flex-grow를 줘서 영역을 다 먹어 버린 줄 알았다. 또는 도대체 어떤 쪽이 문제인지 테스트 해보고 고민을 많이 했던 것 같다. 탑바의 너비가 body를 이어 받아서 100%로 쫙쫙 늘어나게 되었는데 거기에 이물질이 꼈다고 가정하자. 그럼 당연히 넘치치 않겠는가. 탑바 밑에 자식들에게 padding값을 주거나 탑바에 box-sizing:border-box주면 해결

2. 메뉴 아이템에 밑줄 효과를 줄 때, 가운데서 뻗어나가야 하는데 자꾸만 왼쪽에서 뻗어 나가는 문제가 있었다. left:50% + transform:translateX(-50%)으로 해결 하였는데 원리는 잘 모르겠다. 사이트에서는 transform:translateX(-50%)값은 따로 안준 것 같은데..내가 했을 때는 이걸 안주면 효과가 없음

3. 메뉴만 선택 했을 때만, 탑바에 배경이 보여야 하므로 처음에 메뉴에 flex-grow했던 부분은 다시 클래스를 부여해 수정(flex-grow를 메뉴에 주면 너비가 너무 늘어남으로 메뉴만을 선택해서 호버 효과를 가지는 의미가 없으므로)

4. 토글 버튼 햄버거 아이콘을 만드는데 css작업이 좀 헷갈렸던 것 같다. 간단하게 만들자면 쉽게 만들긴 하겠지만, 나중에 에니메이팅이 되는 버튼을 만들 줄 알아야 하므로 선생님 예제 방식으로 해봤다. 근데 transform:translateY(-50%)을 두번째 선에 주었을 때 선두께는 두배, 선의 진하기는 옅어지고...뭔가 이상한 현상이 발생한다. 코드펜 오류인지 몰라서 다른 작업 환경에서 해봐도 똑같다. 그래서 top으로만 얼추 비슷하게 맞춰 놨는데, 다시 한 번 해봐야겠다.    

4. fullpage.js를 사용했을 경우 탑바 + fixed 한것에 scrollTop은 먹히지 않는다. 처음에 scrollTop이 먹히질 않는 걸 확인하고 뭔가 작동 방식이 다를거라 생각 했었는데, 찾아보니 이유는 스크롤 자체가 transform으로 움직이고 transform은 가상 움직임으로써 실제 스크롤링 되는 값은 계산이 되지  않는다고 한다.(맞나?...) 암튼 그래서 주어진 옵션을 활용해야 한다는 점이다.(또는 오토 스크롤을 꺼주던지) afterLoad: function(origin, destination, direction) 이렇게 해당 이벤트를 주고 그 안에서 페이지당 넘어가는 횟수로 조절을 해줘야 한다. 찾아보고 쓰긴 했는데 제이쿼리 문법에 맞게 정확히 썼는지는 모르겠다. 동작은 그럭저럭 되는데 시간 수정, 부드럽게, 테두리 색깔 등을 조절할 필요가 있는 것 같다.(문법 써야 하는 건 할 수 있을지 모르겠눼..)

---

html 마크업, css 작업 생각보다 훠얼씬 어렵다. 최근에 개발자 코드를 유심히 보니 더 그렇다. 희안하게 예제도 점점 어려워지는 기분....지나왔던 시간 탓해봤자 쓸모 없지만, 최근에 든 생각은 클론코딩(모작) 10개 정도만 했었어도 그 이해도가 참 많이 늘었을 것 같다는 생각이다. 그리고 자바스크립트가 인터렉티브 효과에 정말 큰 역할을 하는구나 하고 새삼 느끼게 된다. 지금은 거의 할 줄 모르지만 언능 취업해서 잘하고 싶다는 욕구가 강해진다. 힘들지만 열심히 하자. 

 

See the Pen LYRBgOG by sunshine77 (@issue72y) on CodePen.