본문 바로가기

분류 전체보기

[Masonry] Masonry 실행 예제 파일첨부 : ■ Masonry 실행 예제 ※ Masonry 플러그인 메소드 -. appended : 기존영역에 블록을 새롭게 추가한다. -. destroy : 블록을 완전히 제거한다. -. layout : 모든 블록 요소를 배치한다. layout 항목의 크기를 변경하고, 모든 항목을 다시 배치 할 필요가 있을경우 유용하다. -. reloadItems : 블록을 재배치 한다. -. remove : 블록의 DOM 요소를 제거한다. 01. 아래 masonry_deepen.html은 appended와 remove 메소드 효과를 적용한 예제이다. masonry_deepen.html consectetur adipiscing elit Lorem ipsum dolor sit amet Vivamus tempus mole.. 더보기
[DaumEditor] 다음 에디터 팝업창 오픈 하여 사용하기. 파일첨부 : ■ 다음 에디터 팝업창 오픈하여 사용하기. 01. 가장먼저 다음 에디터 프로제트 폴더에서 board_dialog.php 파일을 생성한다. 02. board_dialog.php 파일에 대한 코드는 아래와 같다. board_dialog.php 03. 다음으로 팝업된 다음 오픈에디터의 뼈대를 구성할 editor_dialog.php 파일을 생성한다. 04. editor_dialog.php 파일에 대한 코드는 아래와 같다. editor_dialog.php 사진 파일 외부컨텐츠 버튼 더보기 에디터 굴림 9pt 굵게 밑줄 기울임 취소선 글자색 글자색 선택 글자 배경색 글자 배경색 선택 왼쪽정렬 가운데정렬 오른쪽정렬 양쪽정렬 들여쓰기 내어쓰기 줄간격 줄간격 선택 리스트 리스트 선택 이모티콘 링크 특수문자 .. 더보기
[jQuery] 이미지 슬라이드 만들기 파일첨부 : ■ jQuery 이미지 슬라이드 만들기 01. 캔버스와 구성요소. 자바스크립트와 jQuery를 사용해서 슬라이드를 시각적 효과를 구현하여 적용하려면 다음 세 가지 사항을 CSS로 미리 지정해야 한다. · 캔버스의 width 스타일 속성과 height 스타일 속성은 반드시 지정한다. · 캔버스의 position 스타일 속성은 Relative로 지정한다. · 캔버스의 overflow 스타일 속성은 hidden으로 지정한다. · 구성 요소의 position 스타일 속성은 Absolute로 지정한다. 02. 이미지 슬라이더의 HTML 태그 구성 jQuery 슬라이더에는 다음과 같은 특성이 있다. · slider_panel : 이미지를 담는 패털로, 움직이며 이미지가 전환되는 효과를 만든다. · sl.. 더보기
[DaumEditor] 다음 에디터 사진첨부(uploadify) 기능 추가하기. 첨부파일 : ■ uploadify를 사용한 사진첨부 기능 추가하기. 다음 에디터는 기본적으로 사진 업로드 기능을 사용자가 직접 추가하여야 한다.그래서 이번 포스트에서는 무료 업로드 모듈이 uplodyfy를 사용하여한번에 여러장의 사진을 에디터를 통해 등록할 수 있게끔 해보고자 한다. 01. 다음 에디터를 세팅하고 사진 파일을 클릭하면 위와같이 아무것도 없는 화면만 나타난다. 02. 사진 업로드 기능 구현을 위해 uploadify를 사용해보자. http://www.uploadify.com/ 해당 사이트에 접속해서 uploadify를 다운받는다. ① 사이트에 접속하여 Flash Version을 선택한다. ② uploadify.zip 파일을 다운받는다. ※ HTML5 Version인 uploadyfive는 유.. 더보기
[DaumEditor] 다음 에디터(Daum Editor) 세팅하고 사용하기. 첨부파일 : ■ 다음 에디터(Daum Editor) 세팅하고 사용하기 01. https://github.com/kakao/DaumEditor/tree/gh-pages/download에 접속해서 다음에디터를 다운받자. 02. 화면 최하단을 보면 How to download 라고 적힌 유의사항이 적힌 부분이 있는데. 여기서는 안정적인 stable(7.4.X) 버전대를 사용하기로 한다. 03. Stable(7.4.X)버전에서 가장 높은 버전대를 찾아 선택하고 클릭한다. 04. 해당 버전의 다운로드 페이지로 이동되면 아래 순서대로 작업을 수행한다. ① Download 버튼을 클릭한다. ② 확인 버튼을 클릭하여 daumeditor.zip 파일을 다운받는다. 05. 이제 다음 에디터 프로젝트를 수행할 폴더를 생성하.. 더보기

티스토리툴바