스튜디오 지브리의 웹페이지로, 페이지의 메인이 플레시로 이루어져 있었고, 각 페이지 마다의 연관성이 보이지 않았습니다.
폰트는 "kopubdotum"을 사용했거, 비슷한 레이아웃의 지루함을 보안하기 위해 페이지의 주색을 다르게 구성하였습니다.
스튜디오 지브리를 주제로한 웹 페이지 작업입니다. 지브리의 작품중 재밋게 본 세가지 작품을 이용해 구성하였습니다.
각각의 이미지에 마우스를 올리면 이미지가 각 섹션에 꽉 차도록 구성하였습니다.
원스크롤 페이지로, 네비게이터등 이미지 외적인 요소들을 포지션을 사용해 왼쪽으로 고정 시켜주었습니다.
왼쪽 화살표와 엑스버튼을 이용해, 다른 작품 페이지로 넘어가거나 메인페이지로 돌아갈 수 있습니다.
javascript에서 jQuery라이브러리를 사용, addClass와 removeClass를 이용해 각 메뉴 위치에 왔을때, 현재 매뉴를 알 수 있도록 해주었습니다.
javascript에서 jQuery라이브러리를 사용, scrollTop을 이용해 각 메뉴를 눌렀을 경우 해당 매뉴의 높이로 가도록 코딩하였습니다.
audio의 controls를 사용하지 않고 왼쪽 하단에 아이콘을 디자인해 css로 뮤직플레이어를 만들어 주었습니다.
javascript에서 jQuery라이브러리를 사용, 배열을 이용하였고 페이지에 들어오면 렌덤으로 지브리의 O.S.T들이 재생되도록 코딩 하였습니다.
각각의 이미지들을 css에서 포지션을 사용해 배치해 주었고, :hover을 이용해서 마우스를 올렸을 때 살짝 이미지가 커지도록 효과를 주었습니다.
javascript에서 jQuery라이브러리를 사용, addClass와 removeClass를 이용해, 커지면서 각각의 캐릭터의 설명이 나올수 있도록 작업하였습니다.
웹투어라는 여행사 사이트입니다. 폰트는 "나눔고딕"을 사용 했습니다.
너무 많은 정보가 있어, 복잡하고, 원하는 정보를 찾는데 시간이 걸렸습니다.
메인 페이지에 슬라이드 배너를 구성하였습니다.
javascript에서 jQuery라이브러리를 사용, 양쪽 버튼과 인디게이터를 구성하였습니다.
메인 배너 아래, 베스트 상품 배너를 따로 구성하였고, 그 아래 여행 후기를 보여주는 창을 만들어, 각각의 택스트를 클릭했을경우 이미지를 볼 수 있게 구성하였습니다.
가운데 이미지가 크게 보일수 있도록, 가운데 이미지만 css를 다르게 설정해주었고, 양옆의 이미지는 div를 따로 만들어 background-color을 이용해 톤 다운 시켰습니다.
항공권 페이지를,form을 사용해 배너 위에 표를 구성하였습니다.
table 태그를 사용해 특가항공 구역을 구성하였습니다.
javascript에서 jQuery라이브러리를 사용, 반응형 웹을 염두해서,if문을 사용해 각각의 js가 해당 사이즈에 맞을때 반응하도록 코딩하였습니다.
javascript에서 jQuery라이브러리를 사용, 모바일 사이즈일때 글로벌 네비게이션이 매뉴로 감추어 지도록 코딩하였습니다.