WEB_TECH/웹개발TIP 썸네일형 리스트형 [SNS연동] 웹에서 카카오톡 링크 사용하는 방법 카카오톡은 링크를 전달해 줄수 있는 API를 오픈하고 있습니다. 로그인이나 게임에서 사용되는 다양한 기능의 API들은 협력사가 되어야만 오픈되는 것으로 알고 있습니다. 그러나 카카오톡의 영향력으로 보면 링크를 걸어주는 것으로도 많은 효과를 볼 수 있습니다. 대한민국 대표 SNS인 카카오톡을 통해 친구들이 내 페이지를 홍보할 수 있는 버튼을 만들어 보겠습니다. 카톡 아이콘을 준비합니다. HTML 페이지의 사이에 다음 태그를 입력합니다. 이렇게 하면 이미지가 링크되는데 작동은 하지 않습니다. 그래서 사이에 다음 코드를 입력합니다. kakao.link.js는 카카오톡에서 오픈API로 제공하는 자바스크립트라이브러리입니다. 이렇게 저장하고 PC에서 실행하면 역시 아무런 작동을 하지 않습니다. 카카오톡은 모바일 플.. 더보기 웹페이지에서 나눔고딕 사용하는 방법 다음의 코드를 실행해 봅시다. 이렇게 하면 구글에서 제공하는 웹폰트인 나눔폰트를 링크하게 됩니다.네이버에서 나눔폰트를 무료로 공개했기 때문에 구글에서도 무료로 api를 제공할 수 있습니다.한글은 아마 무료폰트가 나눔폰트가 유일하지 않나 싶네요. 나눔브러쉬나눔고딕나눔고딕코딩나눔명조나눔펜 브라우저에서 실행시켜보면 각각의 나눔폰트로 출력되는 것을 확인할 수 있습니다. 더보기 video.js 플러그인을 알아봅시다. video.js 플러그인을 알아봅시다. video.js는 자바스크립트 라이브러리로서 video태그를 사용해서 손쉽게 사용할 수 있으면서도 멋진 UI로 구현이 되는 플러그인입니다. 브라우저마다 표시되는 video 태그가 일관되지 않아서 어려움이 있습니다. 또 ie8에서는 video태그가 동작하지 않습니다. 이러한 문제를 간단히 해결하는 플러그인이 바로 video.js입니다. 다음은 video.js 홈페이지입니다. http://videojs.com/ 사용하는 방법은 아주 간단합니다. html페이지에서 상단에 를 넣어줍니다. 다운로드 받아서 로컬경로로 해 주어도 됩니다. 그리고 body태그 사이에 이렇게 태그를 넣어주면 됩니다. 이것은 태그빌더입니다. 환경을 웹상에서 생성해 주면 쉽게 태그가 생성됩니다. 친절.. 더보기 익스플로러 하위버전테스트 할 수 있는 프로그램 : IE Tester 다운받기 IE Tester 다운로드 http://www.my-debugbar.com/wiki/IETester/HomePage 다음 경로로 가면 IE구버전 테스트 환경을 제공해 주는 프로그램을 다운받을 수 있습니다. 저는 왠만하면 최신브라우저를 쓰기때문에 IE8 이전 버전의 브라우저가 없습니다.이럴때 아주 유용한 프로그램입니다. 최신버전은 트라이얼버전 같이 날짜제한이 있다고 해서 올드버전(4.11)으로 다운 받았습니다. 설치후 실행해 보았습니다.IE5.5 버전으로 네이버 사이트를 열어보았습니다.이렇게 뜨네요, 각 버전별로 브라우저환경이 다 마련돼 있으니까 테스트하기 정말 좋을 것 같습니다. 더보기 내 블로그에 jsfiddle을 사용하여 소스코드 공유하기 jsfiddle은 코드를 작성해서 외부에서 공유및 수정도 가능하고 블로그에도 임베디드 할 수 있는 멋진 사이트입니다. jquery도 사용할 수 있고 코드색상변환기능도 있고 버전관리 공동개발 등 아주 강력한 기능을 가지고 있습니다. 홈페이지는 http://jsfiddle.net/ 회원가입하고 시작하면 다음과 같은 화면이 나옵니다. 여기서 다음과 같이 코드를 작성해 보겠습니다. 이렇게 웹상에서 실행되는 것을 눈으로 확인할 수 있습니다. 저장하면 웹경로가 자동으로 생성되는데요. 현재 이페이지는 다음과 같습니다. http://jsfiddle.net/anne_soft_guilbert/9ueY3/ 경로를 클릭해 보면 이 소스가 그대로 있는 것을 확인할 수 있습니다. 이 경로로 가서 다른 사람이 작업해서 업데이트 하.. 더보기 웹페이지에서 이미지가 없는 곳을 메우는데 유용한 방법 아직 디자인이 완성되지 못해웹페이지에서 이미지가 없는 곳을 메우는데 유용한 방법유용한 방법입니다.이 사이트에서 모든 이미지를 생성해서 뿌려줍니다. http://placehold.it 사이트 이름도 재미있네요. 사용방법은 이렇게 쓰면 됩니다. 만일 이렇게 웹페이지에 넣으면 이런 결과가 나옵니다. 더보기 자바스크립트 팝업창 띄우기 자바스크립트 팝업창 띄우기 심플소스입니다. 팝업창 띄우기 이렇게 해주고 같은 폴더에 popup.html파일이 있으면 팝업창이 뜹니다. 더보기 마우스 오른쪽 버튼 금지 하는 방법 드래그금지, 오른쪽마우스 버튼 사용금지하는 방법을 알아볼까요. 퍼가기 못하도록 할 때 사용하면 유용하겠죠. body태그안에 다음의 속성을 적어 넣습니다. oncontextmenu="return false"는 마우스 오른쪽 클릭 금지와 키보드로 모두 선택(Ctrl+A)하는 것과 키보드로 소스보기를 금지시키는 속성입니다. onselectstart="return false"는 드래그를 못하게 하는 속성입니다.. 더보기 이전 1 2 다음
