본문 바로가기

메모장

JavaScript/CSS 용량 줄여주는 웹 사이트 Online JavaScript/CSS Compression Using YUI Compressor JavaScript/CSS 용량 줄여주는 웹 도구 Online YUI Compressor는 온라인에서 JavaScript와 CSS를 압축하는 도구다. 야후의 YUI Compressor를 사용하는 이 도구는 입력 파일에서 변수의 이름을 단축시키고 공백을 삭제하는 등 웹 브라우저만 이해할 정도로 내용을 압축하고, JavaScript와 CSS에 문법적 오류가 있으면 그것까지 지적해준다. 이거까진 공개 안하려했는데, 내 홈페이지의 JS를 이 도구에 사용해보니 용량이 60% 줄어들더라.. 한국의 개발자가 더 좋은 툴을 개발하여 정리할 겸 글 판올림을 한다. http://iblogbox.com/devtools/js/에..
[jsbeautifier.org]JS, CSS 파일 압축한 파일 풀어서 보기 jsbeautifier.org jsbeautifier(http://jsbeautifier.org/)는 난독화/패킹된 자바스크립트 디코딩할때 아주 유용한 툴입니다. 가끔 안되는 경우도 있는데 보통은 디코딩이 깔끔하게 잘 되고 들여쓰기와 줄바꿈을 해주기 때문에 수동으로 디코딩한 결과를 보기쉽게 정리시킬때도 좋습니다. 바로가기
[HTML5+CSS3]에 대한 전체적인 개념 정리파일 [HTML5+CSS3]에 대해 전체적인 정리파일 다운로드 하셔서, 압축 푸시고 보시면 됩니다.
[jQuery]이미지 로딩 - Lazy Load Plugin for jQuery(특정영역) Lazy Load Plugin for jQuery 이미지 파일들을 페이지 호출시 무작정 보여주는 것이 아니라 브라우져의 가시영역을 이동(스크롤)할 경우에만 해당 영역의 이미지를 보여주는 기능 사용법 1. 헤더부분에 아래코드를 넣음 2. 이미지 태그를 지정함 (기본코드) $("img").lazyload(); 3. 실제 적용예제(img/grey.gif 파일을 이미지 로드전에 보여줌) $(function() { $("img").lazyload({placeholder : "img/grey.gif"}); }); 4. 특정영역에만 코드적용 게시판이나 본문내용외에 다른 이미지의 로드가 오작동하는..
적응형 웹(AWD, Adaptive Web Desing)과 반응형 웹(RWD, Responsive Web Design)의 차이점 적응형 웹(AWD, Adaptive Web Desing)의 정의 적응형은 몇개의 해상도를 정의하여 CSS코딩시 브라우저가 범위 사이즈에 속하면 그에 따라 정의된 스타일로 표현한다. 적응형웹은 PX단위를 사용하여 각 디비이스마다라기 보다는 정해진 해상도에 적응된 형태로 화면에 그려지기 때문이다. 반응형웹과 적응형웹모두 공통적으로 미디어쿼리를 사용한다. 반응형 웹(RWD, Responsive Web Design)의 정의 사용자의 사용환경과 행동패턴에 유기적이고 적절하게 반응하는 웹요소들에 대한 총체적 디자인을 말하는 것이다. 협의적 관점에서 본다면 Screen Size, Resolution, Orientation 등 사용 단말환경에 반응하여 웹페이지를 제공하는 것이라고 정의 할 수 있다. 즉, 화면 너비에 ..
크롬, 파폭 등에서 location.href 가 동작하지 않을때 location.href 가 동작하지 않을때? IE에서는 문제 없이 동작하는 location.href(" ")가 크롬이나 파폭 등 여타 브라우저에서는 정상 동작하지 않는다. 해결 방법은 의외로 간단하다. before - location.href("where"); after - location.href = "where"; 출처 - http://blog.naver.com/bubi19/110128045100
RWD, Responsive Web Design 반응형 웹에 대해서 반응형 웹(Responsive Web)의 등장배경 최근 다양한 모바일 기기가 보급되면서 하나의 사이트를 만들더라도 데스크탑 / 모바일 폰 / 타블렛 PC 등 서로 다른 해상도를 가진 디바이스들을 고려하지 않을 수 없게 되었다. 데스크탑 하나만 보더라도 와이드의 고해상도 디스플레이가 확산됨에 따라 많은 사이트들이 기존의 1024*768 크기를 넘어 점차 사이즈를 키워가고 있는 추세이지만 그렇다고 하나의 해상도에만 맞춰 사이트를 제작하기도 어렵다. 이렇듯 N-Screen의 시대로 불리는 다양한 디바이스의 해상도에 맞춰 사이트의 레이아웃을 변환하는 이슈에 맞춰 등장한 것이 반응형 웹(Responsive Web)이다. 반응형 웹(Responsive Web)이란? 사용자의 사용환경과 행동패턴에 유기적이고 적절하게..
미디어 쿼리(media queries) 사용법과 속성 미디어쿼리(@media)를 사용하기전 체크사항 1. HTML5인지 확인합니다 ==> HTML 4.0 버전에서는 개발하기 힘듭니다. 2. 이 하나라도 있는지 확인합니다 ==> TABLE가 존재할 경우 레이아웃이 깨집니다. 3. 개발 브라우저가 IE만 있을 경우 IE9 이상인지 확인합니다 ==> 물론 IE8이하에서도 JS로 해결이 가능합니다만, 그래도 불안정하기 때문이죠. 4. 되도록 스크립트 코드는 부분보다는 끝에 작성합니다 ==> 로딩 속도는 비슷하나, 체감 속도에서 많은 차이가 납니다. 미디어쿼리(@media)를 사용법 구조는 이렇습니다. (3가지 방법 중 하나를 선택해서 사용하시면 됩니다.) @media를 미디어쿼리라고 합니다. 모두 스타일 시트 내부에 작성됩니다. 1) @media only all ..
[CSS3 천기누설]이해하기 쉬운 CSS3에 관한 짧은 프레젠테이션 CSS3 천기누설텍 출처 - http://slidesha.re/eDDt2F
제이쿼리(JQuery)를 이용한 썸네일 이미지 갤러리 제이쿼리(JQuery)를 이용한 썸네일 이미지 갤러리 CSS를 사용해 마크업을 하고, 모션은 제이쿼리(JQuery)를 사용해 간단하게 만들어보았습니다. 결과물 화면이구요. 소스 화면입니다. 다운로드 하셔서 분석해 보셔요
[MEDIAQUERI.ES]미디어쿼리(Media queries)를 사용한 반응형 웹 사이트 갤러리 반응형 웹 모음 마크업은 모두 같고, CSS로만 제어하여, 반응형 웹으로 만든 사이트들을 한눈에 볼 수 있는 갤러리 사이트입니다. 바로가기
Color Picker, 그라데이션(그라이디언트)CSS3 코드 생성 사이트 ColorZilla 사이트 웹페이지에서 원하는 색을 추출할때나, CCS3에서 그라데이션(그라이디언트) 코드를 생성해 주는 사이트입니다. 즐겨찾기 해놓고 사용하시면 편하네요ㅎㅎ 바로가기
PSD파일(포토샵파일)을 CSS3 코드로 변환하는 포토샵 플러그인 사이트 CSS3PS.COM CSS3Ps는 포토샵에서 생성한 레이어를 CSS3로 변환해 주는 클라우드 서비스 기반 포토샵 플러그인입니다. 여러 레이어 또는 레이어 그룹을 선택하고 한 번의 클릭으로 변환할 수 있습니다. Gradient, Inner Shadow, Inner Glow, Outer Shadow, Outer Glow등의 CSS3 속성으로 변환해 준다고 합니다. 변환 즉시 브라우저에서 결과를 확인하고 다른 사람들과 공유할 수도 있습니다. 그리고 무료입니다. 바로가기
이미지를 코드화시키는 사이트, dataurl.net 이라고 아시나요? 이미지를 업로드할 필요가 없다? 이미지를 코드로 인코딩하다 제목 그대로 특정 이미지를 코드화 시켜주는 사이트입니다. 바로가기
CSS3 코드 생성 사이트 CSS3MAKER 다양한 효과를 손쉽게 코드로 생성해주는 사이트 입니다. 바로가기
[HTML5] 익스플로러 IE(Internet explorer)에서 구글 크롬 프레임으로 HTML5 이용하기 익스플로러 IE(internet explorer)에서 구글 크롬 프레임으로 HTML5 이용하기 * HTML5를 개발하는데 있어서 가장 큰 걸림돌이라하면 바로 인터넷 익스플로러(IE)일 것이다. MS에서는 웹표준과는 동떨어진 독자노선을 걷다가 이제 웹표준이 정립되어가고 있는 HTML5의 적용을 브라우져에 이제서야 뒤늦게 시작하고 있다. IE10에서는 그래서 그나마 호환성을 갖추기는 했지만 여전히 부족한 느낌이 많을 것이다. 이러한 문제를 해결하기 위한 한가지 방법은 바로 구글의 크롬 프레임(Chrome Frame)이다. * 구글 크롬 프레임(Google Chrome Frame: GCF) : 구글 크롬 프레임은 IE에서 구글 크롬의 환경을 구현할 수 있도록 도와주는 오픈소스 플러그인이다. 구글의 V8 자바스..
위로
아래로

티스토리툴바