시각화를 배우고 정리합니다

​ ▶Web design :: responsive full background image 예제코드 뜯어보기이 글에서는 브라우저의 크기에따라 배경이미지가 자동으로 조절되는 효과가 어떤 기능을 통해 이루어지는지에대해 살펴보려고 한다. 이를 살펴보기위해서, sixrevision.com 에서 제공하는 'responsive full background image'에 대한 데모사이트와 그에 대한 내용을 바탕으로 코드 하나하나를 뜯어보며 그 그 기능에 대해 정리해보고자 한다. 전체 뷰포트(viewport)를 다루는 background-size 속성에 대한 cover 값을 사용한다. cover 값은 브라우저가 자동으로 background image의 너비(width)와 높이(height)를 확장할 수 있도록 하는 cs..

▶ 배경이미지 크기를 조절하는 방법 : CSS의 background-size property에 대하여CSS의 background-size 속성을 이용하면 큰이미지를 작게하여 배경에 반복하여 배치하거나, 작은 이미지를 확대하여 배경에 가득 채울 수 있다. 이에대해 이글에서는 CSS background-size를 적용하는 몇가지 예시에 대해서 정리하고자한다. 이글에서 정리하는 내용목록은 다음과 같다. CSS background-size 활용 예시 background-size의 활용 ① 배경이미지 크기 조정(변경)하기 background-size의 활용 ② 이미지 늘리기 background-size의 활용 ③ 작은 이미지 크게하기 background-size의 활용 ④ contain과 cover backgro..

▶ICT노트 :: 웹디자인에 도움이되는 사이트 7가지 이번 글에서는, 웹디자인 및 개발에 도움이 되는 사이트를 정리해보았습니다. CODROPS 웹디자인 템플릿을 포함한 다양한 자료가 있는 사이트 입니다. 튜토리얼별로 데모사이트를 통해 확인한 뒤, 그에 따르는 과정을 공부할 수 있습니다. 주소는 : http://tympanus.net/codrops/ ColorZilla 그라데이션이 힘들다면 이곳에서 도움을 얻으실 수있을 것입니다. 그라데이션작업에 도움을주는 사이트인 ColorZilla. 주소는 : http://tympanus.net/codrops/ Jsbin html, css, javascript, console창을 열어놓고 output을 확인하면서 편집할 수 있는 사이트. 변경된 사항을 바로바로 확인할 ..