Category FE 개발
클릭을 했을 경우 href="#아이디값"으로 끊겨서 이동하는 것이 아니라 jQuery의 .animate()를 이용해서 화면이 부드럽게 이동되게 할 수 있다. 또 아이디 값이 없고 #만 있을 경우는 맨 위로 이동 시키게 할 수 있는데 참고 소스는 아래와 같다. 부드럽게 스크롤링의 접근성 원활한 스크롤링을… Continue Reading →
서브라임 텍스트 3이 드디어 업데이트 되었다. 2015년 3월 26일에 3083으로 업데이트 된 이후 거진 일년만에 업데이트가 된거 같다. 2월 9일에 3103으로 업데이트가 되었다. 개발자 모드로 하면 https://www.sublimetext.com/3dev 여기서 볼 수 있었지만 공식적으로 나오지 않은거라서 불안정했었다. 장점은 빠르게 변화되는걸 체험할 수… Continue Reading →
안녕하세요~!! 모바일에서 레이어(모달) 팝업 띄웠을 때 레이어 안에서 스크롤이 안되는 경우가 많았습니다. iScroll를 쓰면 아이폰에서 문제가 생기는 이슈가 있었습니다. 스크롤 하게 되면 body쪽 전체 스크롤이 움직이고, 안쪽만 안되는 어려움이 많았다. HTML: <div id="wrap"> <a class="btn_layerpopup" href="#layerPopup">팝업 띄우기</a> <div class="layer-popup" id="layerPopup">… Continue Reading →
Dom 트리에 접근하고 수정하는 작업은 크게 두 단계로 나뉜다.
1. 작업을 수행 할 대상 요소를 표현하는 노드를 찾는다.
2. 해당 노드의 텍스트나 자식 요소, 특성 등을 조작한다.
사이트마다 CSS 속성들을 얼마나 사용했는지를 알 수 있는 프로그램이 있다. 크롬에 확장프로그램을 받아서 볼 수 있다. 사용 예 테스트 사이트로 우리나라에서 많이 사용하는 포털중에 하나 네이버를 예를 들겠다. 네이버에서 이 프로그램을 실행했을 경우 나오는 화면이다. css를 불러오는것을 체크를 하고 START… Continue Reading →
반응형 사이트를 만들때 (유투브)동영상이나 구글 맵을 넣어야할 때가 있다. 근데 이녀석들은 대부분 고정으로 값을 넣기 때문에 반응형할때 난감해질때가 있다. 위 아래 여백이 생긴다던지 동영상 크기가 비율이 안맞게 나오기도한다. 간편하게 바꿔줄 수 있는 사이트를 소개하겠다.
CSS 속성에도 순서를 지켜주면 참 좋다. 되고 말고 CSS를 입력하는 사람들이 있는데… 협업을 할 때는 절대적으로 필요한 순서이며 대체적으로 이렇게 해주면 좋다는 것을 가지고 있다. 필자가 몇군데서 본 속성 순서를 공유하겠다. 여기서 보면 HTML, CSS속성 순서에 대해 설명이 잘되어있고, CSS… Continue Reading →
transform transform은 요소 박스를 변형하는 속성이다. 2차원, 3차원 변형이 가능하고, 변형 형태별로 함수 타입의 속성값을 지정한다. CSS3 2D Transforms 2d transform 속성은 6가지가 있다. translate() translate() HTML 요소 박스를 평면상에서 수평 이동하는 기능이다. 가로 및 세로 방향을 이동하는 길이 값을… Continue Reading →
Polyfill이란? 개발자가 브라우저가 자체적으로 제공하기를 기대하는 기술을 실행한다. Polyfills는 웹브라우저에서 설치되어있지 않는 기능을 제공하는 하는 것이다. 예를 들어서 대표적인 HTML5의 특징들은 하위브라우저 IE 9이하 버전에서는 지원하지 않는데 Polyfill를 설치한 웹 페이지를 사용하면 가능해주는 기술이다. Web Shim과 HTML5 Shiv 관련된 개념이다…. Continue Reading →
속성:값 작성시에 속성: 값으로 나올때가 있다. CSS나 SASS에서 나오는 현상여간 신경쓰이고 귀찮은게 아니다. Sublime Text css_completions.py 수정하기 Ctrl+shift+p를 눌러 ‘PackageResourceViewer’라는 플러그인을 설치하자. 이 플러그인을 이용하지 않을 경우 폴더로 가서 직접 수정해야한다. 단축키 prv 를 누르면 PackageResourceViewer:Open Resource 나오는데 이거 선택하면… Continue Reading →
Gulp 환경에서 CSS파일에 처리 적용할 업무는 문법 검사, 코드 병합, 압축 과정으로 필요한 모듈은 gulp-csslint, gulp-concat-css, gulp-uglifycss 이다. 설치하기 npm install –save-dev gulp-csslint gulp-concat-css gulp-uglifycss 설정하기 var csslint = require(‘gulp-csslint’); var concatcss = require(‘gulp-concat-css’); var uglifycss = require(‘gulp-uglifycss’); /** *… Continue Reading →
$ .holdReady () 메소드는 jQuery의 ready 이벤트를 지연 호출 할 수 있다. 이 고급 기능은 일반적으로 DOM을 준비 할 수 있다하더라도, 준비 이벤트가 발생하도록 허용하기 전에 이러한 jQuery를 플러그인으로 추가 자바 스크립트를로드 할 동적 스크립트 로더에 의해 사용된다. 이 방법은… Continue Reading →
Packages: HTMLEntity Snippets Github: HTMLEntity-Snippets 정리해야할 것들이 태산이다.
jQuery로 애니메이션을 구현할 때 흔히 만나게 되는 문제가 하나 있다. 바로 애니메이션 큐(queue) 이다. 예를들어, 네비게이션 메뉴에 마우스가 오면 애니메이션이 동작하게 코딩이 된 경우, 마우스를 여러번 움직였을 때, 이전 애니메이션이 멈추기 전까지 마지막 애니메이션이 동작하지 않는 현상이 바로 애니메이션 큐로… Continue Reading →
참 오랜만에 업데이트 된 것 같다. 2014년 8월 27일에 업데이트 되고 나서 베타버전이 업데이트 된건 오랜만이다. http://www.sublimetext.com/3 아래는 업데이트 내역을 그대로 가져왔다. 버전을 보면서 왜 버전이 확 달라졌을까 생각하는 이가 있을것이다. ST3는 아직 베타버전이라 계속 개발 중인 상황입니다. 개발 버전을… Continue Reading →
마우스가 접근했을 때 다른 이미지로 교체하는 방법 Class를 이용하는 방법 img태그에 class를 기입한다. <img src=”img_off.png” class=”rollover” /> jQuery로 변경을 한다. $(“.rollover”).on(‘mouseenter’, function() { $(this).attr(“src”, $(this).attr(“src”).replace(“_off”,”_on”)); }).on(‘mouseleave’, function() { $(this).attr(“src”, $(this).attr(“src”).replace(“_on”, “_off”)); }); .index()를 이용하는 방법 리스트내에서 순서를 부여해 해다하는 객체만… Continue Reading →
메소드 기능 charAt(index) index위칭의문자를알아냄 concat(문자열) 두문자열을하나의문자열로만듬 indexOf(문자열) 왼쪽부터문자를검색후지정된위치의문자를알아냄 lastIndexOf() 오른쪽부터문자를검색후지정된위치의문자를알아냄 slice() 문자열의일부분을추출해냄 split() 문자열을분리시킴 substr() 문자열을추출해냄 subString() 문문자열을추출해냄 toLowerCase() 문자열을소문자로만듬 toUpperCase() 문자열을대문자로만듬
DocBlockr 은 서브라임텍스트에서 사용하는 플러그인으로써 주석을 통해서 문서작성을 도와주는 플러그인이다. 필자가 사용해보니 아주 유용한 플러그인이다. 유용한 플로그인이다. DocBlockr 에서는 Sublime Text 유용한 패키지 및 팁안내에서 간단히 설명히 한적이 있다. DocBlockr은 St2, St3 모두 지원한다. 설치 Package Control Preferences -> Package… Continue Reading →
<script type=”text/javascript”> //////////////////////////////////////////////// // Javascript made by http://peters1.dk/tools // //////////////////////////////////////////////// // REMEMBER: To change the path, where snow.gif is saved… snow_img = “http://www.domain.com/snow.gif”; // EXTRA: You can adjust the numbers of snowflakes you want on each page… snow_no = 15;… Continue Reading →
Ruby 설치하기 루비 인스톨러(Ruby Installer) 설치 루비인스톨러 설치 파일을 다운받아야 하기 때문에 루비인스톨러 다운 페이지로 가보자. 루비인스톨러 파일 다운로드 하기 버전은 최신버전으로 다운받으면 된다. 자기 OS환경따라 받으면 되지만 32/64비트 상관없이 맨 위에 것을 설치 해도 상관없다. 루비 인스톨러 설치하기 언어는… Continue Reading →
JavsScript 프레임 워크들이 많아서 공부 할 것들이 너무 많다. 그래서 많이 쓰이면서 공부해야할 것들을 정리를 해보았다. 다른 곳에서 정리 한것을 재정리를 한 것이다. Angular.js http://angularjs.org Underscore.js http://underscorejs.org D3.js http://d3js.org Node.js http://nodejs.org two.js http://jonobr1.github.io/two.js Zebra https://github.com/barmalei/zebra Formula.js Chart.js http://www.chartjs.org Parallel.js http://adambom.github.io/parallel.js… Continue Reading →
Firefox Developers Edition이 공식 발표가 되었다! 필자가 조금 살펴본 결과 확실히 대단한 개발툴이 틀림이 없어서 이렇게 소개를 하려고 하고 있다. 아직 한국어버전이 안나왔기 때문에 다소 어려움이 느낄 수 있는데… 간단하게 소개를 해보려고 한다. 설명: https://hacks.mozilla.org/2014/11/mozilla-introduces-the-first-browser-built-for-developers-firefox-developer-edition/ 다운받기: https://www.mozilla.org/en-US/firefox/developer/ 대표적인 기능 WebIDE… Continue Reading →
웹사이트에 파일 업로드 방법이 여러가지 방법이 있지만 Bluehost에서 Web Hosting을 사용하는 것보다는 FTP 프로그램을 이용하는 것이 빠르다. FTP프로그램을 이용하려면 4가지를 꼭 입력을 해야한다. 1. 도메인 주소 및 IP 주소를 FTP 주소 입력창에 입력 해야한다. 2. Username(계정)을 입력을 해야한다. 이는 Bluehost… Continue Reading →
웹 퍼블리싱을 하면서 사이트를 위해 그리고 작업을 하게 된다. 스프라이트 기법에 자세한 설명은 CSS Sprite(스프라이트) 기법이란?에 보면 나와있다. 여기서 이미지를 클릭하면 아래와 같이 값이 나온다. 이것은 샘플화면이고 OPEN를 눌러서 이미지를 넣으면 된다. http://www.spritecow.com/
상태코드번호 메세지 설명 100 Continue 클라이언트로부터 일부 요청을 받았으니 나머지 요청 정보를 계속 보내 달라는 것. 101 Switching Protocols 서버는 클라이언트의 요청대로 Upgrade 헤더를 따라 다른 프로토콜로 바꿀 것임 200 Ok 모든 것이 정상적임. 201 Created 서버에서 문서를 만들었음. Location… Continue Reading →
<input type=”email” name=”email> 이메일 유형은 아이폰 iOS와 안드로이드 브라우저 모두 사용자 정의 키보드가 나타난다. iOS키보드에서는 “@”와 “.”가 키보드 아래 추가 되었다. 안드로이드트에서는 표준 콤마 키가 스페이스바 왼쪽에 “@”키가 나타난다. <input type=”url” name=”url” /> iOS url 주소 키보드 input type url은… Continue Reading →
<ul> <li>리스트 1</li> <li>리스트 2</li> <li>리스트 3</li> </ul> ul { margin: 0.75em 0; padding: 0 1em; list-style: none; } li:before { content: “”; border-color: transparent #111; border-style: solid; border-width: 0.35em 0 0.35em 0.45em; display: block; height: 0; width: 0; left:… Continue Reading →
레이어 중앙 정렬 레이어 중앙 정렬 하는 방법 3가지 정도 추천을 할까 합니다. 1.Margin을 이용하는 방법 1-1.Magin 반값을 사용하는 방법 장점: 자주 쓰이는 방법이고 모든 브라우저에서 사용이 가능하다. 단점: 레이어의 사이즈가 유동인 경우 활용하기가 어렵다. 1-2.Margin auto값으로 하는 방법 장점:… Continue Reading →
Color Highlighter sublime text 플러그인 중에 color관련 플러그인 하나를 소개하겠습니다. 설치방법 1. sublime text에 Package Control을 설치를 하셨다면 ctrl+shift+p 눌러서 팝업창에서 Color Highlighter 검색해서 설치하는 방법이 있습니다. 2. 이것이 잘 안되거나, Package Control이 설치가 안되었다면 직접 다운 받아서 폴더에 넣는… Continue Reading →