전체 글 312

[AngularJS 2.0] #기초 :: *ngFor 이해하기

[AngularJS 2.0] #기초 :: *ngFor 이해하기이번 글에서는, AngularJS 기초 개념 중 *ngFor에 대해서 공식페이지에서 제공하는 내용을 바탕으로 살펴보려고 한다. _ *ngFor 를 활용하여 배열의 속성을 보여주기 [Showing an array property with *ngFor] - 목적 또는 상황 : 한 명의 hero 정보가 아닌, 여러 hero 의 정보가 배열 형태로 담겨있는 hero list 의 내용을 화면에 표현하고자 한다. (예제 작성을 위해서) 임의의 hero name이 들어있는 배열을 Component 에 추가한다. 임의의 heroes 이름이 들어있는 배열의위치는 myHero 의 바로 위 이며, myHero 도 hero 이름 배열의 첫 번째 원소로 지정 해준다...

AngularJS/AngularJS 2016.07.05

Javascript- 프로토타입체이닝

자바스크립트 - 프로토타입이란?(나를 포함하는) 초급 개발자의 경우, 알아야할 것들이 한 두개가 아니다보니, 개발에 바로 쓰여야할 중요한 개념이아니고서야(사실 모르면서 개발에 써본적이 매우 있다.) 그냥 못본척 지나쳐버리는 개념들이 굉장히 많다. 나에게 이 Prototype 개념역시 그 중에 하나이다. 이전까지 대-충 알아왔지만, 한번도 깊게 기술적인 내용을 들여다 본적은 없었기에, 이번 기회를 통해 제대로 정리해보고자 이렇게 글로 정리하고있다.* 그래서, 이 글에서 살펴볼 내용 : 자바스크립트의 '프로토타입' 개념 왜 프로토타입을 알아야 할까?프로토타입 관련 개념이 자바스크립트에서 OOP를 구현하는데 있어 기본 바탕이 되기때문이다. *OOP란, object-oriented programming의 약자로..

WEB/Java Script 2016.07.03

Berlin 위치정보 데이터 시각화

Berlin 위치정보 맵핑 - 위치정보 기록 및 데이터 맵핑 지난 2월, 베를린에 작업환경(?) 견학차 다녀왔습니다.혼자가는 여행이라 기록을 잘 못할 듯 싶어, moves라는 앱을 설치해서 이동경로를 기록해두었습니다. 제 개인정보를 제가 스스로 기록해 외부서비스를 사용하여 업로드 한다는 것은, 저로서도 굉장히 찝찝한 일이었지만, 콘텐츠를 만드는 사람으로서 의미를 찾을수는 있었습니다. 뒤늦게 cartoDB로 정성없는(?) 콘텐츠를 만들어 올립니다. 위치정보와 함께 기록시간을 기점으로 그려지는 애니메이션 맵핑 어디에 많이 머물렀는지를 볼 수 있는 히트맵 투박하지만, 공유합니다.

시각화 2016.04.16

▶패럴랙스(parallax)기능과 기술을 구성하는 원리

▶패럴랙스(parallax)기능과 기술을 구성하는 원리실제 패럴랙스(parallax) 라는 단어는 변경을 의미하는 그리스어 parallaxis 에서 파생된 것이다. 인간의 눈에 가까이 있는 물체일수록 더 큰 시차를 가지고 있다. 이것은 달리말해 가까운물체가 멀리있는 물체보다 더 빠른 속도를 갖는 것처럼 보일 수 있음을 의미하기도한다. 웹페이지의 패럴랙스(parallax)기능은 어떤 원리로 만들어지는가? 웹디자인의 관점에서보면, 이는 가장 일반적으로 오브젝트 또는 배경의 레이어화를 통해 얻을 수 있다. 또한 이것은 웹페이지의 스크롤과 애니메이션의 속도로 깊이에 대한 착시를 이끌어낼 수 있다. 기술으로, 패럴랙스(parallax)효과는 고정된 뷰포트(viewport)에서 화면의 배경이미지 외의 다른 전경 요..

WEB/Java Script 2015.07.18

▶Web design :: responsive full background image 예제코드 뜯어보기

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

시각화/사이트 2015.07.12

▶ 배경이미지 크기를 조절하는 방법 : CSS의 background-size property에 대하여

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

시각화/사이트 2015.07.12

▶자바스크립트 :: Ajax ② - Ajax의 동작방식

