content
Introduction
This homepage is made for my portfolio. I didn’t use jQuery and Javascript plug-ins and I wrote all codes directly to focus on loading speed and light weight for the homepage. 이 홈페이지는 포트폴리오 용으로 제작된 사이트 입니다. 제이쿼리와 자바스크립트 플러그인을 사용하지 않고, 직접 모든 코드를 작성하여 홈페이지의 속도와 간결함에 촛점을 두었습니다.
-
Work period
작업기간
Feb.2017
-
Contribution
참여도
HTML+CSS 100%, jQuery 100%, Javascript(Front) 100%
-
Program for use
사용프로그램
Bracket, Browser(ie7~11, Chrome, Firefox, Safari) Kwah4.0, CCA, Juicy Studio Accessibilty, Jquery, Javascript, Photoshop, Illustrator
-
Tag
키워드
CSS, HTML, jQuery, Javascript
Point
- No Plug-In플러그인을 사용하지 않은 사이트
- 자바스크립트 플러그인 대신에 직접 코드를 작성하여 두가지 타입의 슬라이드, 애니메이션 효과, 호버 기능 등과 같은 기능을 만들었습니다. 플러그인을 사용하지 않은 사이트는 그렇지 않은 사이트에 비해 새로운 기능추가와 유지보수를 하는 것이 훨씬 빠르고 쉽습니다. 또한 불필요한 코드를 가지고 있지 않기 때문에 빠르고 가볍습니다. Instead of Javascript Plug-in, I made functions to move slides, animation, mouse hover, etc. Sites that do not use the plug-in are much faster and easier to add and maintain than other sites. Also, this site is fast and light because it does not have unnecessary code.
- Hover Animation호버 애니메이션
- 제품사진 위로 마우스를 가져다 대면 이미지 주위로 라인이 생기거나, 백그라운드, 버튼이 생기는 효과가 나옵니다. CSS3 애니메이션으로 페이드 효과를 주어 조금 더 자연스럽게 움직이도록 하였습니다. When you move your mouse over a product picture, you can see lines around the image, background, and buttons. The CSS3 animation has a fade effect so that it moves more naturally.
- Image Slide이미지 슬라이드
- 이 사이트에는 총 2가지 타입의 슬라이드가 있습니다. 첫번째 슬라이드는 한 화면에 꽉차는 이미지 슬라이드, 두번째 슬라이드는 한 화면에 여러 이미지가 하나의 그룹으로 묶여 함께 움직이는 슬라이드 입니다. 총 몇 개의 이미지가 있는지 계산해서 페이지 숫자로 보여주는 기능도 추가되었습니다. The second slide is a slide in which several images are grouped together in a screen. JavaScript calculates the total number of images in the slide and shows them in page numbers.
Links-
Site Map
*
is recommended
표시는 추천페이지
-
Site map사이트맵
