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

 

 

패러렉스, parallax

 

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

 

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

 

 

이미지슬라이더 image-slider

 

제가 근무하는 직장에서 들어온 요청으로 이번 슬라이더를 만들기 되었는데요, 요청 내용은 홈페이지의 메인 슬라이더 내용 전부를 고객들이 빠르게 훑어봤으면 좋겠다는 것이었습니다. 하지만 동시에 기존의 순차적으로 슬라이드 되는 형식도 고수하는 조건이었죠. Read More ➫

 

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

 

 

아코디언메뉴 accordian

 

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

 

CSS Shapes를 사용한 부정형 레이아웃

 

 

 

새로운 CSS 기술인 CSS Shapes를 이용하면 부정형 모양으로 컨텐츠를 감싸 웹에서 편집디자인 같은 레이아웃으로 재창조 할 수 있습니다. 이번에 (포토샵이 아닌!) CSS Shapes를 가지고 약간의 흥미로운 웹 페이지 디자인을 시도해 봤습니다. Read More ➫

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

 

 

반응형 이미지, responsive-images

 

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

 

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

 

 

사이드 네비게이션

 

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

 

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

 

 

 

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