신기한 웹 세상

크롬 확장프로그램 비주얼 인스펙터 사용하기

F12키나 Ctrl+Shift+i을 누르면 개발자 도구가 나오는 것은 이쪽에서 일하는 사람은 다 알 것이다. 개발자 도구는 웹페이지의 구성요소를 확인할 수 있고, 바로 코드를 삽입하거나 수정해서 변화된 페이지를 바로 볼 수 있다. UI개발자라면 이 페이지에서는 CSS의 칼라값이 몇 개가 사용되고 몇개의 이미지가… Continue Reading →

wow.js으로 동적인 재미난 애니메이션 만들기

동적인 애니메이션을 만들기 위해서는 CSS3를 이용을 해야한다. CSS3 애니메이션은 엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜준다. 간단히 애니메이션에 대해서 알아보도록 하자. 애니메이션 속성 animation-delay: 엘리먼트가 로드되고 나서 언제 애니메이션 시작될지 지정한다. animation-direction: 애니메이션 종료되고 다시 처음부터 시작할지 역방향으로… Continue Reading →

아톰(Atom) 트리뷰(Tree View)에 파일 자동 포커스가기

사이드바(tree view)에 파일 자동 선택하기가 생소할 수 있지만 설명을 들으면 ‘아 그거~’ 할 수 있겠다. 아톰에서 화면 탭을 선택했을 경우 트리뷰에서도 자동적으로 선택해주는 것을 말한다. ‘기존에 되었던 것 아니야?’라고 할 수 있겠지만 사용자가 찾아서 선택하지 않으면 되지 않았던 부분이다. 처음부터… Continue Reading →

[걸프(Gulp.js)] gulp-nunjucks-render 플러그인을 사용하는 방법

예전에 gulp html tag include를 포스팅한 적이 있다. 최근에는gulp-nunjucks-render 플로그인을 알게 되어 포스팅을 해보려고 한다. 설치하기 $ npm install –save-dev gulp-nunjucks-render task 만들기: var nunjucksRender = require('gulp-nunjucks-render'); 다음으로, Nunjuck을 쉽게 사용할 수 있는 프로젝트 구조를 만들어야 한다. 아래의 구조로 사용할… Continue Reading →

82년생 김지영 졸독 – 남녀 필독서

우리가 당연하게 생각했던 것들이나 ‘여자면 여자다워야지’ 했던 일들 모든 것들이 여자에게는 불리한 조건이였으며 남자에겐 아무렇지 않은 것들이 여자들에겐 공포였다. 우리 사회에서 일어나고 있는 여자들이며 아직도 젊은 남자들도 그렇게 생각하는 이들이 많다. 하물며 같은 여자들도 마찬가지이다. 남자들은 거의 몰랐던 여자들의 세상. 여자들은 공감되는 이야기이다. 남녀 모두 읽어야 할 필독서이다.

영화 마크 러팔로, 레이첼 맥아담스 주연의 스포트라이트 관람

2016년 최고의 영화! 게오건 신부가 30년간 아이들을 성추행한 사건을 가지고 다룬 영화.
실화를 그대로 재연한 영화인데 듣기로는 팀도 그대로 재연했다고 하는데…정말 영화같은 일을 실제로 했다 이런 영화는 꼭 봐야하는 영화인듯 하다!

크롬(Chrome)에서 풀페이지 캡처하기!

크롬에서 풀페이지 캡처하기가 어려웠다. (필자가 알기론) 확장프로그램을 설치해서 캡쳐를 하거나 다른 캡처 프로그램을 이용해야했다. 그러나 4월 업데이트 내역을 보니깐 웹 페이지 전체를 캡처가 가능하게 되었다. 풀페이지 스크린샷 이미지 1. 개발자 도구 개발자 도구 단축키는 F12 or Ctrl+Shift+I이다. 이미지 2. 풀페이지… Continue Reading →

[JavaScript] 이미지 랜덤으로 노출 시키기

