[미니프로젝트] html, css로 만드는 여행 계획표 - 0

2023. 2. 28. 14:06

3월 7일부터 3월 10일까지 해외여행을 나가게 됐다.

숙소도 구하고 볼 것도 알아보면서 계획을 짰는데 메모장에 정리하다 보니 가독성이 너무 떨어진다..

 

메모장으로 정리한 계획

 

그래서 한글이나 여행 계획 어플리케이션을 사용해서 깔끔하게 정리하려고 했는데

뭔가 조금씩 아쉽다.

 

한글은 문서 편집 프로그램인 만큼 정리도 잘되고 하이퍼링크도 걸어줄 수 있다.

하지만 휴대폰으로 보기가 영 껄끄럽다.

 

여행 계획 어플리케이션은 메모장이랑 사실상 다를게 없더라.

 

어떻게 할까 하다가 마침 웹 개발을 배우고 있으니 html으로 문서를 만들어 보자는 생각이 들었다.

내가 보기 편하게(모바일로) 디자인할 수도 있고 하이퍼링크도 마음대로 걸 수 있으니

만드는 수고만 빼면 앞의 두개 보다 훨씬 좋아 보였다.

 

그래서 배운걸 복습하고 사용도 해볼 겸 미니프로젝트로 여행 계획 문서를 만들기로 결정했다.

서버를 두고 웹페이지를 만드는건 아니라서 html과 css만으로 단순한 문서를 만들것이다.

 

 

문서는 대충 아래처럼 동작하게 할 것이다.

메인 화면

각 link는 누르게 되면 1일차~4일차의 여행 계획으로 넘어가게 된다.

 

여행 계획 화면

여행 계획 화면의 header에는 메인 화면으로 돌아가는 버튼을 추가한다.

h2는 아침, 점심, 저녁 텍스트를 넣어 시간 별로 계획을 확인할 수 있게 한다. 필요하다면 <nav>를 통해 아침, 점심, 저녁 메뉴 링크를 만들어 사용하기 쉽게 한다.

h2 아래의 table은 상세 계획을 작성한다.

BELATED ARTICLES

more