Your browser does not support iframes. 위 이미지에서 마우스를 큰 이미지에 대면 사각형 안쪽이 돋보기처럼 확대되어 보입니다. 그리고 사각형 외부는 흐릿하게 되는 제이쿼리 플러그인을 이용한 이미지 확대효과입니다. 원본 사이트를 참고하시려면 이곳 을 클릭하면 이동합니다. 다음의 압축파일은 index파일을 수정하고 이미지를 다운 받아 설치한 것으로 인덱스파일을 클릭하면 기본 웹브라우저에서 바로 볼 수 있고 자바스크립트 파라미터는 이미지로 만들었으니 참고하세요. 설치방법은 아주 간단합니다. 스타일 시트 링크 파일은 경로를 바꿔서 자신의 사이트에 맞춥니다. 구글의 제이쿼리 라이브러리를 사용하면 별도의 제이쿼리 라이브러리를 설치하지 않아도 되고 속도도 빠릅니다. 클라우드줌 제이쿼리 플..
Your browser does not support iframes. 이미지가 안나타날 경우 내부를 클릭하세요. 이미지를 클릭드래그하면 회전하고 하단의 메뉴를 클릭하면 애니메이션 됩니다. 애플의 HTML5 웹페이지 에 보면 Three Sixty라는 Show Case가 있습니다. 처음 로딩시 한번 360도 회전하고 이미지를 클릭드래그하면 원하는 방향에서 상품이미지를 볼 수 있도록 만들었습니다. 내용 설명에 의하면 HTML5와 CSS3, 자바스크립트로 작동한다고 되어 있고 Webkit 웹브라우저 엔진에서만 작동이 된다고 하지만 Gecko엔진을 사용하는 파이어폭스에서도 잘 나옵니다. 여담으로 웹브라우저애해서 알아보겠습니다. 현재 웹브라우저는 5대 브라우저가 있는데 웹킷 엔진을 사용하는 애플의 사파리와 구글의 ..
제이쿼리 소스를 아주 많이 개발하고 있는 사이트를 소개합니다. 무료로 사용할 수 있고 내용도 좋아서 제이쿼리를 이용한 웹페이지 개발하는데 많은 참고가 됩니다. 이곳 을 클릭하면 해당 사이트로 연결됩니다. 제이쿼리 튜토리얼과 웹디자인에 관한 많은 정보가 있으며 개발된 소스의 데모를 확인하고 다운받아 사용할 수가 있습니다. 이번 글에서는 이 사이트에서 만든 슬라이스 박스 플러그인을 이용해서 3D 이미지 갤러리나 배너를 만드는 방법을 알아봅니다. 현재 CSS3의 3D Transform을 지원하는 Webkit 플랫폼의 브라우저인 구글 크롬과 애플 사파리만 3D로 애니메이션 되고 다른 브라우저는 단순한 이미지 슬라이드만 가능합니다. 조만간 CSS3를 다 지원하는 버전이 나오게 되면 훌륭한 제이쿼리 소스로 각광을 ..
스타일리시한 내비게이션 메뉴바를 개인용 무료로 사용할 수 있는 사이트를 소개합니다. 블로거에게는 무료입니다. 이곳 을 클릭하면 해당 사이트로 이동합니다. 썸네일 이미지를 클릭하면 다음 화면으로 이동합니다. 데모 화면을 볼 수 있으며 우측에서 색상아이콘을 선택하고 Free Download 버튼을 클릭하면 압축파일로 다운로드 됩니다. 용량도 작아서 웹사이트에 별로 무리가 가지 않습니다. CSS3도 지원하여 그림자효과도 만들어지지만 인터넷익스플로러에서는 구현이 안되는군요. 모두 클릭해서 시험해보니 디자인이 아주 좋습니다. 최근에 생긴 사이트로 생각되는군요. 상업용으로 사용하려면 위에 보이듯이 돈을 지불하면 여러개의 스타일을 한번에 받을 수 있고 색상도 다양하게 포함됩니다. 개인용버전은 애매한 소스코드라고 되어..
웹디자인에서 폰트의 사용은 아주 중요합니다. 글을 읽을때의 가독성과 글자의 생김새로 인한 디자인에 많은 영향을 미치게 되기 때문이죠. 그래서 글을 작성할때 굴림체인지 돋움체인지를 선택을 하게 됩니다. 한글은 완성형의 폰트는 숫자가 많지만 가장 많이 쓰는 글자가 2350개이므로 대부분의 폰트는 이 숫자의 갯수로 만들게 됩니다. 그런데 웹상에 가독성이나 디자인 측면에서 좋은 폰트를 선택하기란 쉽지 않습니다. 왜냐하면 내 컴퓨터에 설치된 폰트가 방문자의 컴퓨터에도 설치되어 있다는 보장이 없기 때문이죠. 내 컴퓨터에 있는 폰트를 CSS 스타일시트에 포함시켜서 굴림체로 글을 작성하더라도 글을 저장하고 나면 설정된 폰트로 보이게 되는데 방문자의 컴퓨터에 설정된 폰트가 없다면 CSS에서 설정한 대로 모든 컴퓨터에 기..
웹페이지 편집을 하다보면 색상코드를 수정할 일이 많습니다. 웹페이지를 처음 제작할 때는 많이 사용하는 컬러코드는 CSS 스타일 페이지 상단에 붙여놓고 복사해서 사용하지만 이미 있는 웹페이지를 수정하려면 화면을 캡쳐하여 포토샵에서 컬러피커로 알아내거나 브라우저에 있는 개발자도구로 스타일시트를 찾아 알아내야하는데 참 번거롭습니다. 웹개발자들은 브라우저로 파이어폭스를 많이 사용하는데 여러가지 도구들이 아주 유용한 것이 많기 때문입니다. 모질라재단에서 개발되는 파이어폭스는 추가되는 프로그램을 애드온(Add-on)이라하여 개발자들이 무료로 배포하고 있는데 가장 많이 쓰이든 도구가 파일질라죠. 파일을 서버에 보내자면 FTP프로그램을 사용하는데 속도도 빠르고 많은 개발자들이 사용하는 도구중에 하나입니다. 이번글에서는..
슬라이딩 도어 테크닉은 이미지의 크기가 변하면 슬라이딩 도어에 해당하는 이미지의 크기도 변하게 하는 기법입니다. 메뉴바에 사용되는 슬라이딩도어 테크닉 은 CSS로 만들 수 있는데 배너에 사용되는 이미지는 제이쿼리로 가능합니다. 이곳 을 클릭하고 원작자의 사이트에서 See the Demo 버튼을 클릭하면 미리 볼 수 있고 Download 버튼을 클릭하여 파일을 다운 받을 수 있습니다. 제 블로그의 우측에 Best 9에 적용해 봤습니다. 다운로드 파일 원본파일을 압축을 풀면 9개의 이미지와 하나의 배경이미지가 있고 index파일이 있습니다. js폴더에는 제이쿼리 라이브러리 파일과 easing파일이 있습니다. index파일에는 제이쿼리 코드와 css코드가 있는데 블로그 사용을 위해 두가지 코드를 별도의 파일로..
상단 타이틀에 사용된 배너는 피스메이커(Piecemaker)라는 플러그인을 이용한 것으로 이곳 을 클릭하면 원작자의 사이트에서 내용을 볼 수 있고 다운받을 수 있습니다. 또는 아래에서 원본과 이 블로그에 사용된 수정본을 다운 받아 참고하면 됩니다. 압축을 풀면 3개의 폴더가 있습니다. Documentation은 프로그램의 소개와 저작권, 설치방법이 있습니다. 저작권은 사용은 무료(Open Source)이고 프로그램 단독으로 판매는 불가하나 다른 프로그램에 포함하여 판매는 가능하다는 내용입니다. 플래시 폴더에는 3D에 사용된 플래시 원본파일이 있고 web폴더에는 설치파일이 있습니다. contents에는 이미지, 비디오, 플래시 swf파일이 있고 scripts폴더에는 자바스크립트 파일이 있습니다. index..
웹표준 CSS - 상대위치(relative positioning), 절대위치(absolute positioning), 고정위치(fixed positioning)
웹사이트 제작 문의
웹페이지 작업시 div이나 h1같은 html의 태그를 요소(element)라고 하는데 요소를 배치하는 방법은 상대위치(relative positioning), 절대위치(absolute positioning), 고정위치(fixed positioning) 3가지가 있습니다. 상대위치는 같은자손요소와의 관계에서 상대적입니다. 즉 원래 있어야할곳에서 속성값에 따라 새로운 위치를 지정하는 것이고 절대위치는 부모요소와의 관계에서 위치를 새롭게 지정하는 것입니다. 아래사진에서 상대위치는 원래 있어할 곳에서 새로운 위치로 변경되어 위치가 정해집니다. #box2 { position: relative; left: 20px; top: 20px; } 절대위치는 같은 자손끼리의 관계에서는 위치적으로 완전 무시하므로 절대적입니다..
제이쿼리같은 자바스크립트 라이브러리가 나오기전까지 웹디자이너나 개발자들에게 플래시를 이용하지 않고 웹페이지를 재로딩없이 애니메이션이나 인터액티브 기능을 추가하는 것은 불가능했습니다. 자바스크립트가 메이저 웹브라우저에서 지원이 안됐기때문이죠. 자바스트립트 라이브러리가 없으면 브라우저와 자바스크립트간에 호환성 해결을 위해 자바스크립트의 해박한 지식이 필요했습니다. 제이쿼리는 다양한 브라우저와 호환성이 좋은 라이브러리를 제공하고 있으며 배우는 시간도 상대적으로 짧으며 자바스크립트 프로그래밍하는데 수많은 반복적인 작업을 더욱 빠르게 처리할 수 있는 함수를 제공하고 있습니다. 애플의 아이폰이 플래시를 지원하지 않고 제이쿼리 같은 자바스크립트를 이용해서 애니메이션을 실행하면서 제이쿼리가 더욱 각광을 받고 있는 가운..
제이쿼리는 타인이 만든 것을 손쉽게 설치할 수 있어서 사용하기 아주 편리합니다. 웹 애니미에션 프로그램으로 플래시가 많이 쓰였는데 애플 아이폰에서 플래시를 제외시키고 제이쿼리로 대체하면서 제이쿼리에 대한 관심이 높아졌습니다. 플러그인을 만들려면 제이쿼리와 자바스크립트에 대한 지식이 많아야하겠지만 어떤 프로그램을 사용하기 위해서 그 프로그램을 다 알아야 사용할 수 있는 것은 아니듯이 남이 만든 간단한 제이쿼리 플러그인을 설치할 줄만 안다면 제이쿼리를 사용할 줄 아는 것이 됩니다. 개발자들은 수없이 많고 무료로 공개되는 것이 많으며 상품성있는 좋은 플러그인은 저가에 판매되기도 합니다. 플래시는 남이 만든 것을 수정해서 사용하려면 플래시를 잘 알아야 가능하지만 제이쿼리는 플러그인 이라는 말 그대로 끼워넣기만 ..
수정한 데모보기 링크 이곳 을 클릭하면 이미 만들어 놓은 제이쿼리 배너를 수정하여 사용할 수 있도록 공개해 놓았고 DEMO를 클릭하면 어떤 내용인지 알 수가 있습니다. 다운로드를 클릭하면 다음의 압축파일을 다운 받을 수 있습니다. 이 배너에는 이미지 회전, 슬라이드인 아웃, 줌인 아웃 등 여러가지 애니메이션이 되므로 원하는대로 응용할 수 있습니다. function부분의 내용입니다. 주석을 달아놓았으니 참고하세요. $('#ca_banner1').banner({ steps : [ [ //1 step: [{"to" : "2"}, {"effect": "zoomOutRotated-zoomInRotated"}], //1번째 div, 2번 이미지 줌아웃회전, 3번 이미지 줌인회전 [{"to" : "1"}, {}], ..
이전글 에서 하나의 버튼으로 두가지 기능을 하는 토글효과를 이용한 슬라이딩 메뉴를 알아보았는데 이것은 html요소를 위 아래로만 감추거나 나타나게 하고 좌우로 슬라이딩효과를 주려면 제이쿼리의 animate 기능을 이용합니다. 화면 밖에 감추었다가 버튼을 클릭하면 화면 안으로 나타나게 하는 슬라이딩 애니메이션 효과를 알아봅니다. 업그레이드 버전은 아래의 링크에 있습니다. https://martian36.tistory.com/1559 이글이 도움이 되셨다면 추천↑ 부탁드립니다. Toggle 에디터에 코드를 입력하고 웹브라우저에 실행하면 아래 데모링크처럼 잘 되는데 블로그에서는 열리고 닫는 두개의 이미지가 나타나지 않아서 하나의 이미지를 사용했습니다. 데모링크 링크 오른쪽에 배치할 경우의 파일은 아래를 사용하..
첨부파일을 열면 html코드와 제이쿼리 라이브러리, 아이콘이 있습니다. 두가지 메뉴가 있는데 하나는 클릭해야 슬라이드 되고 하나는 마우스 오버하면 슬라이드 됩니다. Accordion Menu Using jQuery Works on clicking Header-1 Link-1 Link-2 Link-3 Header-2 Link-1 Link-2 Link-3 Header-3 Link-1 Link-2 Link-3 Works with mouse over Header-1 Link-1 Link-2 Link-3 Header-2 Link-1 Link-2 Link-3 Header-3 Link-1 Link-2 Link-3 데모링크 링크
제이쿼리의 슬라이드토글은 하나의 버튼으로 두가지 효과가 있는 토글효과로 메뉴를 슬라이드 시켜서 감추거나 보이도록 하는 효과입니다. open home menu1 menu2 menu3 첨부파일을 웹브라우저에서 열고 open이라는 글자를 클릭하면 메뉴가 사라지고 나타나는 토글버튼의 역할을 합니다. ul태그안의 내용은 아무리 길어도 토글효과의 대상이 됩니다. 메뉴가 처음부터 안나오게 하려면 ul태그 안에 inline style을 삽입합니다. 빨간색 코드만 삽입하면 로딩시 메뉴가 안보이고 open을 클릭하면 나타납니다.
이 사이트를 들어가면 많이 사용하는 코드를 미리 만들어 놓고 복사만 하면 사용할 수 있게 해놨습니다. 일종의 스니핏입니다. 만든 사람이 Chris Coyier인데 CSS Tricks.com 운영자 입니다. 사용법은 해당 웹페이지로 들어가서 블럭설정해서 복사하지 말고 제목부분을 클릭만 하면 바로 복사가 됩니다. 아래 사진의 경우 Long Paragraph를 클릭하면 됩니다. 이 사이트를 이용하면 웹페이지는 금방 만들겠네요.^^