새로고침할 때마다 이미지 바뀌는 것을 해보았다. background-image 스타일 이미지로 변경하기 var banner = new Array(); banner[banner.length] = ‘bg01.jpg’; banner[banner.length] = ‘bg02.jpg’; banner[banner.length] = ‘bg03.jpg’; var obj = document.getElementById(‘backGround’); var size = Math.floor(Math.random()*(mainBg.length)); j = (isNaN(size)) ? 0 : size; obj.style.backgroundImage… Continue Reading →

처음 만나는 자바스크립트 3장

3-8 함수(세금 포함 가격 계산하기) 함수란, 자주 사용하는 처리를 하나로 묶은 작은 단위의 프로그램이다. var 함수명 = function(필요한 매개변수) { 구체적인 처리 내용 //필요한 매개변수는 이 안에서만 사용할 수 있다. //이 함수 작성 형식은 ‘이름 없는(익명)’함수를 작성해서 변수에 대입하였다. };… Continue Reading →

DOM을 깨우치다 2장

document 노드 개요 HTMLDocument 생성자(document로부터 상속됨)는 DOM 내에 DOCUMENT_NODE(예: window.document)를 생성. HTMLDocument의 속성 및 메서드(상속된 것 포함) //document 고유 속성 console.log(Object.keys(document).sort()); //document 고유 속성 및 상속받은 속성 var documentPropertiesIncludeInherited = []; for (var p in document) { documentPropertiesIncludeInherited.push(p); } console.log(documentPropertiesIncludeInherited.sort());… Continue Reading →

영화 원더우먼 관람

히오로물의 첫 편은 대부분 지루하거나 재미가 없는거 같다.
원더우먼도 마찬가지였다. 지루했다.
영웅이 태어나기 위해서 설명을 하고 왜 나타나게 되었는지 설명을 위해서 지루했지만 그래픽은 확실히 뛰어났다.
화려한 액션씬은도 나름 좋았지만 화려한 액션에 비해 박진감이 있지는 않았던거 같다.
갤 가돗은 이쁘구나!!

CSS 코드 냄새

[요약]추가적인 CSS코드 냄새에 좋은 내용이 있어서 사람들이 많이 알았으면 해서 퍼왔다. @extend mixin보다 성능이 떨어진다. CSS 성능이란 건 대체로 용량을 말하는데, 용량이 작아야 빨리 다운로드할 수 있기 때문이다. gzip 압축시 mixin은 완전한 반복이므로 용량이 확 줄어드는 반면, extend는 완전한 반복이… Continue Reading →

처음 만나는 자바스크립트 책 서평

자바스크립트를 배우고 싶은 초보자, 중상급자, 이전에 자바스크립트에 도전했다가 좌절했던 사람들에게 추천한다. 특히 초보자에게는 이해하기 쉽게 설명이 되어있으며 왜 실행 되는 이유까지 명확하게 나와있어서 더욱 다가가기 쉽다고 느껴진다.

아이리버 블랭크 탁상용&휴대용 핸디형 선풍기 BF-A5 사용후기

날씨가 더워지면서 핸디형 선풍기가 유행되고 있다. 아이리버에서 이번에 새로운 핸디형 선풍기가 나왔는데 아주 편리하고 좋아서 공유해보려고 한다. 우선 아이리버 쇼핑몰에서 가져온 공식 이미지들이다. 상·하 분리 버튼을 누리면 아래 그림처럼 분리 된다. 보조배터리로도 사용할 수 있게 USB케이블 연결 포트가 있다. 짧게… Continue Reading →

HTML5 Video태그 사용하기!

정의 <video>는 비디오나 영화를 재생시킨다. 속성 src: 재생할 비디오의 주소를 지정한다. width: 요소의 너비를 지정한다. (value: pixels) height: 요소의 높이를 지정한다. (value: pixels) loop: 반복 재생을 지정한다. (value: loop) poster: 사용자 에이전트가 비디오 데이터를 사용할 수 없는 경우 이미지 파일의… Continue Reading →

« Older posts


© 2017 신기한 웹 세상

Up ↑