Blog.

벤더 프리픽스(vendor prefixes) 줄이기

 

 

프리픽스 vendor-prefixes

 

현재 몇몇 브라우저에서 특정 CSS를 구현하기 위해서는 ‘벤더 프리픽스’를 사용해야하지만, 필요 이상으로 과하게 사용될 때를 자주 보게 됩니다. 브라우저가 버젼 업을 꾸준히 하면서 더이상... Read More ➫

 

아코디언 메뉴 만들기

 

 

아코디언, accordian

 

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

 

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

 

 

반응형 이미지, responsive-images

 

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

 

Only Type & Photo

 

 

vintage typography

 

타이포그래피와 이미지로 채워진 배경은 요즘 웹사이트에서 공통적으로 볼 수 있는 특징입니다. 이 두 요소는 메인 페이지에서 가장 먼저 사용자의 방문에 강한 인상을 남기며... Read More ➫

 

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

 

 

사이드 네비게이션

 

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

 

스타벅스를 위한 빈티지 스타일 타이포그래피 벽화

 

 

vintage typography

 

프리랜스 그래픽 디자이너이자 일러스트레이터인 Jaymie McAmmond 의 스타벅스를 위한 아름다운 타이포그래픽 벽화를 감상하시죠. Read More ➫

 

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

 

 

사이드 네비게이션

 

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

 

디자인 트렌드:  롱 쉐도우 (Long Shadows)

 

 

long shadow

 

새로운 트렌드가 사이버공간에 돌연 나타났다. 바로 '롱 쉐도우 디자인 (long shadow design)'

 

플랫 디자인(flat design) 에서 빌려온 이 컨셉은 최근 갑자기 주목을 받고 있다. UI 요소와 아이콘에서 대두되고 있지만 점차 다른 파트의 웹사이트 디자인에까지 그 영향력을 뻗칠 기세다. Read More ➫

 

리본과 태그를 사용한 웹 디자인

 

 

ribbon

 

웹 디자인에서 리본과 태그의 사용은 주로 온라인 의류 사이트에서 보여져왔던 것이 요즘은 여러 종류의 웹사이트에서도 사용되고 있습니다. 그 대표적인 예로 메인 메뉴의 백그라운드를 장식하는 것이라든가... Read More ➫

 

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

 

 

후버 이펙트

 

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