Tutorial.

패럴렉스 백그라운드 만들기

 

 

패러렉스, parallax

 

화면상의 배경과 컨텐츠 간의 움직임에 시차를 줘서 공간감이 느껴지는것 같은 착각을 일으키는 독특하고 역동적인 패럴렉스(Parallax) 백그라운드를 만들어 보겠습니다. Read More ➫

 

효과적인 이미지 슬라이더 만들기

 

 

이미지슬라이더 image-slider

 

기존의 슬라이더는 이미지 배너 양쪽에 있는 화살표로 넘겨보며 순차적으로 보여지는 방식이었다면, 이번 이미지 슬라이더는 좀 더 편하고 순서에 구애받지 않고 원하는 이미지 배너를 볼 수 있습니다. Read More ➫

 

아코디언 이미지 메뉴 만들기

 

 

아코디언메뉴 accordian

 

여러 개의 이미지가 접혀있는 아코디언 이미지 메뉴를 만들어 보겠습니다. 이전 아코디언 메뉴 만들기와 비슷한 형식이지만 텍스트 대신 이미지로 채워져 메뉴의 기능과 더불어 디스플레이적 요소까지... Read More ➫

 

아코디언 메뉴 만들기

 

 

아코디언, accordian

 

여러 개의 메뉴가 접혀있는 아코디언 메뉴를 만들어 보겠습니다. 기본적으로 두번째 메뉴바가 열려있게 했으며, 서브메뉴에 마우스를 올렸을 때 왼쪽 옆에 푸른색의 선택바가 표시됩니다. Read More ➫

 

최적의 반응형 이미지 만들기

 

 

반응형 이미지, responsive-images

 

반응형 이미지를 만드는데 우선적으로 적용하는 것이 CSS에서의 img {max-width: 100%;} 입니다. 브라우져를 줄여보면 창의 크기에 따라 이미지가 알아서 줄어드는걸 보게 될 겁니다. 하지만 저대로 적용을 한다면... Read More ➫

 

이미지 로테이터(Image Rotator) 만들기

 

 

사이드 네비게이션

 

CSS3와 jQuery를 이용한 이미지 로테이터을 만들어 보겠습니다. 여러개의 이미지가 차례로 아래로 포개져있고, 시간차를 두고 순차적으로 사라지면서 다음 이미지가 보이는 방식입니다. Read More ➫

 

사이드 네비게이션(side navigation bar) 메뉴 만들기

 

 

사이드 네비게이션

 

CSS3와 jQuery를 이용한 사이드 네비게이션 메뉴를 만들어 보겠습니다. Read More ➫

 

CSS3 이용한 후버 이펙트(hover effect)

 

 

후버 이펙트

 

CSS3를 이용한 후버 이펙트(hover effect) 를 만들어 보겠습니다. Read More ➫

 

CSS3로 드롭다운(dropdown) 메뉴 만들기

 

 

 

CSS3로 간단한 드롭다운 메뉴를 만들어 보겠습니다. Read More ➫