본문 바로가기

html5

CSS3 와 jQuery를 활용한 3D Curtain Template, 커튼효과 사이트 템플릿 3D Curtain Template, 커튼효과 사이트 템플릿 데모를 보시면 좀 다이나믹한 사이트를 제작할 수 있다는 기대감이 들게 되는 템플릿입니다. 소스를 수정해서 응용한다면 꽤 멋진 사이트가 될 것 같네요. 2015.2.2.
CSS3를 활용한 롤오버(호버) 효과 라이브러리, HOVER.CSS CSS3를 활용한 롤오버(호버) 효과 라이브러리 - hover.css 일단 위 링크를 보시면 얼마나 유용한 소스인지 아실 겁니다. ^^ 2015.1.29.
CSS3 버튼 만들어주는 사이트 (한국어버전), CSSGENERATORS CSS3 버튼 만들어주는 사이트(한국어버전) 사이트에서 CSS3 로 여러가지 효과를 자동으로 스크립트 해주는 사이트는 많습니다. 다만, 한국어 지원은 보기가 힘들었지요. 그런데, 이렇게 한국어로 설명해주는 사이트가 있네요. 스크랩해봅니다. ㅎ 아래 링크를 클릭해서 이동하세욥~! 2014.12.29.
[CSS] 종이가 약간 들린 느낌을 css로만 구현하기 [CSS] 종이가 약간 들린 느낌을 css로만 구현하기
부트스트랩 Bootstrap 혼자 공부하기 좋은 사이트, 그냥 한번 정독해보세요. 읽고 또 읽고, 보고 또 보고 해야 할 것 같아요 ㅎ 언제부터인가 사이트를 개발하는 과정에서 어깨넘어로 부트스트랩를 활용해라. 부트스트랩을 공부하라. 부트스트랩을 사용하면 작업속도가 빠르다. 라는 말들을 듣곤 했습니다. 그래서 그 당시 잠깐 검색을 해보니 하나의 사이트 템플릿이라는 사람들도 있고, 제이쿼리 묶음이라는 사람들도 있고, 그렇더라구요. 모두다 틀린 말은 아닙니다. 그리고, 필요성을 잘 느끼지 못하다가 약간 여유가 생겨 이번 기회에 부트스트랩이 뭔가 한번 공부해보기로 했습니다. 책을 살까? 학원을 다닐까? 생각해보았지만 먼저 인터넷에서 정보를 모아보자 해서 찾은 사이트~! 영어로 된 원문사이트도 있고, 한글로 번역된 사이트도 있었습니다. http://bootstrapk.com/BS3/ 약간은 아..
Html5 input type에 대해서 정리 Html5 input type에 대해서 정리 Type 상태 데이터 타입 콘트로 타입 hidden 감춰짐 임의의 문자열 n/a text 텍스트 줄바꿈 없는 텍스트 텍스트 필드 search 검색 줄바꿈 없는 텍스트 검색 필드 tel 전화번호 줄바꿈 없는 텍스트 텍스트 필드 url URL 절대IRI 텍스트 필드 email 이메일 이메일 주소나 이메일 주소 리스트 텍스트 필드 password 비밀번호 줄바꿈 없는 텍스트 데이터 입력이 나타나지 않는 텍스트 필드 datetime 날짜와 시각 UTC 날짜와 시각 날짜와 시각 콘트롤 date 날짜 시간대 없는 날짜 날짜 콘트롤 month 달 시간대 없는 년과 달 달 콘트롤 week 주 시간대 없는 주 번호 주 콘트롤 time 시각 시간대 없는 시각 시각 콘트롤 dat..
HTML5, CSS3, Javascript 에 대한 강의자료 출퇴근 시간에 한번 읽어봐야겠습니다 CholYeon Won 교수님께서 공개하신 HTML5, CSS3 and Java Script 책 입니다. HTML5 등장 배경 및 표준화 현황 1. HTM5의 구조 및 기본 지식 익히기 1.2 웹 브라우저(Browser)의 기능과 한계 1.3 HTM5의 구조(Structure) 1.3.1 HTML5의 요소(Element) 작성 방법 1.3.2 HTML5에서 요소(Element)의 속성(Attribute) 작성 방법 1.4 환경설정 및 기본 편집기 2. metadata Elements 2.2 meta 요소(Elements) 3. Section Elements, 3.1 nav, header 요소(Element)를 이용한 구성 3.2 section, header, nav 요..
html5의 새로운 태그인 Audio, Video 태그의 속성 및 이벤트 정리 Video 태그 속성 video 자바스크립트 객체의 속성들을 알아보자. 우선 태그의 속성과 공통적인 속성들이 있다. 이름 설명 src 비디오 소스의 URL height 비디오의 높이 픽셀 값 width 비디오의 넓이 픽셀 값 controls 비디오의 재생, 볼륨 등 제어기들의 표시 여부 muted 음소거 poster 로드되지 않고 있을 때 처음에 표시될 이미지의 URL loop 반복 재생 autoplay 자동 재생 mediagroup 같은 아이디로 묶어준 비디오와 오디오 스트림들 끼리 동기화 시켜주는 그룹으로 취급한다. preload "none": 사용자가 비디오를 필요로하지 않을 것이라고 명시, 미리 다운로드 하지 않음 "metadata": 사용자가 비디오를 필요로 하지 않을 것이지만, 기본 정보(크기..
html5 Audio 태그 사용시 브라우저별 지원하는 오디오코덱 정리 html5 Audio 태그 사용시 브라우저별 지원하는 오디오코덱 정리 HTML5의 가장 특징적인 기술 중 하나를 뽑으라면 바로 플러그인 없이도 웹 브라우저에서 동영상을 재생할 수 있는 것이다. 하지만, 정작 많이 사용해본 적은 없다. 지속적인 시행착오가 필요할 것 같다...적어도 나에게...ㅜㅠ 아무래도 2010년 자료다 보니 지금은 많이 변했을라나?... 크롬이 갑이네...거의 다 지원되네... 무서운 구글...
html5 Canvas 태그 context 메소드 정리 html5 Canvas 태그 context 메소드 정리 이번 작업에서 canvas 태그를 활용해 보고자 하는 마음이 들었다. 그런데 사실상 한번도 제대로 사용해 본적이 없어 막막하기만 했다. ^^: 속성으로 어떻게 사용하는 것인가 검색만 두시간 넘게 해보니 대충 감이 왔다. 메모의 개념으로 정리해본다. 어디까지나 내가 보고 이해하는 생각대로 정리한 것이라... 다른 사람들이 보고 이게 뭐야 할지는 모르겠다 ㅎ context Methos context.arc(300, 300, 200, 0, 2*Math.PI, true) 원 그림(x, y, radius, startAngle, endAngle, anticlockwise), (beginPath(), stroke() 필요) context.fillText("문자열..
HTML5 웹스토리지(HTML5 Web Storage) - 클라이언트에 데이터를 저장하다 Web Storage “클라이언트에 데이터를 저장하다” HTML5 에는 웹 사이트의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인 Web Storage(웹스토로지) 스펙이 포함되었다. Web Storage의 개념은 심플하다. '키/ 값' 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴이다. 영구저장소(localStorage)와 임시저장소(sessionStorage)를 따로 두어 데이터의 지속성을 구분할 수 있어 응용 환경에 맞는 선택이 가능하다. Web Storage는 기존 웹 환경의 쿠키(Cookie)와 매우 유사한 개념이다. 다만 몇 가지 쿠키의 단점를 극복하는 개선점이 도입되었다. 쿠키(Cookie)는 여전히 유효하고 꽤 적절한 클라이언트 저장도구이다. HTML5 에서 Web..
[HTML5+CSS3]제이쿼리(jQuery)와 Swipe JS 파일을 활용한 터치슬라이드 갤러리 소스 터치 슬라이드 갤러리 소스 swipejs.com 에서 받은 자바스크립트 라이브러리를 사용한 소스입니다. 버튼으로도 이미지를 슬라이드 시킬 수 도 있고, 터치로도 슬라이드 시킬수 있답니다. ㅋ 다시한번, 말씀드릴께요 슬라이드 모션을 확인하기 위해서는 터치기반 디바이스에서 확인하셔야 해요. ㅎㅎ 일단, 웹에서 확인하기 위해서 버튼은 넣어놨구요 ㅎㅎ 아래 파일을 다운 받으셔서 분석하시기 바랍니다. 참조 - http://ryuseunghyun.tistory.com/2750
[HTML5+CSS3]모바일에서 터치, 슬라이드 모션 구현에 유용한 자바스크립트 라이브러리 터치, 슬라이드 모션을 위한 자바스크립트 라이브러리 모바일에서 터치라는 액션을 통해 슬라이드 모션을 적용할 수 있도록 하는 자바스크립트 라이브러이 제공 사이트입니다. 아래 파일은 해당 URL 에서 다운 받으실 수도 있습니다. 꼭, 터치 모션이 되는 디바이스에서 열어야, 슬라이드 모션이 확인디 됩니다. 바로가기 - http://swipejs.com
[HTML5&CSS3] 오늘 구현하는 내일의 웹 표준 - 책 소스 표지멋있네요 26가지 팁으로 구성된 이 책은, ‘오늘 구현하는 내일의 웹 표준‘이라는 부제에 걸맞게 각 팁을 기존 브라우저에 적용할 수 있는 방법들도 설명합니다. 또, 각 기술이 향후 어떤 식으로 발전해가며 여기에 대해서는 어떻게 대처해야 할지도 간략히 짚어줍니다. 번역은, 클리어보스에서 HTML5 명세의 한글판과 UX MYTHS의 번역본을 작성하신 걸로 유명한 한선용(검은태양) 님이 맡아주셨습니다. 예제 코드를 한글화하고 스크린샷을 새로 찍는 와중에, 웹브라우저들이 업데이트되면서 현재 상황에 맞게 본문을 수정하느라 고생이 많으셨답니다. 마크업 개발자들이 새 표준을 배워서 쓸 때 가장 어려운 점은 배우고 익히는 과정 자체가 아닙니다. 바로, ‘기존 브라우저들이 지원하지 않는데 어떻게 하지? 좋은 건 알겠..
[HTML5+CSS#]를 공부한다면, 한번쯤 독파해야 할 사이트 주옥같네요 ㅎㅎ CSS에 대한 전반적인 개념을 잡기 위해 꼭 읽어보셔야 합니다...ㅎㅎ 바로가기
HTML5 localStorage (name/value item pairs) DEMO http://people.w3.org/mike/localstorage.html localStorage 를 쉽게 확인 가능한 사이트 바로가기