개인이 끄적끄적 거리는 블로그

요소는 입력 필드 ()와 함께 사용되어 사용자가 값을 입력할 때 미리 정의한 옵션들을 드롭다운 목록으로 제공하는 HTML5 요소이다. 사용자가 값을 입력하는 동안에도 드롭다운 목록의 값들을 보여줌으로써 사용자의 편의성을 높이고 입력 오류를 줄일 수 있다. jquery autocomplete 와 흡사 연동되는 인풋 컨트롤: 요소는 요소의 list 속성과 연동됩니다. 사용자가 요소에 값을 입력하면 에서 정의한 옵션 중에서 일치하는 값을 드롭다운으로 보여줍니다. 사용자 선택 가능: 사용자는 드롭다운에서 제공되는 옵션 중 하나를 선택하여 입력 필드에 삽입할 수 있습니다. 이로써 사용자의 편의성을 높일 수 있습니다. 커스텀 옵션: 요소에 나열된 값 이외에도, 사용자가 직접 입력할 수 있습니다. 이를 통해 입력 필..

출처 : http://html5experts.kr/archives/740 모바일 / 태블릿에서 전체 와이어 프레임(윤곽)을 적용, 개발하는데편리하게 사용할 수 있는 몇가지 도구 사용자 경험을 사용자에게 알맞게 적용하기 위해 와이어 프레임을 적용하는데 이 때 사용할 수 있는 몇가지 도구를 소개합니다.1. Fluid UI (https://www.fluidui.com/) 미리보기 기능에서 화면 이동도 가능하며 UI가 실제 스마트폰과 비슷한 형태로 보여집니다. UI파트는 Wireframe, iPhone, iPad, Android, Android 4, Android Tablet, Windows Phone중에서 선택해서 사용할 수 있습니다. 그리고 다양한 콘텐츠가 제공되어 있고 이미지도 별도로 업로드해서 사용할 수..

HTML5 Full Screen API 간단 구현웹 브라우저(Gecko, Webkit 등..)상에서 특정 엘리먼트 영역을 전체 화면(툴바 영역이 보이지 않는)으로 변경할 수 있는 FullScreen API가 있습니다.API에 대한 설명은 그리 어렵지 않아 따로 설명 드리지 않도록 하겠습니다.아래는 관련 소스를 모듈화 시킨 코드 입니다.1. JSBin 소스 링크:http://jsbin.com/ayicib/32.모듈 사용방법:window.onload = function () { var contextStart = document.getElementById('specialstuffStart'); var btnStart = document.getElementById('fsbuttonSta..

div를 이용해서 가로정렬을 하고 싶을 때 보통은 float:left;를 많이 사용하죠.하지만 그 가로정렬한 div간에 조금의 틈도 없어야 할 때(예를 들어 이미지 두개를 A|B로 붙여야 할 때)에는 float를 사용할 수가 없어요 두 개의 div간에 2~3px?정도 틈이 생기기 때문이죠.이해가 안 가신다면 간단한 방법으로 이유를 쉽게 설명하기 위해 html페이지에서 실습한번 해보세요.ㅎㅎ우선 body까지 기본 코드를 적고선 가+enter+나 를 입력하고 익스플로어로 확인(html파일을 더블클릭)해보세요. 가와 나가 출력되겠죠? 그럼 여기서 가와 나를 드래그해보면 세로로 틈이 한줄 생기는 것을 볼 수 있어요. 이게 div에도 똑같이 이만큼이 벌어지는거예요.이처럼 왼쪽 div를 가 라고 치고 오른쪽 div..

소스는 1하고 똑같다. 단지 스타일만 변경해서 모양만 예쁘게 해줬을뿐.

모든 드래그 이벤트는 dataTransfer 객체를 통해서 이루어 진다. dropEffect : 드래그가 끝나면서 사용할 효과 지정 effectAllowed (copy,move,link) : 드래그하는 동안 어떤 효과를 사용하는지 지정. (default는 move임) clearData(type) : 주어진 유형의 데이터 삭제. getData(type) : 주어진 유형의 데이터를 가져온다. setData(type, data) 주어진 유형으로 데이터를 설정 스타일은 다음에 넣는다.. 귀찮으니까.. 기능만 우선 봅시다. 예제소스 문서1 문서2 문서3 휴지통

세션 스토리지 : 세션 동안의 데이터를 기억하고있음. 세션이 끝나면 데이터가 삭제됨 sessionStroage 객체를 사용 로컬 스토리지 : 세션이 끝나도 계속 기억하고있음. localStorage 라는 객체를 사용 저장 sessionStorage.setItem(key, value); localStorage .setItem(key, value); ex) sessionStorage.setItem('1', 데이터1); 삭제 sessionStorage.removeItem(key); localStorage. removeItem (key); sessionStorage.clear(); localStorage . clear(); 크롬에서 확인한 모습. 세션 스토리지(Session Storage) 저장! 비어있음 로컬..

간단하게 만든 그림판. 설명이 뭐가 필요하리. 주석이 최고의 설명!!! 1px 2px 5px 10px black red green blue yellow white

주로 봐야할 속성으로는 placeholder / autocomplete / autofocus / required 경우이고. 직접 만들어서 값을 안넣어본다던지 하면 각 컨트롤들이 어떻게 작동하는지 확인 가능 웹표준을 지키기 위해서 label for를 이용해서 input 타입 객체와 연결을 꼭 시켜주자. 나중에 접근성에서 문제를 발생시키지 않기위해서. 로그인 정보 아이디 비밀번호 비밀번호 확인 회원 등급 개인정보 이름 메일주소 연락처 숙련도(상,중,하) 제출

HTML5 태그를 익스플로러에서 인식시키기 위해 라이브러리를 링크할 수도 있다. 다음은 레미샤프씨가 제작하야 구글 코드를 통해 배포하고 있는 자바스크립트이다. 'if lt IE 9'는 IE9 이하 버전에 이 스크립트를 적용한다는 뜻이다. html5shiv 자바스크립트에서 익스플로러를 위해 지원하는 HTML5 태그는 article, aside, audio, canvas, details, figcaption, figure, footer, header, hgroup, mark, meter, nav, output, progress, section, summary, time, video 이다. -------------------------------------------------------------------..