WEB_TECH 썸네일형 리스트형 css3를 사용하여 box-shadow 그림자 구현하는 방법 사용법box-shadow: h-shadow v-shadow distance color---------------------------------------------------------------------Value Description---------------------------------------------------------------------h-shadow 필수값. 그림자 시작 위치 (가로방향). 음수값 허용v-shadow 필수값. 그림자 시작 위치 (세로방향). 음수값 허용distance 그림자와의 거리 (멀어질수록 뿌옇게 보인다)color 색상--------------------------------------------------------------------- 사용예box-sh.. 더보기 opacity 사용하는 방법 다음 소스코드를 실행해 봅시다. HTML5 : CSS3 Opacity 스타일의 opacity라는 속성을 사용하면 투명도를 조절할 수 있습니다.위의 예제에서는 div태그 전체가 투명도가 20%가 적용됩니다. 컬러를 black으로 설정했는데 이렇게 흐린 글씨로 표시되면 잘 된 것입니다. 더보기 단말기의 기종을 알아내는 구문 내가 사용하고 있는 단말기의 기종을 출력하는 소스입니다.다음 HTML 코드를 작성합니다. 테스트 경로는 다음과 같습니다.아이폰이나 아이패드나 안드로이드폰에서 테스트 가능합니다.http://m.anne-soft.com/device.html 더보기 [SNS연동] 내 웹페이지에 facebook 좋아요 버튼 달기 지금 게시하는 내용은 웹페이지와 facebook이 연결되는 아주 멋진 기능입니다. 처음 facebook을 사용할 때 좋아요 버튼을 보면 저게 뭔가 하는 생각이 들었었는데 써보니 중독성이 있더군요. 아마 facebook에서 가장 많이 클릭하는 버튼이 아닐까 싶습니다. 전에는 공유하기 기능을 사용할 수 있었는데 facebook의 정책상의 이유로 막았네요. facebook의 여러가지 기능들은 공부해 볼 만한 가치가 있는 것 같습니다. 어쨌든 좋아요 버튼을 내 웹페이지에서 사용하는 방법은 아주 간단합니다. 아래 경로로 갑니다. https://developers.facebook.com/docs/reference/plugins/like/ 페이지 중간쯤가면 이렇게 코드를 생성할 수 있는 폼이 나옵니다. URL to .. 더보기 [SNS연동] 웹페이지에 tweet버튼 달기 요즘은 SNS의 시대인것 같습니다. SNS를 사용하면 정보의 확산속도도 빠르고 좋은 홍보수단이 될 수 있습니다. 대표적인 것으로 twitter와 facebook이 있습니다. 우리나라 것으로는 카카오톡이 가장 대표적인 SNS라 하겠습니다. 자 그럼 내 웹페이지가 twitter와 연동되도록 웹페이지에 twitter버튼을 달아보도록 하겠습니다. 다음 링크로 갑니다. https://twitter.com/about/resources/buttons#tweet 이런 화면이 나오죠. 링크공유하기 버튼을 선택하구요. URL은 내가 사용하고자 하는 경로를 입력해 줍니다. 트윗문구는 페이지제목으로 하면 태그의 값이 출력이 됩니다. 아래버튼을 체크하면 원하는 문구를 넣을 수도 있습니다. 갯수보이기 체크하구요. 출처는 자기 트.. 더보기 [SNS연동] 웹에서 카카오톡 링크 사용하는 방법 카카오톡은 링크를 전달해 줄수 있는 API를 오픈하고 있습니다. 로그인이나 게임에서 사용되는 다양한 기능의 API들은 협력사가 되어야만 오픈되는 것으로 알고 있습니다. 그러나 카카오톡의 영향력으로 보면 링크를 걸어주는 것으로도 많은 효과를 볼 수 있습니다. 대한민국 대표 SNS인 카카오톡을 통해 친구들이 내 페이지를 홍보할 수 있는 버튼을 만들어 보겠습니다. 카톡 아이콘을 준비합니다. HTML 페이지의 사이에 다음 태그를 입력합니다. 이렇게 하면 이미지가 링크되는데 작동은 하지 않습니다. 그래서 사이에 다음 코드를 입력합니다. kakao.link.js는 카카오톡에서 오픈API로 제공하는 자바스크립트라이브러리입니다. 이렇게 저장하고 PC에서 실행하면 역시 아무런 작동을 하지 않습니다. 카카오톡은 모바일 플.. 더보기 canvas animation 예제입니다. 캔바스에 공을 움직여 벽에 부딪히면 방향이 바뀌는 애니메이션을 만들어 보겠습니다. 더보기 HTML5 사운드 플레이어 만들기1 HTML5와 자바스크립트로 사운드 플레이어 만들기를 해 보겠습니다.이렇게 하면 아주 간단하 사운드 플레이어가 만들어 졌습니다. 물론 HTML5를 사용해서 이렇게 구현할 수도 있겠죠.하지만 나만의 디자인과 각 요소를 모두 콘트롤하는 플레이어를 만드는 것을 목표로 해서 작업하겠습니다. 아래와 같이 작업하면 현재의 진행상태와 볼륨상태가 나옵니다. 사운드플레이어 더보기 CSS image sprite CSS로 멋진 기능을 만들수 있습니다.게임에서나 사용될 법한 스프라이트를 CSS를 사용해서 구현 할 수 있습니다.CSS로 이미지 스프라이트를 구현해 보도록 하겠습니다. 먼저 다음의 스프라이트가 모여있는 화면을 만듭니다. 이제 각 이미지들을 마스크를 씌워서 롤오버까지 구현한 코드를 작성하면 됩니다.각 칸의 크기는 100px 입니다. 노란박스에 롤오버 하면 다음과 같이 오버된 이미지가 올라옵니다.정말 신기하면서도 재미있는 예제입니다. 더보기 font-face 특이한 폰트는 웹에서 사용할 수 없었는데이렇게 해주면 폰트가 없는 사람도 볼수 있습니다. @font-face { font-family: myFont; src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* for IE */ } HTML5를 사용할 수 있는 많은 브라우저에서 사용가능합니다.이 표준이 생겨서 웹출판도 가능해 졌습니다. 더보기 이전 1 2 3 4 5 6 ··· 9 다음
