수업을 들으며 제일 처음 도전하였던 서울매트로 홈페이지입니다. CSS만을 사용해서 제작하였습니다. 처음 만든 홈페이지라 미숙할 수 있지만 가장 많은 정성을 들이고 어려움이 생길 때 마다 찾아보며 코딩을 이해하고 친숙해지게 만들어 준 첫 css 페이지입니다.

사용된 주기능으로는 메뉴슬라이드, 이미지 호버시 사이즈변경, 다양한 호버기능 및 css기능들이 사용되었으며 원뎁스 서브페이지 제작을 완료하였습니다.

제작기간: 1개월 ( 2018.06 ~ 2018.07 )
참고 홈페이지: 서울교통공사 ( LINK )

● 첫 제작 홈페이지
● 기존 홈페이지 카피 제작
● HTML, CSS5 사용
● SUB PAGE 14개 제작
기획서 다운로드

Seoul Metro

Seoul Metro

제이쿼리를 기존에 제작하였던 css 페이지에 적용하여 만든 홈페이지 입니다. 처음 제이쿼리를 이용하여 만든 것이라 코드가 미숙하고 난잡 할 수 있지만 직접 고민하고 공부하면서 제작하여 제이쿼리를 더 익숙해지고 숙련될 수 있게 해 준 페이지 입니다.

사용된 제이쿼리 기능으로는 메인1 페이지에 날씨효과, 메인2 페이지에 쇼하이드 배너와 슬라이드 배너, 메인3 페이지에 탭 기능을 사용하였습니다.

제작기간: 1주 ( 2018.08 ~ 2018.08 )
참고 홈페이지: 서울교통공사 ( LINK )

● 첫 제작 jQuery 페이지
● 기존 CSS 페이지에 jQuery 적용
● HTML, CSS5, jQuery 사용
● 날씨, 배너변환, 이미지슬라이드, 탭기능
기획서 다운로드

매드포갈릭 반응형 페이지입니다. 쿼리를 배우기 전에 제작하여서 많은 어려움을 격었고 css만으로 다양한 효과를 주고 싶어서 많은 고민과 시간을 들여 제작하였습니다. 반응형으로 제작하면서 쿼리를 사용하지 않아 css로 주었던 효과들이 반응형으로 변형될 때 많은 어려움이 있었지만 저를 한층 더 성장하게 만들어 준 페이지입니다.

사용된 css 기능으로는 위치값이 바뀌며 슬라이드 되거나 높이나 넓이가 변형되며 슬라이드 되는 기능, 다양한 호버이펙트를 사용하였습니다.

제작기간: 2주 ( 2018.07 ~ 2018.08 )
참고 홈페이지: 매드포갈릭 ( LINK )

● 반응형 페이지
● 기존 홈페이지 디자인 참고하여 리뉴얼
● HTML, CSS5, jQuery(나중에 추가) 사용
● 미디어쿼리 이용, 크기에 따른 페이지 변화
기획서 다운로드

MadforGarlic

◀ CLICK

제이쿼리를 이용해 제작한 페럴렉스 페이지입니다. 스크롤값에 따른 반응을 제작하는데 많은 어려움이 있었는데 조금씩 풀어 나가면서 굉장히 많은 즐거움을 느낀 페이지 입니다. 처음 디자인에서 후반부 마감을 고민하던중에 반전으로 버거킹을 추가하여 광고페이지 느낌을 살려보았습니다.

사용된 제이쿼리 기능으로는 스크롤값에 따른 위치값이나 회전값등 페럴렉스에 중점을 둔 다양한 기능들을 넣어 보았습니다.

제작기간: 1주 ( 2018.08 ~ 2018.08 )
참고 홈페이지: 없음 (자체 기획, 제작)

● Parallax 페이지
● 이벤트페이지 느낌으로 제작
● HTML, CSS5, jQuery 사용
● 스크롤값을 인식하여 변하는 기능들
기획서 다운로드

Burgerking

Today, A glass of Wine

제이쿼리를 기반으로 다양한 기능을 넣는 것에 중점을 둔 페이지입니다. 참고할 기본페이지가 없어 자료수집 및 디자인, 제작까지 어려움이 많고 오래걸렸지만 많은 배움을 얻을 수 있었습니다. 메뉴를 소개하는 부분이 가장 어려웠는데 고민끝에 원했던 메뉴느낌을 완성하여 매우 큰 성취감을 느꼈습니다.

사용된 제이쿼리 기능으로는 구글맵 적용, 슬라이드 이미지에 버튼, 자동넘기기, 스크롤값에 따른 위치변경 및 크기변경, 클릭에 따른 다양한 효과등이 있습니다.

제작기간: 2주 ( 2018.08 ~ 2018.09 )
참고 홈페이지: 없음 (자체 기획, 제작)

● 종합 jQuery 페이지
● 이미지, 디자인, 기능 전부 기획 및 제작
● HTML, CSS5, jQuery 사용
● 탭 응용, 스크롤값, 사용자이벤트 등
기획서 다운로드

LG Q7

비디오를 기반으로한 미디어쿼리 페이지입니다. 비디오를 변경하거나 볼륨모양 버튼, 메뉴 rotate사용 등 새로운 도전을 할 수 있었던 페이지 입니다. 한 페이지에서 다양한 정보를 비디오와 함께 보여줘야 하는 어려움이 있었지만 새로운 방식으로 생각하고 제작하다 보니 매우 즐겁게 제작할 수 있었습니다.

사용된 제이쿼리 기능으로는 rotate값 변경, 비디오 변경, 클릭 시 다양한 연속적인 반응 및 기능 등이 있습니다.

제작기간: 2일 ( 2018.09 ~ 2018.09 )
참고 홈페이지: 없음 (자체 기획, 제작)

● Video 페이지
● 이미지, 디자인, 기능 전부 기획 및 제작
● HTML, CSS5, jQuery (Media) 사용
● 동영상 재생,변경, 클릭이벤트 등
기획서 다운로드


TOP