옛날 글에서 자바스크립트로 360도 이미지 뷰어를 만드는 방법이 있었는데 좀 복잡하고 이미지도 여러 개로 나눠져 사용했습니다. 아주 간단한 방법으로 360도 이미지 뷰어를 만드는 방법을 워드프레스에 적용해보겠습니다. https://codyhouse.co/gem/360-degrees-product-viewer/ 위 사이트는 다양한 소스를 제공하는 사이트입니다. Demo 버튼을 클릭하면 아래처럼 자동차 이미지를 360도 회전시켜 시현해볼 수 있습니다. 이미지를 클릭하거나 하단의 버튼을 클릭해서 드래그하면 회전합니다. Download 버튼을 클릭해 소스를 내려받습니다. 압축파일을 해제하고 폴더로 들어가 index.html 파일을 클릭하면 자동차 이미지 대신 숫자 이미지가 나옵니다. 클릭드래그해서 작동되는지 확..
바로가기 위 버튼을 클릭하면 위 그림이 나오는 사이트로 이동합니다. 노란색의 Download the Source 링크를 클릭해 압축 파일을 다운로드 합니다. 압축해제하고 폴더로 들어가면 위와 같이 나옵니다. html 파일을 클릭하면 눈내리는 효과가 나옵니다. 티스토리에 설치를 위해 필요한 파일은 하나입니다. js 폴더에 들어가 snowfall.jquery.js 파일을 티스토리에 업로드 합니다. 관리자 화면의 HTML 편집 화면에서 태그 바로 이전에 위와 같이 코드를 추가하고 저장하면 완료입니다. 눈송이의 최저 크기는 1, 최대 크기는 8입니다. 눈송이 수를 늘리려면 250이라는 숫자를 조정합니다. 2016년 12월 22일 현재 제 블로그에 나타나는 눈내리는 효과입니다.
일반적으로 웹페이지 내부의 일정한 장소로 이동하는 기능은 HTML의 name 속성을 사용합니다. 아래의 코드에서 a태그의 링크를 클릭하면 href 속성값에 해당하는 #C4가 있는 Chapter 4로 이동하죠. 이동하는 곳의 a 태그에는 name 속성이 사용됐습니다. href 속성은 클릭하는 곳에 name 속성은 이동하는 곳에 넣고 값을 일치시켜주면 됩니다. href의 값에서 #는 현재 페이지를 의미합니다. Chapter 4 바로가기 Chapter 1 This chapter explains ba bla bla Chapter 2 This chapter explains ba bla bla Chapter 3 This chapter explains ba bla bla Chapter 4 This chapter ex..
제이쿼리는 자바스크립트 라이브러리입니다. 라이브러리란 이미 만들어진 많은 기능이 있는 함수들이 모인 도서관(Library)을 말합니다. 자바스크립트는 배우기가 어려워서 일반인들은 접근하기가 힘들지만 제이쿼리는 누구든지 배울 수 있도록 쉽게 돼있습니다. 어려운 자바스크립트를 이용해서 어떤 기능을 하는 플러그인을 만들자면 수많은 코드가 필요하지만 일반적으로 많이 사용하는 기능을 미리 정의해 놓고 라이브러리에 저장해서 불러오기만 하면 되는 것이 제이쿼리입니다. 이러한 자바스크립트 라이브러리는 제이쿼리만 있는 것이 아니라 Prototype, script.aculo.us, Ext Core, jsPHP, MooTools, jQuery, Ext JS, DHTMLX, Dojo Toolkit 등 종류가 많습니다. 그중에..
웹사이트의 내용물을 보호하기 위해서 보통 우클릭을 못하도록 설정하는 경우가 있는데 아래처럼 제이쿼리를 사용하면 됩니다. 내용의 특정 부분만 우클릭이 안되게 하려면 이곳 을 참고하세요. 워드프레스에서도 이와같은 방법을 사용해도 되지만 플러그인을 사용하면 쉽습니다. 몇가지 플러그인을 알아봅니다. No Right Click Images Plugin 플러그인 추가하기 화면에서 위 제목으로 검색해서 설치한 다음 설정화면으로 가면 화면이 나옵니다. 이 플러그인은 콘텐츠 중 이미지만 보호하는 기능을 갖고 있습니다. 세가지 옵션이 있는데 첫번째 체크박스에 체크하면 이미지에 우클릭할 경우 아래의 빨간색 금지 표시 이미지로 대체됩니다. 두번째 체크박스는 이미지를 클릭 드래그하면 웹브라우저의 다른 탭에서 열리는 것을 방지합..
어도비 드림위버는 현존하는 최고의 웹 개발툴입니다. 드림위버는 원래 플래시와 파이어웍스와 함께 매크로미디어라는 회사제품이었는데 어도비가 인수를 하면서 어도비 드림위버로 변경되었습니다. 이제품들의 단축키를 보면 환경설정 단축키가 Ctrl+U로 되어있죠. 다른 어도비 CS 제품들은 Ctrl+K입니다. 이것은 매크로미디어시절부터 사용자들이 익숙해진 단축키를 그대로 유지한 것인데 그만큼 사용자를 위한 배려라고 생각됩니다. 어도비 드림위버는 텍스트 에디터만 사용했던 사람들에게는 사용하기가 아주 복잡합니다. 텍스트 에디터를 사용해서 얼마든지 웹디자인이 가능하고 또한 초보자들은 코딩연습이나 코드에 익숙해지기위해서 텍스트 에디터를 사용하는 것이 기본이죠. 어떤분들은 코드힌트 기능도 사용 못하게 합니다. 점 하나라도 직..
어도비에서 작년에 크리에이티브 스위트(Creative Suite; CS)를 5.5로 업그레이드했는데 웹디자인 부분에서 바뀐 것이 드림위버입니다. CS5.5로 업그레이드 됐죠. 그동안 어도비는 점이 들어간 업그레이드가 없었는데 0.5 버전이 나온 것은 아주 이례적인 일입니다. 이것은 그동안 애플의 스마트폰을 시작으로한 모바일 디바이스 시장의 변화에 적극 대처하기 위한 것인데 주로 바뀐 것이 제이쿼리 모바일을 이용한 웹디자인 기능 추가입니다. 이에 더하여 웹 플랫폼의 애플리케이션을 네이티브 애플리케이션으로 변환이 가능하도록한 오픈소스 프로그램인 PhoneGap을 추가하여 애플리케이션의 개발이 쉽도록 했습니다. 모바일 디바이스의 애플리케이션은 두가지로 나뉩니다. 자바, C#, C++등 컴파일 프로그래밍 언어에..
이번 글에서 만들게 될 메뉴바입니다. 이곳 을 클릭하면 테스트 블로그로 이동합니다. 메뉴에 마우스 오버하면 서브 메뉴가 애니메이션 되면서 나옵니다. 구글 광고에 가려지는 드랍다운 메뉴는 금지이므로 메뉴를 위로 나오게 하는 방법도 있습니다. 웹사이트에서 메뉴의 배치를 주로 헤더영역에 하는 것은 검색엔진이 내 웹사이트를 검색할때 최우선 접하는 곳이기 때문입니다. 대부분의 블로그는 카테고리라고 하여 메뉴역할을 하는데 사이드바에 배치합니다. 내 글에서 중요한 부분은 헤더영역에 메뉴를 두는 것이 검색엔진 최적화(SEO; Search Engine Optimization)에 도움이 됩니다. 메뉴는 웹사이트에서 아주 중요한 역할을 합니다. 방문자가 사이트를 방문하면 가장 먼저 찾는 것이 메뉴입니다. 그래서 웹디자이너들..
이번 글에서 만들 메뉴바입니다. 이미지로 보면 단순하지만 이곳 을 클릭하여 위 테스트 블로그로 이동하고 메뉴에 마우스오버하면 홈에 있던 회색의 박스가 애니메이션 되면서 해당메뉴로 이동합니다. 이것은 제이쿼리 플러그인을 사용한 것입니다. 이러한 제이쿼리 플러그인을 Lava Lamp 라고 합니다. 이것은 메뉴의 글자의 크기에 따라서 사각형이 변하기 때문에 이름이 붙여진 것입니다. Lava Lamp란 용암이 물흐르듯 움직이는 램프인데 이것에서 이름을 붙인듯합니다. 제 블로그에 사용한 것도 제이쿼리 플러그인을 사용한 것인데 이것을 설치하려면 메뉴를 html 편집창에서 편집을 할 수 있도록 되어있어야 하는데 지금 수정하고 있는 스킨은 메뉴 편집이 안되고 관리자 메뉴의 화면설정으로 들어가서 메뉴를 삽입하거나 제거하..
제이쿼리를 이용한 떠다니는 아이콘이나 배너는 글을 읽으면서 스크롤하다보면 계속 움직이기 때문에 글을 읽는데 방해가 되므로 광고나 소셜네트워크 아이콘 등 블로그 관리자의 필요에 의한 것은 가급적 달지 않으려고 하지만 방문자의 편의를 위한 아이콘이나 배너는 달아볼만 한 것 같습니다. 방문자의 편의를 위한 것이라면 메뉴바나 글의 위치를 이동할 수 있는 아이콘이 있을 수 있습니다. 물론 관리자의 취향에 따라서 글읽는데 방해가 되지 않는다 생각되면 소셜네트워크 아이콘이나 광고 배너를 설치하는데 사용할 수도 있습니다. 이번글에서는 간단한 제이쿼리 플러그인을 이용해서 웹페이지를 스크롤함에 따라서 아이콘이나 배너가 애니메이션 되는 효과를 만드는 방법을 알아봅니다. 제 블로그의 화면 좌측 끝에 배치되어 있는 뷰온버튼은 ..
제이쿼리 이미지 슬라이더 배너를 자동으로 만들어주는 무료프로그램을 소개합니다. 개인용으로 무료이고 이미지 하단에 제작자의 로고가 첨부되지만 상당히 좋은 프로그램입니다. 12개의 템플릿과 12개의 슬라이더 배너를 선택할 수 있으며 CSS를 조정하면 이미지도 자유롭게 원하는 크기로 설정할 수 있습니다. 이만한 프로그램이 개인용으로나마 무료라는게 믿어지지 않을 정도로 상당히 좋습니다. 제 블로그에 오랫만에 배너를 바꾸려고 작업했는데 제이쿼리가 많이 설치돼서 그런지 버벅거리더군요. 특히 인터넷 익스플로러에서는 상당히 버벅거립니다. 그래서 제거했습니다. 이곳 을 클릭하면 해당 사이트로 이동합니다. 12종류의 데모를 확인해보시고 하단에 Free Download버튼을 클릭합니다. 윈도우버전과 맥버전이 가능하며 유료인..
Your browser does not support iframes. 제이쿼리 플러그인을 이용한 모자이크 애니메이션 배너입니다. 우측에 어도비 터치앱 배너을 만들어서 사이드바에 넣었는데 4대 브라우저에서는 잘 나오지만 IE에서만 그냥 이미지로만 나옵니다. 어떤 부분이 잘못됐는지는 나중에 알게 되면 첨부해드리고 우선 상당히 좋은 효과이기 때문에 소개합니다. 위배너는 유료 플러그인에 비해 좀 못하지만 이런 모자이크형태의 배너는 거의가 유료입니다. 이곳 을 클릭하면 원본 사이트로 이동합니다. 소스를 다운 받으면 제이쿼리 파일과 CSS파일만 있어서 시험해보기가 어렵죠. 그래서 html파일과 이미지를 별도로 다운 받아 편집해서 압축파일로 저장했습니다. 수정하면서 구글의 제이쿼리 라이브러리를 삽입했습니다. coin..
Your browser does not support iframes. 위 이미지에서 마우스를 큰 이미지에 대면 사각형 안쪽이 돋보기처럼 확대되어 보입니다. 그리고 사각형 외부는 흐릿하게 되는 제이쿼리 플러그인을 이용한 이미지 확대효과입니다. 원본 사이트를 참고하시려면 이곳 을 클릭하면 이동합니다. 다음의 압축파일은 index파일을 수정하고 이미지를 다운 받아 설치한 것으로 인덱스파일을 클릭하면 기본 웹브라우저에서 바로 볼 수 있고 자바스크립트 파라미터는 이미지로 만들었으니 참고하세요. 설치방법은 아주 간단합니다. 스타일 시트 링크 파일은 경로를 바꿔서 자신의 사이트에 맞춥니다. 구글의 제이쿼리 라이브러리를 사용하면 별도의 제이쿼리 라이브러리를 설치하지 않아도 되고 속도도 빠릅니다. 클라우드줌 제이쿼리 플..
제이쿼리 소스를 아주 많이 개발하고 있는 사이트를 소개합니다. 무료로 사용할 수 있고 내용도 좋아서 제이쿼리를 이용한 웹페이지 개발하는데 많은 참고가 됩니다. 이곳 을 클릭하면 해당 사이트로 연결됩니다. 제이쿼리 튜토리얼과 웹디자인에 관한 많은 정보가 있으며 개발된 소스의 데모를 확인하고 다운받아 사용할 수가 있습니다. 이번 글에서는 이 사이트에서 만든 슬라이스 박스 플러그인을 이용해서 3D 이미지 갤러리나 배너를 만드는 방법을 알아봅니다. 현재 CSS3의 3D Transform을 지원하는 Webkit 플랫폼의 브라우저인 구글 크롬과 애플 사파리만 3D로 애니메이션 되고 다른 브라우저는 단순한 이미지 슬라이드만 가능합니다. 조만간 CSS3를 다 지원하는 버전이 나오게 되면 훌륭한 제이쿼리 소스로 각광을 ..
스타일리시한 내비게이션 메뉴바를 개인용 무료로 사용할 수 있는 사이트를 소개합니다. 블로거에게는 무료입니다. 이곳 을 클릭하면 해당 사이트로 이동합니다. 썸네일 이미지를 클릭하면 다음 화면으로 이동합니다. 데모 화면을 볼 수 있으며 우측에서 색상아이콘을 선택하고 Free Download 버튼을 클릭하면 압축파일로 다운로드 됩니다. 용량도 작아서 웹사이트에 별로 무리가 가지 않습니다. CSS3도 지원하여 그림자효과도 만들어지지만 인터넷익스플로러에서는 구현이 안되는군요. 모두 클릭해서 시험해보니 디자인이 아주 좋습니다. 최근에 생긴 사이트로 생각되는군요. 상업용으로 사용하려면 위에 보이듯이 돈을 지불하면 여러개의 스타일을 한번에 받을 수 있고 색상도 다양하게 포함됩니다. 개인용버전은 애매한 소스코드라고 되어..
슬라이딩 도어 테크닉은 이미지의 크기가 변하면 슬라이딩 도어에 해당하는 이미지의 크기도 변하게 하는 기법입니다. 메뉴바에 사용되는 슬라이딩도어 테크닉 은 CSS로 만들 수 있는데 배너에 사용되는 이미지는 제이쿼리로 가능합니다. 이곳 을 클릭하고 원작자의 사이트에서 See the Demo 버튼을 클릭하면 미리 볼 수 있고 Download 버튼을 클릭하여 파일을 다운 받을 수 있습니다. 제 블로그의 우측에 Best 9에 적용해 봤습니다. 다운로드 파일 원본파일을 압축을 풀면 9개의 이미지와 하나의 배경이미지가 있고 index파일이 있습니다. js폴더에는 제이쿼리 라이브러리 파일과 easing파일이 있습니다. index파일에는 제이쿼리 코드와 css코드가 있는데 블로그 사용을 위해 두가지 코드를 별도의 파일로..