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

​ ▶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..

▶d3.js 튜토리얼 :: 자바스크립트이해하기자바스크립트는 브러우저에 이미 떠 있는 페이지의 DOM을 조작해서 페이지를 동적으로 만들 수 있는 스크립트 언어다. 앞서 D3를 이해하는 건 자바스크립트를 이해하는 과정이라고 말했다. 앞으로 깊게 파헤쳐 보겠지만 여기서는 시작하는 의미로 조금만 맛보자. 자바스크립트는 보통 텍스트파일로 작성해서 저장하고 브라우저의 웹페이지에서 파일을 불러온다.+하지만, 웹페이지에서 직접 자바스크립트 파일을 입력하는 방법도 있다.*새로 일을 시작할 때는 이 방법으로 코드를 빠르고 쉽게 테스트해 볼 수 잇다.* 또한 디버깅하고 코드에서 무슨일이 일어나는지 보기위한 핵심도구로 자바스크립트 콘솔을 사용할 수도 있다. 크롬 : [설정 및 관리] - [도구]에서 자바스크립트 콘솔을 사용할..