[Project] 마지막 | 반응형 웹페이지 구현하기

벌써 웹강의 마지막 시간이 되었다.

각자 원하는 주제를 정해서 반응형 웹페이지를 구현하는 과제를 마지막으로 WEB은 마무리되고 이제 자바 공부를 시작하게 된다.

 

갑자기 추석을 끼고 일본에 가게되어서 생각보다 촉박하게 페이지를 만들게 되었지만 그래도 최대한 반응형을 구현할 수 있도록 노력했다.

(디자인은 거의 포기,,,ㅋㅋㅋㅋ쿠ㅜㅜ)

 

일본에서 쓸 포폴에 추가할 예정이라 페이지를 전부 일본어로 제작해봤다.

주제는 나의 일본(私の日本).

내가 좋아하는 일본의 지역, 음악, 음식을 카테고리로 나누어서 페이지를 만들었다.

 

 

-

 

 

메인페이지는 일본의 분위기를 잘 보여주는 사진을 배경으로 사용하고 absolute를 이용해 볼드한 느낌의 텍스트를 페이지 중앙에 고정했다.

원래는 폰트를 훨씬 크게해서 페이지를 꽉차게 만들고 싶었지만 반응형을 구현할 때 width별로 글씨크기를 조정해주기 번거로울 것 같아서 그냥 적당한 사이즈로 고정해두었다.

Main Page

Responsive

 

지역 페이지에는 일본의 지역 4곳을 선택한 후, 마우스가 hover되면 scale과 opacity를 조정해 효과를 지정해주었다.

이번 수업에서는 css와 html만 배워서 더 다양하고 화려한 효과를 넣지 못한게 조금은 아쉬웠다.

아래쪽에는 설명이 나와있는데 시간이 된다면 위의 이미지에 a태그를 활용해 스크롤 효과를 넣어줘도 좋을 것 같다.

都市; City

 

음악 페이지는 좋은 이미지를 잘 찾아서 거기에서 레이아웃 아이디어를 얻었다.

일본 노래중에서는 락장르를 좋아하는 편이라 락을 잘 표현해줄 이미지를 찾았는데 딱 락앤롤같은 팝한 이미지를 찾아서 텍스트에도 비슷한 효과를 주고 각 텍스트들을 무질서하게 배치해보았다.

뭔가 나한테 락은 무질서함이라는 이미지도 있어서,,,

텍스트를 클릭하면 내가 가장 좋아하는 곡의 유튜브 영상으로 넘어간다.

音楽; Music

저 텍스트 레이아웃을 좀 더 정리하고 싶었는데 시간이 모자라서 포기했다,,ㅠㅜ

 

 

마지막으로 음식 페이지.

다른 페이지들에는 사진을 단조롭게 배치한 것 같아서 relative를 조정해 이미지를 조금 독특하게 배치해보았다.

여기에도 마찬가지로 마우스를 사진에 hover하면 scale과 opacity를 조정해서 효과를 주었고 아래쪽에는 border를 점선으로 표현해 마치 테두리를 그린 것처럼 표현했다.

일본에서 가본 맛집을 적고 싶었는데 이 페이지를 만들 당시에는 일본에 가본 적이 없어서 구글링으로 해결했다.

食べ物; Food

 

여기에서 음식명에 마우스를 hover하면 글자 아래에 밑줄이 그어지도록 효과를 작성했고 클릭하면 해당 가게의 홈페이지로 연결된다.

Food_hover

어떻게 보면 단순한 홈페이지인데도 시간을 꽤나 들였던 것 같다.

이번에 다시 웹수업을 들어보면서 머리속에서 뒤죽박죽이던 개념들이 정리된 것 같아서 도움이 많이 되었다.

 

앞으로 자바도 힘내자구! これからも頑張ろう。ヾ(๑ㆁᗜㆁ๑)ﾉ”