[FE_Bootcamp] Pre-Project_구현 <footer>
드디어 Stack Overflow 페이지 클론코딩이 시작되었다.
바로 어제까지 작성한 사용자 명세서를 통해 구현해야 하는 내용을 파악하고, 이를 코드로 옮겨 실제 기능이 동작할 수 있게 만드는 것이 목표.
나는 시멘틱 HTML 파트를 맡아 header, footer, sidebar, 그리고 질문 작성 페이지까지 작성하게 되었다.
예상 소요 시간별로 우선 순위를 세워 작업 순서를 정하였고, 소요시간이 가장 짧을 것으로 예상되는 footer 부분을 먼저 구현하기로 했다.
1. 구현해야 하는 기능
- 로고를 누르면 메인 페이지로 이동 → router 이용
- 각 링크를 누르면 해당하는 페이지로 이동 → <a> 태그 이용(하이퍼링크)
사실 footer의 기능 자체에는 크게 신경쓸 것이 없다.
링크를 달아주는 것이 가장 큰 할일이고, 그나마 신경쓸 것은 hover 했을 때 글자 색이 바뀌는 것 정도?
때문에 기능 구현보다는 CSS를 어떻게 설정할지를 중점적으로 생각해 보았다.
2. Wire-Frame
footer 태그 안에 내용물을 담을 container div를 넣고, container 내부를 각각의 div로 나눈 뒤, 이미지, 리스트, p 등을 적절히 이용해 구성하기로 하였다.
3. 결과물
협업 이슈로 아직 폰트를 적용하지 못했고, 페이지 구현을 신경쓰느라 기능 구현을 아직 하지 않았다.
간격이나 글자 크기, 줄바꿈 등의 이슈도 간간히 보인다.
이제 첫걸음이니 그럴 수 있다고 쳐도, 앞으로 개선해 나가야 할 부분인 것 같다.
4. Done & Todo
페이지 구현이 끝났으니, 이제 하이퍼링크를 넣어 실제로 해당 페이지로 이동하게 만들어야 한다.
다행히 새 창이 켜지거나 하는 일은 없으니 <a> 태그가 길어질 일은 없을 것 같다,.,.,.
5. 더 공부해야 할 것
- flex
- ESlint
이 ESlint 때문에 작업 속도가 느려지고 있다,..,,.
같은 코드인데 하나는 정상 작동 하나는 오류.....
왜 이러는지 아시는 분은 알려주세요,..,,.,.,,