신기한 웹 세상

Category

Web issue

[파워포인트]파워목업 4.3 설치 하자!

소개 예전에 파워목업에 대해서 포스팅을 한적이 있습니다. 이전 포스팅 보기 이전 포스팅이 2014년이였는데 벌써 3년이.. 버전도 많이 올라갔네요..ㅠㅠ 그래서 다시 포스팅을 하려고 합니다. 혹시 이전 포스팅된 것을 보지 않은 사용자들을 위해서 파워목업에 대해 안내해드립니다. 파워 목업: 파워포인트의 모형 및 와이어… Continue Reading →

IE10, IE11 셀럭트박스 텍스트상자 커지는 현상

문제 IE10, IE11에서 셀럭트박스 선택을 하면 아무이상이 없는데 input 상자에 포커스 있는 상태에서 셀럭트박스를 다시 선택하면 텍스트상자 넓이가 커지는 현상이 있습니다. 이유는 placeholder로 인해서 일어나는 현상입니다.(IE10, IE11에서만 오류가 일어납니다.) 오류는 아래와 같습니다. 선택1선택2선택3 오류 체크 하셨습니까? 혹시 확인을 못하신 분들을… Continue Reading →

jQuery Tab Menu 사용하기

jQuery로 만든 Tab Menu 플로그인.
웹에서 자주 사용하는 Tab Menu를 플로그인으로 만들어봤습니다. 소스는 초보자들을 위해서 만들었으니 참고 부탁드립니다.

프론트 엔드 개발자를 위한 온라인 코드 에디터 소개

UI 개발을 하다보면 실시간으로 확인을 한 것이 필요할때가 있고 또 소스를 일부 공유 해야할 때가 있습니다. 아직 비공개이거나 일부 내용만 공개 하고 싶을 때 사용할 수 있는 온라인에서 코드 작성할 수 있는 에디터들을 몇가지 소개를 하려고 합니다. UI Development Online… Continue Reading →

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

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 →

[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 →

CSS 코드 냄새

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

HTML5 Video태그 사용하기!

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

HTML <head> 태그를 알아보자

HTML을 사용하면서 <meta>태그를 사용하긴 하는데 대충 이해(자주 사용하는 요소만)만 하거나 아니면 전에 작성한 것을 CTRL+C, CTRL+V하기만 했었다. 그치만 근래 Open Graph도 많이 사용 되면서 궁금증이 생겨났고, 좀 더 깊이 그리고 자세히 알고 싶어졌다. 혹시 나와 같은 사람들이 분명히 있을 듯하여… Continue Reading →

Blisk 모바일화면과 PC화면을 동시에 보는 웹 브라우저

BLISK란 무엇인가? Blisk는 모든 기기에서 원활히 잘 작동하고 웹사이트 개발과 테스트를 위한 브라우저이다. Blisk의 특징은 공식사이트 메인에서도 안내하고 있는데 다음과 같다. 스마트 폰과 태블릿을 완전히 동일하게 작동할 수 있다. 데스크탑과 모바일의 URL과 스크롤이 동기화 된다. 파일 변경시 자동으로 페이지를 새로고침한다…. Continue Reading →

아톰(Atom) Welcome 화면 비활성화하기!

아톰을 실행할 때마다 그리고 새 창을 띄울 때 마다 Welcome Guide 창이 열려서 번거로워서 구글링을 해보았다. ctrl+,를 Settings 화면에 들어가는 방법 및 File » Settings..선택해서 들어갈 수 있다. Packages에서 Welcome을 검색해서 아래의 이미지 처럼 나올 것이다. 1. 비활성화(disabled)를 한다. 2…. Continue Reading →

Chrome(크롬) 브라우저 테마 추가하기(Deadpool)

크롬 브라우저를 사용하다보면 앱, 테마, 앱, 게임등을 받을 수 있다. 이번에 테마를 변경함으로써 다양한 테마들이 존재하여 공유하고자 이렇게 글을 남긴다. 필자가 적용한 테마는 아래의 Deadpool이다. 필자가 같은 테마를 받으려면 다운받기받기를 누르면 된다. 그러면 크롬의 테마 링크로 이동 될것이다. 이 테마외에… Continue Reading →

아톰(Atom) 패키지 Layout 나눠보자

서브라임 텍스트에서는 기본적으로 레이아웃을 나눌 수 있었다. 단축키는 이미지에 나와있는거처럼 가능하다. 이렇게 하려면 아톰은 패키지를 이용해야 하는거 같아서 구글링을 검색을 해봤다. 아톰에서는 Pane Layout Package를 설치하면 비슷하게 사용가능하다.

Sublime Text3 테마 추천 Seti_UI

서브라임 텍스트 테마 중에 Seti_UI 테마를 추천하려고 한다. 서브라임 텍스트를 쓰면 대부분 Theme – Soda를 많이 사용하고 있었는데 필자도 Soda를 사용하다가 최근에 Seti_UI로 변경하였다. 바꾸게 된 계기는 Soda를 계속 썼더니 질린것도 있고 폴더구조에서 Seti는 아이콘도 제공되서 굳이 자세히 보고 있지… Continue Reading →

아톰(Atom) 패키지 감싸는 태그! atom wrap in tag

Sublime Text에서는 기본 기능이였던 감싸는 태그가 아톰에서는 패키지를 설치를 해야한다. Sublime Text에서 단축키는 Ctrl+Shift+Enter이다. Atom wrap in tag 설치 ※ 필자는 윈도우 환경이라 항상 윈도우만 설명합니다. Ctrl+, (comma)를 눌러 세팅(Settings)메뉴가 나온다. 아래 이미지처럼 메뉴를 눌러서 들어가도 된다. 기본 단축키는 alt+shift+w이다…. Continue Reading →


© 2017 신기한 웹 세상

Up ↑