제이쿼리 – 와우슬라이더(Wow Slider)

제이쿼리 이미지 슬라이더 배너를 자동으로 만들어주는 무료프로그램을 소개합니다. 개인용으로 무료이고 이미지 하단에 제작자의 로고가 첨부되지만 상당히 좋은 프로그램입니다. 12개의 템플릿과 12개의 슬라이더 배너를 선택할 수 있으며 CSS를 조정하면 이미지도 자유롭게 원하는 크기로 설정할 수 있습니다. 이만한 프로그램이 개인용으로나마 무료라는게 믿어지지 않을 정도로 상당히 좋습니다. 제 블로그에 오랫만에 배너를 바꾸려고 작업했는데 제이쿼리가 많이 설치돼서 그런지 버벅거리더군요. 특히 인터넷 익스플로러에서는 상당히 버벅거립니다. 그래서 제거했습니다.

 

이곳 을 클릭하면 해당 사이트로 이동합니다. 12종류의 데모를 확인해보시고 하단에 Free Download버튼을 클릭합니다. 윈도우버전과 맥버전이 가능하며 유료인 경우 1개 사이트용이 49달러, 무한 사용가능이 69달러입니다. Free Edition 버튼을 클릭하면 이름과 이메일 주소를 입력하는 창이 나옵니다. 이름은 적당한 이름을 입력하고 이메일 주소는 정확이 입력한 다음 Download Now 버튼을 클릭하면 내 이메일로 다운로드할 수 있는 링크가 보내집니다

자신의 컴퓨터에 맞는 OS를 선택해서 링크를 클릭하면 실행파일이 다운로드 됩니다. 찾기 쉬운 폴더에 저장하고 파일을 더블클릭하면 설치됩니다. 사용법은 아주 간단합니다.

프로그램을 실행하면 창이 나옵니다. 우선 포토샵으로 배너로 사용할 여러개의 이미지를 같은 크기로 잘라놓은 다음 특정 폴더에 저장해 놓습니다. 1의 플러스 아이콘을 클릭하면 브라우저창이 나옵니다. 저장한 이미지가 있는 폴더로 이동하여 첫 이미지를 클릭하고 Shift키를 누른채 마지막 이미지를 선택해서 전체 이미지를 선택하고 Open버튼을 클릭하면 위처럼 빈 공간에 이미지가 나타납니다. 2의 스패너아이콘을 클릭하면 다음과 같은 창이 나옵니다.

1의 란에 적당한 이름을 입력합니다. 처음에 설정된 대로 그대로 놔두면 되고 9를 클릭하여 썸네일을 볼수 있는 메뉴아이콘의 위치를 정합니다. 각 부분의 내용은 다음과 같습니다.

2는 슬라이드가 자동반복할 수 있습니다. 3은 이미지에 마우스오버시 애니메이션이 정지됩니다. 4는 한번의 전체이미지 애니메이션이 실행되고 반복되지 않습니다. 5는 이미지 설명을 보이게 합니다. 6은 이전, 다음 버튼을 보이게 합니다. 7은 블릿 네비게이션을 보이게 합니다. 작은 버튼형태의 이미지입니다. 클릭하면 썸네일 이미지가 나타납니다. 10은 이미지 프레임과 그림자를 제거합니다.

11의 Images아이콘을 클릭하면 다음창으로 넘어갑니다.

1에서 하단의 이미지를 보면서 템플릿을 선택합니다. 버튼 아이콘과 내비게이션의 위치 설명이미지의 위치가 각각 다릅니다. CSS를 변경하면 안보이게 하거나 위치를 변경할 수 있습니다.
2를 클릭하여 정해진 이미지 사이즈를 선택할 수 있고 대부분의 경우 Custom size를 선택해서 자신의 이미지 사이즈를 3에 입력합니다. 4에서 6은 포토샵에서 이미지 사이즈를 정했으니 필요없는 설정이지만 이미지 사이즈가 각각 다른 경우 축소시키거나 확대할 수 있는 기능입니다. 7에서 이미지의 품질을 정합니다. 8은 애니메이션의 종류입니다. 총 12종이며 선택을 하면 9에서 사용예가 나옵니다. 10은 슬라이드 사이의 간격 시간입니다. 하나의 슬라이드가 끝나고 다음 슬라이드가 나올때까지의 시간이죠. 11은 애니메이션이 실행되는 시간입니다. 12를 클릭하면 워트마크 즉 제작자의 로고가 보이지 않게 하는 링크인데 구매하는 사이트로 이동합니다. 다 설정이 되면 13의 Publish 아이콘을 클릭합니다

