전체 글 썸네일형 리스트형 웹사이트를 이용한 이미지 맵 작업 그동안은 이미지맵을 잡기 위해서 드림위버를 이용하곤 했는데 단지 이미지맵때문에 드림위버를 열기에는 좀 버거운 감이 있었습니다. 하지만 온라인사이트를 통해 쉽게 이미지맵을 설정할 수 있는 방법을 알게 되었네요~ 사이트 주소: http://www.maschek.hu/imagemap/imgmap 이미지파일을 업로드 하거나 이미지URL을 입력하여 쉽게 이미지맵 설정이 가능합니다~ 더보기 CSS3 애니메이션을 편하게 적용할 수 있도록 도와주는 Animate.css CSS3 애니메이션 모듈화 파일을 제공해 주는 사이트입니다. 애니메이션 적용을 위해 매번 css파일을 복잡하게 건들지 않고 클래스만 삽입시켜 간단하게 애니메이션 효과를 볼 수 있다는 장점이 있겠습니다. http://daneden.github.io/animate.css/ 더보기 ie9 이하에서 css3 transition 사용하기 css3 transition은 ie10이상의 환경에서만 구동되도록 되어있습니다. ie9이하에서 사용할 수 없을까 하는 생각으로 검색해보니 역시나 jquery 를 활용한 방법이 있었네요~ 사이트 주소는 아래와 같습니다. http://louisremi.github.io/jquery.transition.js/test/index.html http://playground.benbarnett.net/jquery-animate-enhanced/ 더보기 substr을 사용하여 간단하게 글자수 자르기 jquery substr을 사용하여 간단히 문자열을 자를 수 있다. 최신글을 추출하면서 사용하기 간편하다. 1 2 3 4 5 6$(document).ready(function(){ $('.latest-post ul li a').each(function(){ if ($(this).text().length > 26) $(this).html($(this).text().substr(0,26)+".."); }); }); 더보기 Sass 프로젝트를 위한 아키텍처 웹서핑 중 웹액츄얼리 블로그에서 sass에 관한 글을 보았습니다.그 외에도 웹작업에 도움이 되는 글이 많아서 즐겨찾기 고고~ http://bit.ly/1tcTjto 더보기 [plugin] Sidebar Enhancements 기본 사이드바에서 제공하는 기능보다 훨씬 더 많은 것들을 할 수 있도록 추가기능들을 제공한다.단축키를 지정하여 좀더 편하게도 이용할 수 있고, 서브라임텍스트를 사용한다면 사이드바 플러그인은 반드시 필요한 플러그인이 아닌가 싶다. 홈페이지 : https://github.com/titoBouzout/SideBarEnhancements 서브라임텍스트3에서 F12키는 goto_definition 으로 연결되는데 해당 플러그인을 이용하여 로컬이나 서버환경으로 브라우저 테스트를 할 수 있는 단축키로도 사용할 수 있다. 더보기 background 에서 이미지를 두개 이상 사용할 때 css를 이용하여 백그라운드에 이미지를 두개 이상 구현해야 할 경우가 있습니다. 아래의 이미지처럼 풀과 하늘이 있는 전경 이미지와 양 이미지를 넣고자 한다면요~ http://caniuse.com/#feat=multibackgrounds 하지만 ie8이하에서는 보이질 않습니다... ie9부터 지원을 합니다... http://caniuse.com/#feat=multibackgrounds 더보기 팝업창 소스 정리 팝업창 옵션 ---------------------------------------- no, 1을 사용 width=800 : 팝업창의 넓이 height=600 : 팝업창의 높이 top=0 : 팝업창이 뜰 위치 left=0 : 팝업창이 뜰 위치 resizable=1 : 창크기 조정가능 scrollbars=1 : 스크롤바 menubar=1 : 메뉴 toolbar=1 : 메뉴아이콘 location=1 : 제목표시줄 directories=1 : 연결버튼(핫메일 등) status=1 : 하단의 상태바 ■ 입장시 팝업창 띄우기 ---------------------------------------- 또는 ■ 퇴장시 팝업창 띄우기 ---------------------------------------- 또는 ■ 클릭.. 더보기 이전 1 2 3 4 5 6 7 ··· 15 다음
