본문 바로가기

메모장/마크업

[jQuery] 제이쿼리를 사용한 드래그, 터치 이미지 슬라이드 샘플 [jQuery] 제이쿼리를 사용한 드래그, 터치 이미지 슬라이드 샘플     모바일 기기에서 터치로 동작하는 이미지 슬라이더는 이미 한번 작업한 적이 있었습니다.   당시에는 모바일웹 초창기라 그것도 괜찮았었는데...   이제는 반응형 웹이라고 해서 웹상에서 드래그까지 지원하는 이미지 슬라이드가 필요하게 되었네요.   그래서 급 공부(?)를 했습니다.   &nb..
[CSS] 에릭 마이어의 CSS 리셋, CSS 기본선언, CSS 초기화 에릭 마이어의 CSS 리셋, CSS 기본선언 보통 사이트 CSS 파일을 처음 작업시 여러가지 셋팅값을 초기화(?)해야 합니다.   기본값들을 초기화 하는 것이죠.   * {margin:0;padding:0;}   이렇게만 해도 많은 속성들이 초기화가 될 것입니다.   하지만, 브라우저에 쓸데없는 일을 시키는 것일 수도 있습니다.   그래서 CSS 고수(?) 에..
CSS3로 구현한 여러 애니메이션 효과를 간단하게 구현할 수 있는 Magic Animations CSS3 CSS3로 구현한 여러 애니메이션 효과를 간단하게 구현할 수 있는 Magic Animations CSS3         간결하면서도 다이나믹한 효과들이 여러가지 있네요.   이번에 사용해봐야겠습니다.ㅋ         2015.3.11.
CSS와 jQuery로 구현한 3D 박스효과 Turnbox.js CSS와 jQuery로 구현한 3D 박스효과 Turnbox.js         언제가 기회가 되면 한번 사이트에 적용해보고 싶네요 ^^;           2015.3.10.  
CSS3 와 jQuery를 활용한 3D Curtain Template, 커튼효과 사이트 템플릿 3D Curtain Template, 커튼효과 사이트 템플릿             데모를 보시면   좀 다이나믹한 사이트를 제작할 수 있다는 기대감이 들게 되는 템플릿입니다.   소스를 수정해서 응용한다면 꽤 멋진 사이트가 될 것 같네요.       2015.2.2.
CSS3를 활용한 롤오버(호버) 효과 라이브러리, HOVER.CSS CSS3를 활용한 롤오버(호버) 효과 라이브러리 - hover.css           일단 위 링크를 보시면   얼마나 유용한 소스인지 아실 겁니다. ^^         2015.1.29.
[CSS] 텍스트에 특정배경이미지를 마스킹하는 CSS 배경 클립 텍스트 배경 및 그라디언트     h1 {  background:url(image_url_here);  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;}        더 자세한 내용은 아래 링크를 클릭하셔서 보세요.   ..
[CSS] input submit 버튼의 텍스트에 font awesome 아이콘 사용하기 겁나 유용한 Font Awesome을 사용하다 input submit 타입에서 막혔다     열심히 사이트 작업을 하던 중 이번 포스팅의 제목처럼 input submit 타입에서 막혔다.   말인 즉, input 타입중 submit 타입은 value 로 버튼 안의 텍스트를 제어 하는데...   이 안에 <i> 태그를 사용하지 못하기 때문에 곤란해졌었다.   맨처음에는 스트..
[CSS] 엑시스제이에서 만든 한국형 폰트어썸 Font Awesom, Axicon.axisj.com   AXIcon Basket     외국의 Font Awesome 사이트와 비슷하네요. ㅎ   엑시스제이에서 만든 폰트아이콘으로 무료로 제공한다합니다.             2014.11.5.    
[CSS] 아이콘(Icon)을 이미지가 아닌 폰트(Font)로 사용하기, Font Awesome The Iconic font and CSS toolkit     예전에는 아이콘이라하면 이미지였는데,   이제는 아이콘이 폰트로 인식하여, 컬러, 자간, 사이즈를 조정이 가능하게 되었네요.   신기하네 ㅋ   사용방법이나 아이콘의 종류는 해당 사이트에 들어가서 확인하고 사용하면 됩니다.   다운로드도 되지만, CDN 방식으로도 사용이 가능해 아주 유용하네요. ..
[CSS] 종이가 약간 들린 느낌을 css로만 구현하기 [CSS] 종이가 약간 들린 느낌을 css로만 구현하기                  
움직이는 파티클그라운드 ParticleGround JS Particle Ground     A jQuery plugin for snazzy background particle systems   마우스를 따라 움직이는 조그만 점들이 인상적이네요. ㅎ                  
[CSS] 예쁜 그라데이션 CSS Code를 모아놓은 uiGradients   uiGradients            
[CSS] 가로, 세로 중앙정렬 CSS 완벽가이드   Centering in CSS: A Complete Guide          
크롬 개발자도구 Chrome DevTools 메뉴얼 사이트   크롬 개발자도구 Chrome DevTools 메뉴얼 사이트   웹개발자든, 웹디자이너든 웹을 제작하는 관련 직종에 있는 분들은 한번씩 보면 좋은 사이트인 것 같습니다.   현재 특정 웹사이트를 접속해서 이용하려면, 브라우저가 필히 있어야 합니다.   익스, 사파리, 파폭, 오페라 등 여러 브라우저가 있는데,   각 각의 브라우저는 개발자들의 위한 도구들이 하나씩 있습니다. ..
[자바스크립트] 브라우저별 포지션 정보 정리 (Browser Position Information)   브라우저별 포지션 정보 정리 (Browser Position Information)     W : window,DE : document.documentElement,DB : document.body (1800px*1800px)   Property IE9 Chrome( 15.0.874.121 m ) Firefox( 8.0.1 ) W.innerWidth/Hei..