1의 브라우즈 버튼을 클릭하여 저장할 폴더를 선택합니다. 2는 그대로 사용해도 되고 파일의 이름을 바꿀 수도 있습니다. 3에 체크하면 FTP로 서버에 보낼 수도 있고 4에 체크하여 웹 페이지에 삽입도 가능하며 5에서 줌라나 워드프레스용 모듈로 만들 수 있습니다. 6에 체크하고 7의 버튼을 클릭하면 기본 웹브라우저에 실행이 되면서 나타납니다.

만드는 것은 쉬운데 블로그나 사이트에 설치하려면 구조를 알아야합니다. 저장폴더를 열면 두개의 폴더와 index파일이 있습니다. data1폴더에는 포토샵에서 만든 이미지들이 새로 저장됩니다. tooltips폴더는 내비게이션 아이콘에 마우스오버시 나타나는 작은 이미지인 썸네일이 있는 폴더입니다. engine1폴더에선 애니메이션이 실행되는 제이쿼리 파일과 아이콘, CSS 스타일시트 파일이 있습니다. jquery.js파일은 제이쿼리 라이브러리로 구글의 제이쿼리 라이브러리 를 사용하면 더 좋습니다. 파일의 이름들이 이미 사용되고 있는 파일들과 유사해서 서로 중복될 수 있으므로 파일명을 바꿔주고 html파일에서도 경로를 바꿔주는 것이 좋습니다. wowslider.js는 괜찮으나 style.css는 아주 많이 쓰이는 스타일시트 파일명이므로 앞에 wowslider를 붙여주는 것이 좋습니다. script.js도 마찬가지입니다. 일반 사이트에 사용하는 경우는 engine1폴더를 그대로 저장하면 파일명이나 경로를 변경할 필요는 없지만 블로그의 경우는 저장 폴더가 images폴더 하나이므로 파일명에 신경을 많이 써야합니다.

index파일을 에디터에 열면 간단한 구조입니다. 링크에 스타일시트가 있고 제이쿼리 라이브러리, 와우슬라이더 제이쿼리 플러그인이 head태그에 위치하고 script.js파일은 슬라이더 콘테이너 div의 하단에 위치합니다. 필요한 것은 9에서 14번줄까지와 18에서 41번줄까지 입니다. 이 두 부분을 경로를 수정해서 내 블로그나 사이트의 경로에 맞게 수정해줘야합니다. 가장 문제가 되는 것이 슬라이더에 나타나는 설명부분인데 jpg파일 이름이 그대로 사용되므로 포토샵에서 이미지 편집할때 파일이름을 바꿔주든가 아니면 위 html에서 변경해줘야합니다. 예를들면 위에서 이미지의 이름이 그대로 alt 텍스트 이름과 title 이름으로 사용됩니다. 이것이 슬라이드에서 그대로 나오게 됩니다. 그러니 이미지에 맞는 적당한 이름으로 바꿔주거나 CSS에서 이것이 안보이도록 설정하면 됩니다.

스타일시트 파일을 에디터에 열고 103번째 줄로 가면 이미지 설명인 타이틀을 수정할 수 있습니다. 1을 첨가하면 아예 안보이도록 할 수 있고 2와 3으로 위치를 수정할 수 있습니다. 4는 글자 배경의 색상이며 5는 글자의 색상입니다. 웹폰트를 사용하여 6에서 폰트명을 추가 할 수도 있습니다. 7은 글자의 투명도입니다. 8은 글자배경의 모서리의 둥근정도를 수정합니다.

Advertisements

CSS – 제이쿼리 내비게이션 메뉴바

