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 를 쉽게 확인 가능한 사이트 바로가기 [HTML5+CSS3]에 대한 전체적인 개념 정리파일 [HTML5+CSS3]에 대해 전체적인 정리파일 다운로드 하셔서, 압축 푸시고 보시면 됩니다. 미디어 쿼리(media queries) 사용법과 속성 미디어쿼리(@media)를 사용하기전 체크사항 1. HTML5인지 확인합니다 ==> HTML 4.0 버전에서는 개발하기 힘듭니다. 2. 이 하나라도 있는지 확인합니다 ==> TABLE가 존재할 경우 레이아웃이 깨집니다. 3. 개발 브라우저가 IE만 있을 경우 IE9 이상인지 확인합니다 ==> 물론 IE8이하에서도 JS로 해결이 가능합니다만, 그래도 불안정하기 때문이죠. 4. 되도록 스크립트 코드는 부분보다는 끝에 작성합니다 ==> 로딩 속도는 비슷하나, 체감 속도에서 많은 차이가 납니다. 미디어쿼리(@media)를 사용법 구조는 이렇습니다. (3가지 방법 중 하나를 선택해서 사용하시면 됩니다.) @media를 미디어쿼리라고 합니다. 모두 스타일 시트 내부에 작성됩니다. 1) @media only all .. [HTML5] 익스플로러 IE(Internet explorer)에서 구글 크롬 프레임으로 HTML5 이용하기 익스플로러 IE(internet explorer)에서 구글 크롬 프레임으로 HTML5 이용하기 * HTML5를 개발하는데 있어서 가장 큰 걸림돌이라하면 바로 인터넷 익스플로러(IE)일 것이다. MS에서는 웹표준과는 동떨어진 독자노선을 걷다가 이제 웹표준이 정립되어가고 있는 HTML5의 적용을 브라우져에 이제서야 뒤늦게 시작하고 있다. IE10에서는 그래서 그나마 호환성을 갖추기는 했지만 여전히 부족한 느낌이 많을 것이다. 이러한 문제를 해결하기 위한 한가지 방법은 바로 구글의 크롬 프레임(Chrome Frame)이다. * 구글 크롬 프레임(Google Chrome Frame: GCF) : 구글 크롬 프레임은 IE에서 구글 크롬의 환경을 구현할 수 있도록 도와주는 오픈소스 플러그인이다. 구글의 V8 자바스.. [HTML5+CSS3]제이쿼리(jquery)를 사용한 이미지 슬라이드 코드 제이쿼리(jquery)를 사용한 이미지 슬라이드 코드 IR기법, IS기법을 사용하여 레이아웃을 잡은 후 제이쿼리(jquery)의 animate를 사용해 모션을 먹인다. 여기서 요점은 html5에서는 태크 속성을 개발자가 정의하고, 값을 넣을 수 있다는 것(ex. data-left="-640px); 부모오브젝 position은 raltive로, 모션을 먹일 자식오브젝은 position을 absolute로 정의 이다. ㅎㅎㅎ [Html5+CSS3]CSS 세로정렬방법, Image Replacement(IR), Image sprite(IS) 세로정렬 방법 정렬한 오브젝의 스타일을 position:absolute; top:50%; left:50%; margin-left:정렬할 오브젝의 가로길이의 반; margin-top:정렬할 오브젝의 세로길이의 반; 부모의 position값을 relative로 하고, 정렬시킬 오브젝의 position값을 absolute로 먹인 후에, 1번 방법을 겸용한다. vertical-align:middle; -> display 값이 table-cell 일 경우에만 먹는다 [CSS]display 속성 이해하기 http://iyakiggun.blog.me/100162787755 [CSS]float 속성 이해하기 http://iyakiggun.blog.me/100165916259 [CSS]position 속성 이해하기 ht.. [Html5+CSS3]block과 inline의 차이점, 구별방법 block과 inline의 차이점 block element width , height , margin , padding (O) 자동 줄 바꿈 Block Element 와 Inline Element 를 감쌀 수 있다. 가로(width)폭은 부모 요소의 폭까지 늘어난다. 형제 요소만큼 늘어난다. 화면 높이까지만 높이가 주어진다. ,~,,,,,,,,,,,... inline element width , height , margin , padding (X) - 그래서 display 를 block 또는 inline-block 화 시켜서 임의로 속성값들을 조절할 수 있다. border (O) Block Element 를 감쌀 수 없다. 자기자신(컨텐츠)까지만 폭을 가진다. ,,,,,,,,,,,,... Block 은 .. [마크업의 오해]XHTML, HTML4, HTML5 각종 마크업의 관계정리 "마크업의 오해"(Misunderstanding Markup: XHTML2/HTML 5 Comic Strip) 아래 코믹은 DOM Scripting의 저자인 Jeremy Keith가 작성하고 BradColbow가 그린 "마크업의 오해"(Misunderstanding Markup: XHTML2/HTML 5 Comic Strip)라는 만화로서 XHTML5에 대해 소개하고 있습니다. 필자에 의해 번역 되었으며 Creative Commons License하에서 사용하도록 허가 받았다. 출처 :http://www.smashingmagazine.com/2009/07/29/misunderstanding-markup-xhtml-2-comicstrip/ 실전 HTML5 가이드 에서 발췌하였습니다 [Html5+CSS3]HTML의 역사, 젠코딩(ZenCoding), 브라우저성능테스트, 사이트유효성검사, 실전 HTML5 가이드 HTML 5 != HTML5 HTML 5와 HTML5는 다르다 HTML -> HTML4 까지 발전된 시간은 대략 7년? W3C에서 XHTML를 배포한뒤 XHTML2 까지 개발을 하려 했으나, 많은 사용자들이 HTML4를 더 선호하게 됨 따라서, HTML4 -> HTML5 개발이 필요했지만, 저작권 문제로 HTML 5가 먼저 나오고, 인수를 통해 최종적으로 HTML5가 나오게 됨 용어정리 TEXT attribute(속성) : href tag(태그) : , contents(컨텐츠) : TEXT element(엘리먼트) : TEXT *property(속성)는 CSS에서 attribute(속성)는 HTML에서 사용하는 것이다 Zen Coding Zen Coding(http://code.google.com/p/z.. 실전 HTML5 가이드 다운받기 실전 HTML5 가이드 시중에 판매되고 있는 HTML5 관련 서적들 보다 인터넷에 무료로 배포되고 있는 이 PDF를 먼저 한번 보시길 추천합니다 실전 HTML5 가이드 다운로드 HTML 버전별 Doctype 선언 정리 HTML 버전별 Doctype 선언 정리 DOCTYPE은 Document Type의 줄임말입니다. 태그 위에 선언 해줘야 하며, 어떤 종류의 html을 사용할지 웹 브라우저에게 알려줍니다. HTML 버전별 DOCTYPE을 간단히 표로 정리해 보았습니다. 더 자세한 내용을 알고 싶으신 분은 DOCTYPE 알아보러 가기! 를 클릭해주세요. 표를 보면 일정하게 DTD 라는 것이 들어가 있다는 것을 알 수 있습니다. DTD는 Document Type Definition의 줄임말로 현재 사용하는 버전에서 어떤 태그들을 사용할 수 있는지 알려줍니다. 크게 strict, transitional, frameset 세 가지로 나뉩니다. strict - 웹 표준을 엄격하게 지킨다는 의미입니다. center, font를 포.. [HTML5] 의미있는 문서, 시맨틱(Semantic)요소 의미있는 문서 HTML5 이전의 웹 문서 즉 HTML 문서는 구조보다는 표현을 위한 수단에 가까웠다 Table 태그, ul, li 태그, div 태그 등으로 문서 구조를 정의할 수 있지만 이것은 의미있는 구조라기 보다는 표현을 위한 구조 잡기에 가까웠다. 다시 말해 각 태그들은 일관된 목적을 위해 사용되는 것이 아니라 문서를 Display하기 위해 제각각의 형태로 사용되어진게 사실이다. 다시 말해 HTML5 이전의 문서 표현 태그들은 문법적 규칙은 있었으나 구조의 규칙은 존재하지 않았다 이러한 문서는 사람이 읽기에는 적합하지만 자동으로 문서 구조를 파악하고 분류 및 탐색하기에는 힘든 구조이다. 즉 시맨틱스럽지 못하다는 것이다 참고로 의미있는 구조의 대표적인 형태가 XML 문서이다 XML 의 탄생 자체가 .. 플래시가 아닌 html5 기반의 그림판(간단 드로잉) 사이트 가볍고, 신기하고, 빠르고 플래시 기반이 아니라서 그런지 정말 가볍게 느껴집니다. 아래링크 클릭하면 웹사이트로 이동합니다. 그냥 재미로 놀아볼 수 있는 재미난 그림 그리기 툴입니다. 특별히 좋은 점은 모르겠습니다 - 그냥 윈도우즈의 페인트 비슷한 것 같습니다. 차이점은 웹기반이라는 것과 빠르다는 것입니다. http://mugtug.com/sketchpad/ 출처 - http://lifeisgood.tistory.com/1443 이전 1 다음
