Codesigner

웹 서비스를 개발하는 프로젝트를 진행하면서 유저의 데이터를 시각화할 필요가 생겨서 관련 라이브러리를 찾던 중, 우연히 D3라는 라이브러리를 알게 됐다. 기본 차트부터 빅데이터까지 데이터를 시각화하는데 유용한 추상화된 여러 메서드를 제공하는 D3에 대해 공부하면서 배운 것들을 이 시리즈로 정리해 보려고 한다. D3.js란? D3.js는 데이터 주도 문서(Data-Driven Document)의 약자다. D3.js는 웹 상에서 데이터를 시각화하려는 요구를 충족시키기 위해 설계되었다. D3.js로 도표, 선 그래프, 파이 차트 등 기본적인 차트뿐만 아니라 네트워크, 지도, 계통도 등 복잡하고도 커스터마이징 된 여러 시각화 레이아웃을 생성할 수 있다. D3.js는 마이크 보스톡(Mike Bostok)이란 사람이..

이 글에서는 CSS 기본 문법 및 구조에 대해서 살펴보도록 하자. CSS Structure HTML 요소를 CSS로 스타일 하기 위해선, CSS Selector로 요소를 지정해야 한다고 이전 글에서 배웠다. h1 { color: blue; } 결과: 파란글씨 curly brace( { } )로 감싸진 부분을 Selector의 body라고 하자. 위의 코드는 태그의 body에 color 속성을 blue로 설정해 주었다. "color: blue" 라인을 CSS declation이라고 하는데, CSS declation은 하나의 property와 그에 해당하는 value를 가진다. Property - 선택한 요소에 대해 스타일링하고자 하는 속성(i.e., size, color, etc.) Value - 해당 속..

CSS를 작성할 때 동시에 여러 CSS Selector를 적용하는 것이 가능하다. 이는 단순히 여러 Selector를 연달아 쓰는 것인데, 예를 들어 special 이란 클래스를 가진 태그를 다음과 같이 선택할 수 있다. h1.special { } 위 코드는 태그들 중에서 special 이란 클래스를 가진 요소를 선택해낸다. 만약 special 클래스를 가진 태그가 존재한다 해도 영향을 받지 않는다. Nested Elements 여러 Selector를 chaining 하기 위해 CSS는 nested(중첩된) 요소를 선택하는 것을 도와준다. 예를들어, 다음과 같은 HTML이 있다고 하자. 먹고 자고 코딩하고 태그 안에 있는 태그들을 선택하기 위해서 다음과 같이 CSS를 작성할 수 있다. .main-list..

CSS는 HTML요소를 태그 이름으로 선택할 수 있다. parapraph 요소 태그를 선택하는 CSS 문법은 다음과 같다. p { } 위 코드는 모든 태그를 선택한다. 여기서 p는 CSS Selector가 된다. CSS Selector가 스타일을 적용할 HTML 태그의 이름과 매치된다. 선택된 요소를 스타일링하는 모든 코드들은 { }(curly brace) 사이에 들어간다. Class name CSS는 단지 태그 이름으로만 HTML 요소를 선택할 수 있는 건 아니다. HTML의 요소들은 여러 속성들을 가지는데, 가장 흔한 속성인 class도 selector가 될 수 있다. 다음 예시를 보자. North face 이 paragraph는 "brand"라는 클래스를 가진다. 이 클래스를 선택하는 selecto..

Cascading Style Sheets의 약자인 CSS는 HTML을 스타일링하기 위한 language이다. 만약 이 글을 보는 당신이 색칠놀이와 폰트, 글자 크기, 그림자, 그림, 레이아웃 등 시각적인 부분을 작업하는 걸 좋아한다면, CSS를 배우면서 재미있을 것이다. 이 글에서는 HTML에서 원하는 요소를 선택하여 스타일링하는 방법과 CSS 파일 구조를 셋업 하는 방법을 간략히 소개하도록 하겠다. Inline Styles CSS는 HTML 코드 상에서 직접 쓰일 수 있다. 이를 inline style 이라고 한다. HTML을 스타일링하기 위해서, style 속성을 특정 요소의 opening tag에 추가해 줘야 한다. 그런 다음 그 요소에 원하는 CSS 스타일링을 시도해 볼 수 있다. 이 글자는 빨간..