데모 화면을 볼 수 있으며 우측에서 색상아이콘을 선택하고 Free Download 버튼을 클릭하면 압축파일로 다운로드 됩니다. 용량도 작아서 웹사이트에 별로 무리가 가지 않습니다. CSS3도 지원하여 그림자효과도 만들어지지만 인터넷익스플로러에서는 구현이 안되는군요. 모두 클릭해서 시험해보니 디자인이 아주 좋습니다. 최근에 생긴 사이트로 생각되는군요. 상업용으로 사용하려면 위에 보이듯이 돈을 지불하면 여러개의 스타일을 한번에 받을 수 있고 색상도 다양하게 포함됩니다. 개인용버전은 애매한 소스코드라고 되어있는데 무엇이 애매하다는 것인지는 아직 파악을 못했습니다. 특징을 보면 다음과 같습니다.

브라우저의 호환성이 있고 자바스크립트 기능을 끄더라도 CSS만으로도 작동됩니다.
검색엔진 최적화 되어있습니다.
깨끗한 Unordered List 구조입니다.
설치하기 쉽고 업데이트도 가능합니다.
환상적인 애니메이션과 컬러 전환기능(서브메뉴 선택시)이 있습니다.
다양한 색상선택이 가능합니다.
CSS로 사용자가 원하는대로 디자인 할 수 있습니다.
제이쿼리에 의해 작동됩니다.
압축해제시 3kb정도의 아주 작은 사이즈입니다.

사용해보니 작동이 잘되고 있습니다. 위에 설치한 메뉴가 이곳에서 다운받아 설치한 것입니다. 다만 개인용 무료로 사용하려면 Footer에 크레딧을 달아줘야 합니다. 이것을 제거할 경우 좌측 상단에 “No Back Link”라는 메시지가 출력됩니다. 제 블로그의 하단처럼 작은 글씨로 삽입하면 메시지가 안나타납니다.

특히 Lava Lamp식으로 메뉴에 마우스오버하면 이미지가 이동하는 것이 재밋습니다. 이런 것이 있으면 방문자가 메뉴에 마우스를 올려보는 시험을 해보게 됩니다.

설치는 CSS를 아시는 분이라면 쉽게 가능합니다. 압축을 풀면 index파일과 제이쿼리 파일, CSS 스타일 파일, 그리고 이미지 폴더가 있습니다. 인덱스파일에서 메뉴부분을 HTML 코드에 삽입하고 제이쿼리와 CSS 스타일 파일은 링크를 사용하면 됩니다.

한종류의 메뉴바에서 여러개의 컬러로 다운받아서 이미지 폴더의 이미지파일만 교체하면 간단하게 컬러를 바꿀 수 있네요.

티스토리 라이브리(LiveRe) 플러그인을 설치하니 오작동이 일어나서 설치를 취소했습니다. 참고하세요.

CSS3 – 웹표준과 W3C

 

1. CSS3의 모듈

CSS3는 CSS2.1의 확장버전으로 CSS2.1이 HTML 요소의 효과를 위한 도구였지만 CSS3는 이 효과를 보다 멋지게 표현하기 위한 도구라고 할 수 있습니다. CSS3 단계부터는 CSS항목(Specification)에 대한 개별적인 개발이 아닌 모듈형태로 개발이 되면서 하나의 모듈에는 많은 항목이 있고 하나의 모듈은 독립체로 사용됩니다. 이러한 모듈에는 선택자(Selectors), 텍스트(Text), 배경(Background) 등 여러개가 있습니다. 이러한 모듈 형태의 잇점은 모든 CSS항목이 완료되기를 기다리지 않아도 단계별 발표를 할 수 있다는 것입니다. 즉 하나의 모듈만 완료되더라도 다음에 나오는 개발단계를 단독으로 거칠 수 있기 때문에 웹브라우저의 적용이나 사용이 보다 빨리 이루어진다는 것입니다.
<W3C >

