일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- jQuery Plugin
- JQuery
- 개발자
- 안드로이드
- CSS
- 플러그인
- 고도몰
- 웹에이전시
- 웹개발자
- 3D프린터
- 제이쿼리
- 웹디자이너
- 쇼핑몰제작
- 웹퍼블리싱
- plugin
- 홈페이지제작
- PHP
- 워크식스
- work6.kr
- 튜닝
- 웹퍼블리셔
- 홈페이지구축
- 웹디자인
- 포트폴리오
- 홈페이지
- 프로그래머
- 쇼핑몰구축
- 사이트제작
- 커스터마이징
- 쇼핑몰
- Today
- Total
목록전체 글 (599)
그냥 개발자 블로그
textarea를 통해서 글을 작성 할수 있는 공간을 많이 만드는데요.textarea에서 작성된 내용은 데이터베이스에 저장될때 문자로만 저장될뿐 html 태그가 저장되지는 않죠. 하지만 contenteditable 속성을 위용하면 쉽게 div를 textarea 처럼 에디터 영역을 꾸밀수가 있죠.사용법은 아래와 같아요. 단순히 위와 같이 적어주시면 div 내에 타이핑이 가능하게 되면서 타이핑 된 내용은 자동으로 태그들이 만들어 집니다. 다음과 같이 테스트를 해보았는데요.아래처럼 태그들이 자동으로 만들어져요. div 내에서는 글씨굴게 처리와 같은 간단한 Ctrl+B 를 누른다면 이 또한 적용되요. contenteditable 속성과 자바스크립트를 적절히 이용한다면 상용화된 에디터와 똑같이 만들수 있어요. 하..
워크식스 홈페이지에서 free라고 이미지를 무료로 제공하는 사이트를 운영중인데요. 이미지 무료 제공 페이지를 만들면서 이미지를 벽돌과 같이 쌓으면서도 창사이즈를 줄이면 형태는 그대로 유지되는걸 원해서 해외 사이트를 돌아다니면서 제이쿼리(jquery) 플러그인을 찾아봤지만 제가 생각하는 그런 형태의 제이쿼리(jquery) 플러그인은 없더라고요. 비슷한것도 플러그인의 동작속도도 느렸고요. 그래서 불필요한 기능은 죄다 빼고 속도를 높이면서 창사이즈를 줄여도 형태가 그대로 유지되는 제이쿼리(jquery) 플러그인을 직접 만들었죠. 그리하여 탄생한것이 brick.js 플러그인이에요 물론 워크식스 이미지 무료 공유사이트에 brick.js 플러그인이 쓰였고요. 편이를 생각해서 스타일도 알아서 척척 만들어주도록 만들었..
2016/08/02 - [Jquery] - pgpopup.js - 잠깐 나타났다 사라지는 팝업 플러그인 [소개] 토스트팝업은 주로 알림이나 경고를 나타낼때 모바일에서 많이 사용됩니다. [플러그인명] pgpopup.js [버전] 2.0최초작성 [사용법] 1. 여기 홈페이지에서 복사된 내용을 붙여넣기 합니다. 2. body에 위와 같이 pgpopup을 실행해 줍니다. [예제] 일반적인 형태의 layer와 아래위 또는 위아래로 나타났다 사라지는 slide 형태의 팝업 예제입니다. 소스를 보시면 슬라이드의 경우 direction 이라는 항목이 하나더 있는데 up과 down 두가지 속성이 있으며 up은 화면에 위에서 나타나고 down은 화면에 아래에서 나타납니다. [옵션설명]
오늘은 일단 동영상부터 보실까요? ㅎㅎ 아! 위 영상은 네이버가 아니에요. 네이버와 같이 비슷한 환경을 만든거에요 ㅋㅋ 동영상에서와 같이 각종 포털 사이트에서 작은배너를 큰배너로 확장시켜주는 영역들이 존재하는데요. 수요가 늘고 있어서 간단하게 제이쿼리(jquery) 플러그인으로 만들어봤어요. 플러그인은 홈페이지에서 다운받아 이용해보실수 있게 해놨어요. 이름은 bigbanner.js 라고 찾으시면 나올거에요 ㅎㅎ 그렇다면 이제 사용법에 대해서 한번 볼게요. 먼저 위과 같이 html을 작성해주셔야 하는데요. id는 어떤것이든 원하는것로 해주시고요. 첫번째 a태그 안에는 작은배너 이미지를 넣어주시고요. areabig 클래스 안에는 큰 배너이미지 또는 별도로 html 내용을 넣어주세요. CSS는 작은배너 사이즈..
패럴렉스 스크롤 사이트라고 들어 보셨나요?마이크로 사이트, 커머스 사이트, p2p 사이트 등 다양한 사이트 타입을 들어 본 저로써도 패럴렉스라는 단어는 생소 했는데요. 알고 보니 제가 이미 알고 있던 타입의 사이트 였더군요. 어찌보면 패럴렉스 스크롤 사이트는 마이크로 사이트의 한 부분이라고 하면 될꺼 같은데요. 이해를 돕기위해서 영상을 준비 했어요. 위 영상은 이해를 돕기위해서 페럴렉스 스크롤 사이트를 급하게 구현한 것 이에요.패럴렉스란 모니터상에서 화면이 (상하 또는 좌우)스크롤될 때, 배경 이미지와 오브젝트가 시차를 두고 움직이도록 하는 기법이에요. 저도 이번에 이러한 용어를 알게 되었네요. 마이크로 사이트는 간혹 밋밋한 느낌을 줄때가 있는데 패럴렉스 효과를 사용하면 더 극적으로 사용자에게 어필..
2016/08/02 - [Jquery] - dropdownbanner.js - 쇼핑몰 상단배너 플러그인 [소개] 쇼핑몰 최상단에 위치하는 드롭다운배너를 만들어 줍니다. [플러그인명] dropdownbanner.js [버전] 1.0최초작성 [사용법] 오늘은 더이상 보지 않기닫기 1. 예제 html을 작성 합니다. 오늘은 더이상 보지 않기닫기 2. 예제 스타일을 작성해 줍니다. 이때 높이는 전체배너의 높이를 지정해 줍니다. 오늘은 더이상 보지 않기닫기 3. 여기 홈페이지에서 제공하는 cdn을 복사하여 붙여 넣습니다. 오늘은 더이상 보지 않기닫기 4. document가 로딩이 완료되면 원하는 배너의 아이디를 선택자로 dropdwonbanner를 실행해 줍니다. [옵션설명]
2016/08/02 - [Jquery] - slidebanner.js 플러그인 - 슬라이드 배너 플러그인 요즘 다른건 다 제쳐두고 제이쿼리 플러그인만 주구장창 만드네요. php 클래스도 만들고 솔루션도 만들고 다른것도 해야하는데..... 아무튼 오늘은 가장 많이 사용되는 배너 형태인 슬라이드를 제이쿼리(jquery) 플러그인으로 만들어봤어요. 슬라이드 제이쿼리(jquery) 플러그인은 너무나도 유명한 플러그인들이 많은데요. 해외 플러그인들은 쓰려면 받아다가 조금씩 수정해야 하는데 영어로 되어 있어서 난감할꺼에요. 특히나 디자이너인데 퍼블리싱까지 같이 하시는분이라면 더욱더요. 그래서 국산!!! 제이쿼리(jquery) 플러그인을 만들어서 배포해요. 영상에서 보신거와 같이 페이지와 화살표 동작도 가능하고요. ..
문득 마트에서 카드로 계산하다가 든 생각인데요. "스마트폰으로 싸인을 받을순 없을까?" 하는 쓸때 없는 생각이 ㅋㅋㅋㅋㅋ 쓸때 없는 생각이라도 나중에 쓸모가 있지 않을까해서 제이쿼리(jquery) 플러그인으로 만들어 봤어요. 사실 이 제이쿼리(jquery) 플러그인은 간단해서 만들어진지 꽤 되었으나 블로그에 쓰는걸 깜박하고 이제야 쓰네요. 아쉽지만 스마트폰으로 화면 동영상을 캡쳐할만한 어플을 아직 찾지 못한 관계로 그냥 이미지로 올려요. 위 이미지는 제이쿼리(jquery) 플러그인 테스트 화면인데요. 정해진 영역에 손으로 쓰쓱~ 싸인을 할수 있어요. 뿐만 아니라 추출해서 form에 데이터를 담아 보낼수도 있죠. 이게 싸인이 데이터화 되어 form으로 전송된 결과인데요. 보시는것처럼 이미지가 문자화코드화 ..