▶자바스크립트 :: Ajax ② - Ajax의 동작방식지난글에서 Ajax의 기본개념과 활용방안, 그리고 동기/비동기 처리모델에 대해서 살펴보았고, 이번글에서는 구체적으로 Ajax가 어떻게 동작하고있는지에대해 살펴보고자 한다. 지난글 : Ajax의 기본개념과 활용방안 [바로가기] Ajax의 동작방식에 대하여 Ajax를 사용할 때 브라우저는 웹 서버에 정보를 요청한다. 그런 후 서버의 응답을 처리하여 페이지에 해당 데이터를 표시한다. 1. 요청 : 브라우저는 서버에 정보를 요청한다. [ 서버의 동작 : 서버는 응답으로 데이터를 전달한다(주로 HTML, XML, JSON형식). ] 2. 응답 : 브라우저는 콘텐츠를 처리하여 페이지에 추가한다. 1. 요청 : 브라우저는 서버에 정보를 요청한다.브라우저는 서버에 ..

WEB/Ajax 2015.07.12

▶자바스크립트 :: Ajax ① - 개념 및 활용방향

▶자바스크립트 :: Ajax ① 개념 및 활용방향 이 글에서는 자바스크립트 라이브러리중 jQuery와 함께 가장 많이 활용되고있는 Ajax에 대해서 살펴보려고한다. 짧게 요약해보면, Ajax는 "전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법"이라고 할 수 있다. 모든 내용을 하나의 글에 담기보다는 여러 글에 나누어 정리해보려고하는데, 이번 글은 그 중 첫 번째글이며, 여기에서는 개념과 활용, 그리고 가장 기본적으로 알아야할 기능의 동작방식에 대해서 살펴볼 것이다. Ajax란 무엇인가 Ajax는 서버로부터 데이터를 가져와 전체 페이지를 새로 고치지 않고 일부만 로드할 수 있게 하는 기법이다. 본래 Ajax는 비동기 요청을 보내는 데 필요한 기술, 즉 Asynchoronou..

WEB/Ajax 2015.07.07

▶AdobeMuse :: 텍스트 또는 이미지가 뿌옇게보이는 현상 해결방법

▶AdobeMuse :: 텍스트 또는 이미지가 뿌옇게 보이는 현상 이글에서 살펴보고자하는 것은, 어도비 뮤즈에서 웹사이트 제작시 이미지 또는 텍스트사용시 뚜렷하게 나타나지 않고, 흐릿하게 화면에 표시되는 문제과 이에대한 해결방법을 정리해보고자 한다. 어도비뮤즈는 어느정도 수준의 웹사이트를 쉽고, 빠르게 만들 수 있는 좋은 툴이다. 특히 기존 어도비프로그램(Photoshop, illustrator등)에 익숙한 사람이라면 빠르게 적응하여 활용할 수 있다는점이 큰 매력이라고 할 수 있다. 그러나, 어도비뮤즈가 시작된지 꽤 되었음에도(뮤즈는 11년8월에 첫 베타버전이나왔다.) 활용성은 다른 프로그램과 비교해보았을때 만족스럽지 않은 수준이다. 어도비뮤즈에서 시스템폰트 적용시, 텍스트 또는 이미지가 뿌옇게(선명하지..

사이트 : 대학알리미 - 올바른 대학관련 데이터를 확인하는 곳

사이트 : 대학알리미 - 올바른 대학관련 데이터를 확인하는 곳이글에서 소개하고자하는 것은 '대학알리미'입니다. 대학알리미는 위 제목에서 이야기했던 것 처럼 "올바른 대학관련 데이터를 확인하는 사이트"입니다. 전국에는 수 많은 대학교가 있으며, 그에 대한 정보역시 너무나 많다. 수능이 있는 11월 즈음만 되면 여기저기 대학관련 광고들이 넘쳐나고, 인터넷 기사에도 대학을 홍보하는 내용의 광고가 널려있다. 그런데 홍보내용을보면 저마다 취업률 1위라는둥, 심지어 어떤곳은 취업률 100%라고 해둔 곳도 많다. [대학알리미 : http://www.academyinfo.go.kr] 대학알리미는 그러한 궁금증을 해소해줄 수 있는 곳이다. 우리가 궁금해할만한 대학관련 정보는 여기에 다 있다고 보면된다. 무엇보다 대학알리..

시각화/사이트 2015.06.20