메모장/마크업 썸네일형 리스트형 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 요.. HTML 특수문자 코드 정리 HTML 특수문자 코드 코딩이나 스크립트 작업 할 시에 간혹 특수문자가 필요할 때가 있다. 매번 검색해서 찾아서 사용했었는데... 이번 기회에 메모해 둔다. 코드코드 기호 코드 기호 코드 기호 코드 기호 e e É É ĭ ĭ f f Ê Ê Į Į g g Ë Ë į į h h Ì Ì İ İ i i Í Í ı ı j j Î Î IJ IJ k k Ï Ï ij ij l l Ð Ð Ĵ Ĵ m m Ñ Ñ ĵ ĵ n n Ò Ò Ķ Ķ o o Ó Ó ķ ķ p p Ô Ô ĸ ĸ q q Õ Õ Ĺ Ĺ r r Ö Ö ĺ ĺ s s × × Ļ Ļ t t Ø Ø ļ ļ u u Ù Ù Ľ Ľ .. 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("문자열.. [Modern.ie] 웹사이트 호환성 테스트 서비스, 익스플로러(Explorer) 버젼별 크로스브라우징(?) 익스플로러(Explore) 버젼별 크로스브라우징(?), Modern.ie 크롬, 파폭, 사파리는 서비스 중인 브라우저가 일괄적으로 업데이트 되지만, 마이크로소프사의 브라우저는 OS의 영향으로 버전별로 관리가 되고 있었지요. 그래서, 개발자들은 맡은 웹사이트가 모든 브라우저에서 알맞게 보이게끔 정말...많은 노력과 시간을 할애하고 있습니다. ㅜㅠ 이 부분을 마이크로소프트사에서 모르는 것이 아니였나봅니다. ㅎㅎ 이 웹사이트로 얼마나 많은 시간이 절약될지는 모르겠으나...그래도 한번쯤은 사용해보려 합니다. ㅎ http://loc.modern.ie/ko IE 브라우저 문서모드를 설정하는 meta 코드 정리 IE 브라우저 문서모드를 설정하는 meta 코드 정리 작업한 웹페이지를 테스트할 때 브라우저의 문서모드가 자동으로 쿼크모드로 변경되는 이유가 있다. ① dtd 선언이 안되어 있을 때 ② dtd 선언된 것 위에 어떤 소스가 들어가 있을 때 웹페이지를 보는 특정 사용자 브라우저 설정상의 이유로 제대로 된 dtd를 선언했지만, 페이지가 호환성보기로 렌덩링 되거나, 쿼크모드로 렌더링 되는 현상을 방지 하기 위해서 아래의 소스를 활용해 막도록 해야겠다. 무조건 해당 IE버전으로 보여준다. IE9를 최신으로 하되 실패시 IE5모드로 전환 최신버전으로 랜더링하라 크롬이 설치되어있다면 IE 에서도 크롬 렌더링을 사용하라 2014.2.25. 브라우저모드? 문서모드? 다행히 IE11은 통합 된듯~! 익스11로 업그레이드 ㄱㄱ~! 익스플로러 브라우즈는 항상 골칫덩이... Html 코딩을 할 때마다 골칫덩이인 크로스브라우징... 진절머리가 난다...ㅡㅡ^ 여하튼, 크로스브라우징을 할때 익스를 버전별로 화면을 확인할 수 있는 IE Tester 를 사용하다가 언제부터인가 그냥 익스 개발자 도구를 더 많이 사용하게 되었다. IE Tester는 프로그램이 오류도 많이 나고, 무겁게 느껴져서...점점 사용횟수가 자연스레 잦아들었다. 그런데, 개발자 도구를 사용할때 마다 대충은 알고 있지만, 너무나 헷갈려 다시한번 정리해보기 위해 포스팅해본다. 도대체 브라우저모드, 문서모드 저 둘의 차이점은 무엇일까? 브라우저 모드 : 현재 브라우저의 기본 셋팅을 정의 하는 것 문서 모드 : 페이지를 해석하는 방식을 정의하는 것 이라고 정리 할 수 있다. 예.. [웹표준, 웹접근성] 시각장애인이 컴퓨터를 활용하는 법 웹표준, 웹접근성 말만 외치지 말고 한번 봅시다 파이어폭스, 크롬에서 loacation.href 반응이 없을 때 파이어폭스, 크롬에서 loacation.href 반응이 없을 때 보통 익스플로러에서는 실행이 되었는데... 언제부터 안되었는지... 찾아보니 이렇게 해결책이 있었습니다. location.replace('http://ryuseunghyun.tistory.com') 보통 A 태크 href 에는 이렇게 스크립트를 사용하는 것은 지양되어야 하는 걸로 알고 있는데... 급한대로 뭐...사용해야지... 자바스크립트(Javascript)로 img 태그 hover 기능 구현하기 자바스크립트(Javascript)로 Rollover Rollout 기능 구현해보자 사실 소스는 간단하다. 아래 함수를 자주 사용하는 js 파일에 추가하면 된다 function btnOn(obj){ obj.src=obj.src.replace('off.gif','on.gif'); } function btnOff(obj){ obj.src=obj.src.replace('on.gif','off.gif'); } 스크립트를 보시줄 아시면 아~ 하시겠다 ㅎㅎ 그리고 이 함수를 사용하는 방법은 바로 아래와 같다 원리는 이미지의 파일명의 on, off 라는 문구를 replace 하는 방법이다. 따라서, 한가지 규칙(?)이 있다. hover 기능이 필요한 이미지를 두개 준비해야 하는데 두개의 이미지 파일명을 on, off .. jQuery AJAX ajax() Method jQuery AJAX ajax() Method [예제] AJAX 요청을 사용하여 div 엘리먼트의 텍스트를 변경시킵니다. AJAX를 사용하여 이 부분의 텍스트를 바꿉니다. 내용바꾸기 [정의 및 사용법] ajax() 메소드는 AJAX(비동기식 HTTP) 요청을 수행할 때 사용합니다. 모든 jQuery AJAX 메소드는 ajax() 메소드를 사용합니다. 이 메소드는 다른 메소드로는 할 수 없는 요청들을 수행할 때 사용합니다. [문법] $.ajax( { name:value, name:value, ... } ) 파라메터는 한 개 이상의 name/value 쌍으로 표시합니다. 아래는 사용가능한 name/value입니다. Name Value/Description async Boolean 값 요청이 비동기식으로 처리.. jQuery ETC Methods References jQuery ETC Methods References Method Description data() 선택된 엘리먼트에 데이터를 추가하거나, 선택된 엘리먼트로부터 데이터를 얻습니다. each() selector와 일치하는 각각의 엘리먼트에 수행할 함수를 명시합니다. get() selector와 일치하는 DOM 엘리먼트를 얻습니다. index() 선택된 엘리먼트 중에서 특정 엘리먼트의 index 값을 찾을 수 있습니다. $.noConflict() 자신이 원하는 특정 이름으로 $표시를 대체할 수 있습니다. removeData() data()메서드를 사용하여 이전에 설정된 데이터를 삭제합니다. size() selector와 일치하는 DOM 엘리먼트 개수를 리턴합니다. toArray() [출처 - http://b.. jQuery AJAX Methods References jQuery AJAX Methods References Method Description $.ajax() AJAX 요청을 수행합니다. ajaxComplete() AJAX 요청을 완료했을 때 수행할 함수를 명시합니다. ajaxError() AJAX 요청을 완료했으나 오류가 있을때 수행할 함수를 명시합니다. ajaxSend() AJAX 요청을 보냈을 때 수행할 함수를 명시합니다. $.ajaxSetup() AJAX 요청하기 위해 디폴트 값을 설정합니다. ajaxStart() 가장 첫 AJAX 요청을 시작할 때 수행할 함수를 명시합니다. ajaxStop() 모든 AJAX 요청이 완료됐을 때 수행할 함수를 명시합니다. ajax.Success() 모든 AJA 요청이 성공했을 때 수행할 함수를 명시합니다. $.get.. jQuery CSS Methods References jQuery CSS Methods References MethodDescriptionaddClass()선택된 엘리먼트에 한 개 이상의 class를 추가합니다.css()선택된 엘리먼트에 한 개 이상의 style 속성(property)를 설정합니다.hasClass()선택된 엘리먼트가 특정 class를 가지고 있는지 여부를 체크합니다.height()선택된 엘리먼트의 높이(height)를 설정하거나 리턴합니다.offset()선택된 엘리먼트의 위치를 설정하거나 리턴합니다. (문서상의 위치)offsetParent()특정위치에 있는 바로 위의 부로 엘리먼트를 리턴합니다.position()가장 처음으로 선택된 엘리먼트의 위치를 리턴합니다. (부모엘리먼트의 위치)removeClass()선택된 엘리먼트에서 한 개 이상의 .. 이전 1 2 3 4 5 ··· 8 다음
