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

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

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

▶웹 개발지식 :: 부트스트랩(Bootstrap)이란? 부트스트랩(Bootstrap)이란 무엇일까? 부트스트랩은 웹에 뭣좀 해보려고하면(?) 마주치는 개념 여러가지 중 하나다. 무시하고 그냥 넘어가기에는 너무 자주보이기때문에, 한번 쯤 정리해볼 필요가 있는 것 같다. 부트스트랩(Bootstrap)의 개념 [사진 : 부트스트랩공식페이지 캡쳐화면] 고맙게도(?) 부트스트랩은 한국어페이지도 있는데, 부트스트랩 한국어페이지에서는 부트스트랩을 다음과 같이 한줄로 정의하고 있다. 부트스트랩의 개념 위 사진에서 보는 것처럼, 부트스트랩 한국어페이지에서는 "부트스트랩은 반응형이며 모바일 우선인 웹프로젝트 개발을 위한 가장 인기있는 HTML, CSS, JS 프레임워크입니다."라고 정의를 하고 있다. 여기서 "반응형이며"..

▶SITE :: 웹콘텐츠 기획사례 - 뉴욕타임즈의 네일샵 관련 기사 분석이 글에서 살펴보려고하는 웹콘텐츠는, 이번에 뉴욕타임즈에서 보도된 기사이다. 이 기사에 대해 중앙SUNDAY는 "상식파괴한 디지털퍼스트전략 화제"라고 언급했을 정도로, 이번 뉴욕타임즈의 기사는 기존에 우리가 보던 것들과는 형태가 많이 다르다. [사진 : www.nytimes.com/2015/05/10/nyregion/at-nail-salons-in-nyc-manicurists-are-underpaid-and-unprotected.htm] 이 기사를 접하게된 것은 '중앙SUNDAY'신문을 통해서 였다. 각 나라마다 '어두운삶'을 주제로 다룰 수 있는이야기는 많기때문에, 주제만 놓고보았을 때 특별하게 느껴지지는 않았다. 이 기사가 흥미로..

데이터시각화 사이트소개플로잉데이타[ flowingdata.com ] 오늘 소개해드릴 사이트는데이터시각화 정보를 찾는데 좋은 사이트인플로잉데이터[flowingdata.com] 입니다. [가장 오른쪽 책이 비주얼라이즈디스의 국문판 버전] flowingdata.com은 비주얼라이즈디스의 저자인네이션야우(Nathan Yau)가 운영하는 페이지 입니다. [flowingdata.com 페이지의 메인모습, 2014-04-20기준] 이 사이트에서는데이터시각화 분야의 좋은 정보들은 물론,다양한 사례들을 살펴볼 수 있습니다. [flowingdata.com에서 게시한 다양한 데이터시각화 예제들] 이처럼 다양하고 좋은 정보들을자주 업데이트한 다는 점이 큰 장점이라고 할 수있습니다. 뿐만 아니라, 데이터시각화 튜토리얼도 제공하..

​ SITE :: API란? :: API의 뜻과 발급절차 살펴보기 오늘 소개해드릴 것은, API발급방법입니다.최근 인터넷에서 흔히 'API'라는 개념을 보게 되는데요,API의 뜻은 무엇일까요? API[ application programming interface ] application programming interface의 약어. API란 함수의 모임으로, 프로그램들이 그것을 사용함으로써 귀찮은 일들은 운영 체제가 처리하도록 만들 수 있는 것이다. [네이버 지식백과] API [application programming interface] (컴퓨터인터넷IT용어대사전, 2011.1.20, 일진사) 네이버 지식백과에서 살펴본 API의 개념입니다. 조금 어렵지요^^? 조금 쉽게 생각해보면 방대한 데이터가쌓여..

티스토리 튜토리얼 :: 티에디션으로 메인 꾸미기이번 포스팅 에서는 [티에디션]을 활용하여 블로그 메인에 뜨는 글을 선택하는 방법을 소개하겠습니다^^ 앞서 말씀드린 블로그 메인의 대문글입니다.많은 블로거분들이 이렇게 메인페이지를 사용하고 계실텐데요 이때 [특정카테고리의 글]만 선택해서 보여주고 싶거나혹은 반대로 메인에 뜨게 하고 싶지 않을때 [티에디션]을 이용할 수 있습니다. 관리자 아이디로 로그인 하셨다면,블로그 메인 페이지 [우측상단]에 있는 [티에디션]을 클릭! 클릭하게되면 이런 창이 뜨게 됩니다.이때 먼저 [티에디션 창]의 설명대로편집할 아이템을 선택합니다. 저희가 편집해야할 아이템은블로그메인에 보여지게될 큰 글이기 때문에큰글을 클릭해줍니다. 그 다음 [티에디션 창]상단의 [글선택]을 클릭합니다.이..

SNS 유투브 저작권침해경고 관련 :: 무료음원 사용법, 사이트 소개incompetech 최근에 공모전 또는 개인적인 목적으로 영상제작을 하시는 분들이 점점 더 많아지고 있는데요~ 만들면서 걱정되는 부분이 바로 저작권 문제입니다. 보통 영상의 배경음악으로 사용할만한 곡들은 저작권이 있는 음원이 대부분인데요~ 별생각없이 다운로드 받아서 영상제작에 사용한 후 유투브에 업로드하게 되면, 이런 메시지를 보게 됩니다. 저작권 문제로 인해 삭제된 동영상---->'삭제됨(저작권 위반 경고)'이 표시 저작권 문제로 인해 동영상이 삭제 될 경우----> 계정은 저작권 위반 경고를 받게 됩니다. ** 동영상을 삭제해도 위반경고는 계정에서 삭제되지 않는다고 합니다. 그렇다면 이미 저작권 위반 경고를 받은경우에는어떻게 해야하..

페이스북 페이지 게시글 홍보하기이번 포스팅에서는 페이스북 페이지에서게시글을 홍보하는 과정을 살펴보겠습니다. 관리자 모드로 접속하면 이렇게 게시글 하단에서[게시물 홍보하기]버튼을 볼 수가 있습니다. 가격은 이렇게 나누어져 있었는데요'테스트'라는 느낌이니 5,400원을 설정해서 진행해 보았습니다. 결제는 비자카드/마스터카드 종류만 가능했는데요~신용카드는 물론 체크카드도 가능했습니다. 이렇게 게시물을 홍보하고 날짜로는 3일 정도 지났는데요~하단에 보시면 [ 2,994명이 봤습니다 ]라고 나와있습니다. 또한 우측에 보면 [게시물클릭수 - 동영상조회, 링크클릭, 다른링크클릭]과[좋아요, 댓글, 공유 수 ]등이 함께 표시되어있어서 효과를 바로바로 확인 할 수 있었습니다.^^ 게시물 도달 페이지에서는이렇게 유기적도달..