위 표에서 보면 CSS Transform은 Working Draft로 되어있지만 웹브라우저에는 적용이 되어있어서 사용이 가능합니다. 아직 W3C의 최종 Recommendation을 거치지 않았는데도 사용이 가능한 것이죠. 웹브라우저 제작자들은 이러한 단계의 CSS를 사용하기 위해서는 아래처럼 독자적인 Prefix를 붙여서 사용합니다.

transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */

2. W3C의 웹개발 단계

작년 9월 W3C(World Wide Web Consortium)에서 CSS4의 선택자 모듈에 관한 Working Draft를 발표했습니다 . 이것이 웹브라우저에 적용이 되면 웹디자인이 휠씬 편리해질 것입니다. W3C는 웹표준을 관리하기 위한 세계적인 기관으로 40여개 국가의 여러 기업, 기관들이 참여하여 웹에 사용되는 각종 웹언어를 개발하고 시험하기위해 단계별 발표를 합니다. Working Draft는 이러한 여러 단계중에 초기에 속합니다. 단계별 수준은 다음과 같습니다.

1. Working Draft

웹 커뮤니티의 리뷰를 위해 발표되는 단계로 리뷰를 통해 수정이 가해지고 여러단계의 Working Draft를 거칠 수 있습니다. Draft는 초안을 의미합니다.

2. Last Call

최종 주석을 위한 마감시간이 정해진 Working Draft입니다. 개발자 그룹의 의도대로 모듈이 작동하는 단계이지만 이후에도 중요한 수정이 가해지거나 다음단계로 넘어가기 위한 계획에 포함될 수도 있습니다.

3. Candidate Recommendation

모듈이 충분한 조건을 갖추고 안정적이며 웹브라우저 제작자들에게 적용을 권장할 만하고 개발자들도 상시 사용이 가능한 수준의 단계로 이때부터는 웹브라우저별로 달려있는 Prefix를 뗄 수가 있습니다. 이 단계에서도 수정이 가해질 수도 있지만 심각한 정도의 수정은 아닙니다.

4. Proposed Recommendation

최종 서명을 위한 W3C Advisory Committee에 보내질 정도로 성숙하여 충분한 리뷰를 거친 단계입니다. 이 단계이후로는 수정은 거의 없습니다.

5. Recommendation

완성, 종료를 의미하며 “표준”이라고 말할 수 있는 단계입니다.

3. CSS3의 주요 내용

이미지를 사용하지 않는 시각적 효과

이전단계의 CSS에서는 이미지 파일을 사용해야지만 가능했던 시각적 효과를 단지 코드만을 이용하여 가능하도록 했습니다. 예를 들면 둥근 모서리(rounded corners), 그림자 효과(drop shadows), 반투명 배경(semitransparent backgrounds), 그래디언트(gradients), 이미지 테두리(images for borders)가 있습니다. 이러한 새로운 속성들은 주로 배경(Background)이나 테두리(Border), 컬러, Image Values 모듈에 있습니다.

Box transformations

이 또한 시각적 효과를 위한 모듈로 박스의 위치를 조정한다든가 2D, 3D 공간 효과를 위한 모듈입니다. 예를들면 회전(Rotating), 확대 축소(Scaling), 기울이기(Skewing)입니다.

폰트 모듈

이제 폰트의 사용은 방문자의 컴퓨터에 내장된 폰트에 의존하지 않아도 됩니다. @font-face는 폰트파일을 서버에 업로드하여 웹디자이너가 원하는 폰트로 모든 방문자에게 동일한 폰트를 보여줄 수 있습니다.

강력한 선택자

CSS3에서는 십수개의 새로운 선택자를 도입했습니다. 대부분 pseudo-class와 attridute 선택자들입니다. HTML 요소의 특정한 부분을 타게팅하므로 웹디자인시 다양한 선택자는 자유로운 디자인을 가능하게 합니다.

Transitions and animations

CSS3의 트랜지션은 하나의 스타일에서 다른 스타일로의 부드럼고 점차적인 변화가 가능합니다. 예를 들면 마우스 오버시 버튼 색상의 변화를 줄 수 있습니다. 이는 애니메이션의 단순한 효과이지만 트랜지션모듈에 포함되고 애니메이션 모듈은 별도의 모듈로서 좀더 복잡한 스타일의 변화나 동작이 가능합니다. 이는 플래시나 자바스크립트가 필요하지 않습니다.

