나만의 웹 애플리케이션 제작

[주제] 

일상이 소중해진 요즘, 국내여행 어때요? [국내여행지 추천사이트(서울,인천,경기,강원 중심으로)]

 

[기획의도]

최근 코로나19로 인해 해외여행을 가기 겁나는 상황이 도래했다. 코로나19로 인해 일상생활에 제한이 걸린 요즘 사람들이 해외여행을 준비했던 사람들이 국내여행에 눈을 들이면서 기획자 또한 국내여행에 대한 관심을 많이 가지게 되었다. 또한 다른 국내여행을 갈 때 전통시장을 중심으로 국내여행을 많이 기획하는 친구들을 많이 볼 수 있었고, 기획자 또한 국내여행을 갈 때 전통 재래시장 또는 일반 시장을 중심으로 여행기획을 많이 기획했던 경험이 있어서, 사람들이 시장, 그리고 국내여행지에도 좋은 먹거리와 볼거리가 많다는 것을 알리고 싶어서 기획하게 되었다.

 

[타겟 방문객]

가족단위 여행객, 먹거리와 볼거리를 한꺼번에 느끼고 싶은 여행객들, 국내여행을 기획하고 있었던 여행객들.

 

[메뉴 구성 및 콘텐츠/레이아웃 디자인]

[표지]

이달의 여행지를 클릭하면 main 홈페이지를 나오도록 연결해놨고, 앙 옆으로 서울의 건물들을 그림자형태로 푷현된 이미지들을 삽입하였다. 또한 표지와 다른 아티클들이 분리되도록 가로선을 그어 분리시켰다.

 

 

[네비게이션]

 

네비게이션은 총 4가지 항목으로 나누어서 각 항목들을 클릭하면 해당 내용으로 들어갈 수 있도록 html을 연결했다.

네이게이션임을 알려주기 위해 background-color와 해당 항목의 color에 변화를 주었고 이 또한 오른쪽의 아티클과 분리되어있는 느낌을 주기 위해서 세로선을 그어 분리시켰다. (div 태그 사용)

 

 

 

 

[article1 -index.html]

 

index.html

 

메인페이지에서는 서울, 인천, 경기, 강원에 대한 설명과 각 지역들을 대표하는 관광지 또는 풍경을 삽입했다.

 

4가지 section으로 나누어

<지역명>

소개글

관련 사진

순으로 main 홈페이지를 표현했다.

 

 

 

 

 

 

 

[article2 -1.html]

 

 

서울의 대표적인 시장들을 중심으로 순서대로 소개를 했다.

           시장명

           관련사진

           시장소개

가볼만한 곳 은 <li>태그를 사용하여 순서없이 나열할 수 있도록 구현했다.

           지명소개

           사진

           소개 순으로 구현.

 

 

 

 

 

 

[article3 -2.html]

 

 

 

인천의 대표적인 시장들을 중심으로 순서대로 소개를 했다.

           시장명

           관련사진

           시장소개

가볼만한 곳 은 <li>태그를 사용하여 순서없이 나열할 수 있도록 구현했다.

           지명소개

           사진

           소개 순으로 구현.

 

 

 

 

 

 

[article4 -3.html]

 

 

 

경기의 대표적인 시장들을 중심으로 순서대로 소개를 했다.

           시장명

           관련사진

           시장소개

가볼만한 곳 은 <li>태그를 사용하여 순서없이 나열할 수 있도록 구현했다.

           지명소개

           사진

           소개 순으로 구현.

 

 

 

 

 

 

[article5 -4.html]

 

 

강원의 대표적인 시장들을 중심으로 순서대로 소개를 했다.

           시장명

           관련사진

           시장소개

가볼만한 곳 은 <li>태그를 사용하여 순서없이 나열할 수 있도록 구현했다.

           지명소개

           사진

           소개 순으로 구현.

 

 

 

 

위와 같은 방식으로 1.2.3.4html의 내용을 구현

 

 

[aside와 footer]

Aside와 footer 부분은 상대적으로 article보다는 중요한 부분이 아니므로 color는 좀 어둡게 표현을 했다. Aside는 일렬로 오른쪽에 떠 있도록 float : right 속성을 사용해서 표현했고 각 글자들을 클릭하면 해당 공식사이트로 연결되도록 구현을 했다.

Footer는 글이 가운데에 쓰여질 수 있도록 text-align:center 속성을 사용해서 가운데 정렬했고 ㅡmargin은 5px로 크지 않도록 구현했다.

 

[사용된 CSS]

 

 

[추가된 javascript]

(1) 더보고 싶은 지역 추천( index.html)

 

 

 

-페이지에서 보여지는 botton

 

 

 

 

 

 

 

- body 문 안에 있는 javascript 코드, 먼저 prompt 창을 통해서 지역을 입력 받는다.

- 서울,경기,강원,인천을  입력했을 시에는 경고문으로 해당 홈페이지를 통해 좀더 세부적인 추천을 받을 수 있도록 경고한다.

 

 

 

-botton을 표시하는 코드 check_city함수를 불러온다.

 

- alert 예시

 

 

 

 

 

(2) 각 지역 별 추가로 좀 더 세부적인 추천 받기(1.html,2.html,3.html,4.html)

 

- main 페이지를 제외한 서울,인천,경기,강원 페이지 에서는 각 지역별로 좀더 자세하게 알고 싶은 장소및 동네를 추천받는다.

 

 

 

 

(3) 로그인 (index.html)

 

 

 

로그인 button을 누르면 로그인 할 수 있는 창이 뜬다.

 

 

 

 

 

 

 

 

 

 

 

 

 

- javascript를 사용해서 username과 password를 받고

빈칸을 입력 했을 시에 경고메시지를 띄우도록 if문을 설정한다.

 

다 완료되었을 시에 로그인 완료창의 띄운다.

 

Form을 사용해서 아이디와 비밀번호를 입력 받을 틀을 만든다.

 

 

 

 

 

 

 

 

 

 

 

[소감]

이번 나만의 홈페이지 만들기를 만들면서 내가 생각했던 방식대로 구현이 안되거나 사진 같은 것도 크기 나 모양 등 디자인 적인 부분에서 많이 어려움이 있었다. 사실 디자인 쪽은 정말 감각도 없기도 하고 어떻게 해야 좀 더 보기 편하고 홈페이지라는 느낌을 받을 수 있을까에 대해 많이 고민을 했다. 머리속으로는 막 이걸 어떻게 구현을 하고 어떤걸 연결해서 이렇게 하고 상상은 많이 했지만, 아직 더 배워야겠다는 생각이 들었다.

웹홈페이지를 만드는 것은 처음이였지만 이번 과제를 통해서 html의 특징이라던가 다른 언어와는 다른 구현될걸 실제로 확인하고 조정할 수 있다는 점에서 좀 더 매력적으로 다가왔다.

이번 학기가 끝나고 좀 더 html에 대해서 공부를 하고 디자인 부분이나 시각화하는 부분을 좀 더 열중해서 졸업을 하기 전에는 좀 더 완벽하고 사람들에거 도움이 될 수 있는 홈페이지를 만들 수 있도록 공부를 해야겠다는 계기가 되었다.