웹솔루션개발 25년 노하우! 해피CGI의 모든것

안녕하세요 HappyCGI 입니다. ^^ 얼마전 소스포지에서 누군가 만들어 놓은 탭 기능 괜찮은게 있어서 알려 드립니다. ^^ 해당 소스의 라이센스는 GNU General Public License version 2.0 (GPLv2), MIT License 를 따르고 있습니다. 예제 링크를 참고해 보시면 쉽게 설명이 되어 있습니다. 그래도 혹시 모르시는 분들을 위해서 참고 소스 코드 입니다. Number - - Text - - 위와 같이 코드를 이용해 보시면 쉽게 감이 오실꺼에요. ^^

http://favicon.htmlkit.com/favicon/ 1. ICO로 변경할 이미지를 업로드합니다. 2. 완료후 다운로드를 클릭하면, ZIP 으로 압축된 파일을 확인 합니다. (우측에는 HTML 파일의 안에 들어갈 소스도 함께 확인하실 수 있습니다.) 3. 파일안에는 아래와 같이 GIF, ICO 파일이 있습니다.

http://whoisology.com 사이트는 특정 "이메일주소"를 이용하여 해당 이메일 주소로 등록이 된 도메인들을 검색 하는 서비스를 제공하고 있습니다. 메인 페이지에 접근시 아래와 같이 이메일 주소 입력 공간이 노출이 됩니다. 해당 입력박스에 검색을 하고 싶으신 이메일주소 (또는 키워드)를 입력을 하시고 search 버튼을 클릭시 검색이 진행 됩니다. (유료 결제는 안하셔도 도메인명을 확인이 가능 합니다.) 하단의 다운로드 버튼의 경우에는 유료결제를 하신분들에게만 제공되는 기능입니다. 해당 사이트의 기능이 좋기는 하지만, 갱신이 빠르지는 않은 상황이라 정확한 데이터라고 확신 하기에는 무리가 있겠습니다.

원하는 가장자리에 슬라이트로 메뉴를 출력할 수 있도록 하는 PC 모바일 모두 사용이 가능한 jQuery plugin 입니다. http://mmenu.frebsite.nl/examples.html 에서 샘플을 확인하실 수 있습니다. MIT license 에 벗어나지 않는 범위에서 자유로이 사용 가능합니다.

최종결과 1단계 : 포토샵으로 원하는 사진을 열어 시작합니다. 이미지를 알맞은 사이즈로 먼저 조정합니다. 2단계 : 레이어를 두번 복제합니다. 3단계 : 변환 도구 (Ctrl 키 / Cmd를 + T 또는 편집> 자유 변형)을 수평으로 기울 값이 45º로 설정을 활성화합니다. 수평으로 기울여 형태를 바꿔줍니다. 4단계 : 필터 > 픽셀 화> 모자이크 필터로 이동합니다. 입력창에 알맞은 값을 입력합니다 5단계 : 다음으로, 반대 방향으로 변환합니다. 6단계 : 상단의 레이어를 선택하여 불투명도를 50%로 설정합니다. 7단계 : 중간 레이어를 선택하여 다시 수평기울기를 -45로 설정하여 변환합니다. 8단계 : 다시 같은 모자이크 필터를 적용합니다. 9단계 : 45º 할 수있는 수평으로 기울이기 값을 설정하여 ..

원하는 형태의 위젯을 GETCODE를 클릭하여 다양한 형태의 환율표를 사용할 수 있습니다. 위 Get code를 누르면 각 스텝별로 설정할 수 있는 항목과 코드를 받을 수 있습니다. step1 에서는 언어, 크기, 그리고 간단한 옵션(국기 등등) step2 에서는 추가하고 싶은 통화 설정 및 환율정보 제공처를 선택 step3 에서는 테마를 선택한 다음 3가지 항목을 모두 설정하고 난뒤에 아래의 코드를 복사하여 사용하고 있는 블로그 또는 웹사이트에 넣어주시면 사용이 가능합니다.

a 태그의 속성의 위치를 파악하여 스크롤 효과를 줄수 있는 원페이지형 레이아웃입니다.. 간단히 a태그를 추가 그리고 박스 영역을 설정한 후 클릭만으로 이동이 가능한 레이아웃입니다. 크롬에서 테스트를 하였으며, 압축파일 하나에 모두 설정이 되어 있으니 쉽게 확인하셔서 사용하실 수 있습니다 ^^

다양하고 유용한 웹프로그래밍 강좌 자료실 유용하게 사용하시기 바랍니다^^

다운로드 받은 파일의 압축을 풀어서 jigzaw.html 을 웹브라우저로 열어보면 됩니다. 위 그림을 아래 그림 처럼 퍼즐로 마추면 되는건가 봅니다. 배경에 원본그림이 있어서 몇개 찾아서 마춰보긴 했습니다만 다 마추려면 시간이 꽤 걸릴듯 하네요. 퍼즐로 사용할 이미지들이 몇개 있네요. 이미지파일의 이름을 소스코드내에 입력만 하면 그 사진을 잘라서 퍼즐마추기가 되네요. 출처는 https://www.sourcecodester.com/javascript/5479/jigzaw-puzzle.html 입니다.