미디어쿼리(Media Queries)

미디어쿼리 모듈은 여러개의 스타일 시트를 여러종류의 스크린 사이즈에 따라서 변화가 가능하도록 합니다. 모바일 웹 시대에 적합한 모듈입니다.

다중 컬럼 레이아웃(Multiple-column layouts)

CSS3는 다중 컬럼 레이아웃이 쉽도록 새로운 모들을 개발했습니다. Multicolumn Layout은 하나의 그룹에 있는 텍스트가 신문처럼 여러개의 컬럼으로 나뉠 수 있도록 하는 모듈입니다. Flexible Box Layout은 기존의 position이나 float가 하는 것보다도 신축성있게 여러개의 블럭을 수평이나 수직으로 나열할 수 있는 모듈입니다. 이밖에도 Template Layout이나 Grid Positioning과 같은 실험적인 모듈이 있습니다.

4. CSS와 웹브라우저

CSS3는 현재 국민 웹브라우저인 인터넷 익스플로러로 인해서 거의 사용되지 않고 있습니다. IE9버전이 지원을 하기는 하지만 제한적입니다. 캔아이유즈닷컴 에 가면 CSS뿐만 아니라 현재 개발중이거나 발표된 웹 언어의 사용이 웹브라우저별로 가능한지 확인할 수 있습니다.

각 항목을 선택하면 5대 브라우저에서 어떤 버전이 가능한지 확인이되고 모바일 웹브라우저도 나옵니다.

CSS3의 애니메이션 부분을 보면 구글 크롬, 애플 사파리, 파이어폭스 등은 많은 버전이 지원이 가능하지만 인터넷 익스플로러는 아직 지원이 안되고 있습니다. 우리나라 국민의 대다수인 90%가 IE를 사용하고 있고 CSS의 적(Enemy)인 IE6버전을 사용하는 사람도 7%나 됩니다.

MS가 웹브라우저를 독점하던 시절의 IE6는 전세계적으로 90%이상의 점유율을 기록했습니다. 그 후유증이 위와같은 표로 나타납니다. IE는 지난해 말 공식적으로 인터넷 익스플로러 6버전을 사용하는 경우 업그레이드할 것을 권유하는 메시지를 띄우기로 결정했다고 합니다. 또한 위 사이트에 가면 IE가 지원하는 프로젝트인 IE6 카운트다운 에 참여할 수가 있죠. 즉 MS에서 제공하는 코드를 웹페이지에 삽입하면 IE6을 사용하는 방문자는 아래와 같은 메시지가 나옵니다.

한글을 선택하면 위 박스처럼 안내 메시지가 나옵니다. 우리나라의 컴퓨터 보급률에 비하면 7%는 적은 숫자죠. 이 버전을 사용하는 분들도 그만한 사정이 있는 것이겠죠.

5. CSS3와 모바일 웹브라우저

현재 모바일 웹 시장은 무한합니다. 미국의 리서치 기관인 가트너의 보고에 의하면 내년이면 모바일이 데스크탑을 넘어선다고 합니다. 모바일 웹브라우저는 HTML5와 CSS3를 적극 지원하고 있습니다. 특히 모바일 디바이스용으로 나온 제이쿼리 모바일 버전은 이 두가지 언어를 사용해야만 가능합니다.

웹브라우저 제작자가 새로운 기술인 CSS3와 HTML5의 지원 여부는 모바일시장에 달려있다고 생각됩니다. HTML5는 다양한 컨텐트 제작이 가능하므로 거의 대부분의 웹브라우저가 서로 새로운 기술을 지원하려고 적극 나서고 있습니다. 현재 HTML5의 다양한 속성도 웹브라우저 시장의 점유를 위해서 신속히 도입하려고 하죠. HTML5는 원래 2022년에나 표준으로 승인이 날 예정이지만 웹브라우저가 먼저 적용을 시키므로서 상단한 부분이 빠른 시일내에 모든 웹브라우저에 적용될 것입니다.