<2021 해커톤~> #3. Sejong maps: 세부 컨텐츠 (1)

1. 서론

세부 컨텐츠는 네비게이션 바를 만들어 거기에 추가하기로 했다.

학교 관련한 정보들을 제공해주는 컨텐츠를 만들기로 하였고,

'세종 오는 길', '세종 꿀팁'으로 나누어서 제작했다.

 

2. 네비게이션 바

 

모든 페이지에 네비게이션을 고정시켰고, 각 구성별로 세부 컨텐츠를 넣었다.

 

(좌) html (우) css

css 구성은 대부분 index-nav이지만 나는 findmap페이지(지도보기)에 nav를 고칠 일이 있어서 저렇게 썼지만,

사실 둘이 차이점이 거의 없다.

다른 팀원이 쓰냐 내가 쓰냐의 차이점과, 길이를 줄일 대 min-width의 영향 차이 정도이다.

findmap-nav를 가장 줄였을 때

index-nav 가장 길이 줄였을 때

이를 통해 min-width를 다시 배워볼 수 있는 시간이었다.

 

3. 세종 오는 길

 

앞서 #2에서 말한 지도 API를 써서 지도를 보여주었고, 지하철, 버스를 설명해주는 칸이 있다.

원래는 학교 사이트에 있는 사진으로 지도를 썼었는데 확실히 API로 들고오는 것이 훨 나았다.

 

4. 세종 꿀팁

꿀팁은 총 3가지로 맛집 꿀팁, 명소 꿀팁, TMI로 구성되어 있다.

자세한 내용은 직접 찾아보길 바라고 '맛집 꿀팁'은 직접 우리 팀이 학교를 다니면서

먹었던 음식 사진이고 그만큼 보장 되어있으니 확인해보고 가는 것을 추천한다.

 

좌우 스크롤바로 카테고리별로 구분하기 편하게 만들었다. (overflow-x: scroll)

 

5. 마무리

 

세부 컨텐츠부분은 우리가 평소 쓰던 html, css로 배웠던 것들을 다시 복습하면서 제작할 수 있었다.

특히 css로 선택자 지정이나, flex, fixed 등 여러 기능의 개념들을 다시 점검할 수 있어서 좋았다.

 

개발과 별개로 맛집 꿀팁을 보면서 우리가 저렇게 다양한 음식들을 먹은 것을 보고 21학번인 내가 학교생활을

열심히 하고 있구나를 느꼈다.