WEBDIR

Selectivizr - CSS3 선택자 크로스브라우징

구형 브라우저에서 CSS3 선택자 사용을 위한 크로스브라우징을 알아봅니다. Selectivizr 소개 selectivizr는 CSS3 가상클래스를 에뮬레이트하여 IE6~8에도 해당요소에 적용된 스타일을 볼 수 있게 하는 자바스크립트 유틸리티이다. 해당 페이지에 selectivizr 스크립트를 인클루드 시키기만 하면 나머진 자동으로 처리된다. HOME http://selectivizr.com/ IE의 선택자 엔진을 향상 Internet Explorer 구버전에도 19개의 CSS3 가상클래스와 2개의 가상요소, 그리고 모든 속성 선택자의 지원을 추가하였다. 또한 브라우저의 네이티브 선택자들의 몇 가지 문제를 해결하였다. 자바스크립트 지식 없어도 됨 이 스크립트는 자동으로 처리되기 때문에 굳이 자바스크립트 지..

웹개발론/크로스브라우징 2015. 5. 19. 12:00

IE7.js - HTML5 요소 및 CSS 선택자 크로스브라우징

IE7-js 소개 딘 에드워드의 ie7-js는 자바스크립트 라이브러리로서, 구 버전의 IE에서 HTML5 태그는 물론 일부 CSS3 선택자도 인식하게 해준다. 또한 IE6 이하에서 PNG의 투명효과를 지원하지 않는 문제를 해결한다. 자식 선택자, 인접 선택자, 구조 선택자, 속성 선택자 등의 css선택자 max-width, min-height를 비롯한 css속성 png 그림 파일의 파일 투명도 더블마진 버그, 까꿍놀이 버그 같은 흔한 버그를 관련 버그 교정 라이브러리 현재는 업데이트되어 ie9.js까지 제공한다.각각의 버전들이 지원하는 것들을 살펴보려면 Demo를 확인하자. HOME http://code.google.com/p/ie7-js/ DOC Using the IE7 Script IE7-js 사용법..

웹개발론/크로스브라우징 2015. 5. 18. 17:00

HTML5 Shiv - HTML5 요소 크로스브라우징

html5shiv 소개 존 레식(John Resig)이 처음 개발하고 레미샤프(Remi Sharp)가 완성한(? 정확하지 않음) 자바스크립트로서, 새로운 HTML5 섹셔닝 요소를 이전 버전의 IE6~9, Safari 4.x(iPhone 3.x)와 Firefox 3.x 에서도 작동하도록 해주는 라이브러리이다. HOME https://github.com/afarkas/html5shiv 위의 GitHub 저장소에 들르면 자세한 설명과 다운로드가 가능한데(물론 영문) 아래에서 필요한 내용을 간단히 정리한다. html5shiv.js 간단히 다운로드 받은 파일을 설명한다. 기본적인 createElement() 기술과 IE6~8에서 기술 적용을 위해 document.createElement와 document.crea..

웹개발론/크로스브라우징 2015. 5. 18. 12:00

폴리필(polyfill)

Polyfill, Shims, Fallback이란 용어들을 들어보셨을 겁니다. 용어는 틀려도 각각의 목적은 브라우저별로 다름없는 기능 구현이 목적입니다. 즉, 크로스 브라우징을 염두한 것입니다. 폴리필이란? 폴리필(polyfill)은 개발자가 특정 기능이 지원되지 않는 브라우저를 위해 사용할 수 있는 코드 조각이나 플러그인을 말한다. 폴리필은 HTML5 및 CSS3와 오래된 브라우저 사이의 간격을 메꾸는 역할을 담당한다. HTML5 Cross Browser Polyfills Modernizr 측에서 정리하여 제공하고 있는 각종 폴리필 목록을 참고하면 원하는 기술을 선택하는데 도움이 될 것이다. 필자가 자주쓰는 것들을 아래와 같다. html5shiv : HTML5의 섹셔닝 요소(예: , )를 지원하지 않는..

웹개발론/크로스브라우징 2015. 5. 15. 17:00

마이크로포맷(Microformat)

웹문서의 접근성을 높이는 또 다른 방법을 알아봅니다. 마이크로포맷이란? 마이크로포맷은 HTML의 부족한 정보 전달성을 보완하고자 개발된 규칙적인 방법론이다. 이것은 사람이 읽어 내는 정보를 기계도 이해할 수 있도록 일정한 패턴을 기술함으로써, 이 규칙을 준수한 웹페이지에서 정보를 읽어내도록 애플리케이션을 개발할 수 있게한다. 웹에 게재된 정보를 재사용하고, 재분류하여 다양한 범위에서 활용할 수 있도록 하는 것이 궁긍적인 목적이라 할 수 있다. class : 마이크로포맷의 가변적인 정보를 정의하는 기본 속성 rel : 링크와 연결되어 있는 문서와의 관계를 정의하는 속성 rev : 링크와 연결되어 있는 문서와의 역관계를 정의하는 속성 현재는 마이크로포맷2가 워밍업을 하고 있다. 마이크로포맷2 마이크로포맷2는..

웹개발론/웹표준, 접근성 2015. 5. 15. 12:00

WAI-ARIA

접근성을 높이는 또 하나의 방법인 ARIA에 대하여 설명합니다. WAI-ARIA 정의 HTML5에서 도입한 role 속성을 통해 페이지의 모든 요소에 역할을 줄 수 있다. 이렇게 하면 스크린리더는 아주 쉽게 페이지를 분석하고, 모든 역할을 분류해서 페이지의 색인을 만들 수 있다. 역할 속성은 WAI-ARIA 명세에서 제안했고 HTML5 명세에 통합되었다. landmark, document 역할은 확실히 정해졌고 지금 바로 쓸 수 있다. 표지판(landmark) 역할 표지판 역할은 사이트의 흥미있을만한 곳을 표시한다. 스크린리더에서 빠르게 인식해야 하는 배너, 검색 영역, 내비게이션등이 이에 해당한다. 역할 용도 banner 페이지의 배너 영역을 나타낸다. search 페이지의 검색 영역을 나타낸다. na..

웹개발론/웹표준, 접근성 2015. 5. 14. 17:00

파비콘(Favicon)의 모든 것

파비콘에 대해 궁금했던 내용들을 정리했습니다. 파비콘(favicon) 소개 파비콘은 웹페이지에 접속했을때, 상단 탭에 보여지는 아이콘을 일컫는다. 이 아이콘은 즐겨찾기에 웹페이지를 등록할때도 사용된다. 웹사이트를 대표하는 로고(logo)의 개념과 비슷하며, 사이트의 성격을 드러내기도 한다. 최근에는 터치(touch) 아이콘, 타일(tile) 아이콘의 등장으로 더욱 혼란스러움이 가중되었으며, 각각의 기기에 최적화된 파비콘의 크기를 재설정하여 개발자들에게 어려움을 주고 있다. 파비콘(favicon) 기본 설정 1999년에 인터넷 익스플로러(Internet Explorer)에 처음 도입된 후로, 파비콘의 사양은 거의 변경되지 않은 채로 대부분 아이콘(ico) 파일의 형태로 도메인(domain)의 루트(root..

웹코딩/HTML 2015. 5. 14. 12:00

MIME 타입

일반적인 MIME 값들에 대하여 알아봅니다. 애플리케이션 application/javascript - 자바스크립트 application/xhtml+xml - XHTML 오디오 audio/mpeg - MPEG, MP3 오디오 audio/x-ms-wma - Windows Media Audio 형식 audio/vnd.rn-realaudio - RealAudio 오디오 형식 이미지 image/gif - GIF 이미지 image/jpeg - JPEG 이미지 image/png - Portable Network Graphics 이미지 image/svg+xml - SVG 벡터 그래픽 메시지 message/http - 메시지 텍스트 text/css - 스타일 시트 text/csv - 콤마로 구분된 값들 text/html..

웹코딩/HTML 2015. 5. 13. 17:00

글로벌 이벤트(Global Event) - WINDOWS, FORM, KEYBOARD, MOUSE, MEDIA

HTML 이벤트 핸들러 속성 이벤트를 발생시킬 수 있는 방법은 매우 다양하며, 아래와 같은 상황에서 발생한다. 사용자가 키보드의 키를 누르거나 마우스를 클릭하는 경우 페이지 로딩과 같이 자동적으로 실행되는 페이지 처리 타이머를 이용한 일정 간격으로 발생하는 이벤트 혹은 일정 시간이 지난 후 발생하는 이벤트 자바스크립트를 이용한 특정 동작에 반응하는 자바스크립트 이벤트 핸들러를 요소의 이벤트에 연결할 수 있다. 이벤트 핸들러는 HTML 태그의 특성에 대응한다.

웹코딩/HTML 2015. 5. 13. 12:00

글로벌 속성(Global Attribute) #2 - CONTENTEDITABLE, CONTEXTMENU, DATA-*, DRAGGABLE, DROPZONE, HIDDEN, SPELLCHECK, TRANSLATE

글로벌 속성들 중에서 HTML5에서 추가된 속성들을 알아봅니다. CONTENTEDITABLE 속성 contenteditable 속성은 지정된 요소들의 콘텐츠를 사용자가 편집할 수 있다. 또 선택하고 편집할 수 있는 콘텐츠 영역에 대해 수정한 내용을 반영할 수 있다. 브라우저에서 수정해보세요! 이 속성을 지정하면 하위에 있는 모든 요소들에 영향을 미친다. DOM 속성에서는 contentEditable이라고 표현하며 isContentEditable로 해당요소가 편집가능한지 확인할 수 있다. 자바스크립트 사용해서document.designMode='on'이라고 지정을 해서 문서 전체가 편집 가능하게 만들수 있다. 편집한 이후에 사용자가 변경한 내용이 DOM에 적용돼 있으므로 편집한 영역의 innerHTML(d..

웹코딩/HTML 2015. 5. 12. 17:00

글로벌 속성(Global Attribute) - ACCESSKEY, CLASS, DIR, ID, LANG, STYLE, TABINDEX, TITLE

어떤 요소들에도 적용할 수 있는 글로벌 속성에 대하여 알아봅니다. ACCESSKEY 속성 accesskey 속성은 바로가기 키(access key)를 지정한다. 컴퓨터의 기본 입력 장치는 마우스가 아니라 키보드이다. 따라서 문서에 있는 모든 요소는 키보드로 제어할 수 있어야 한다. Google accensskey 속성이 적용된 요소는 포커스를 받거나 실행이 이루어진다. input 요소에 적용되면 포커스를 받게 되고, a 요소에 적용되면 해당 키를 눌러 곧바로 목적지로 이동한다. 속성값은 키보드에 있는 알파벳이나 숫자 중에서 원하는 문자를 선택하여 지정한다. 하나의 요소에 두 개 이상의 문자를 정의할때는 띄어쓰기로 구분한다. 바로가기 키의 중복을 방지하기 위해 영국 정부의 바로가기 키 권고안을 참조한다. ..

웹코딩/HTML 2015. 5. 12. 12:00

본문 : 상호작용(Interactive) 요소 - DETAILS, SUMMARY, MENU, COMMAND

사용자들과 상호작용하기 위해서 준비된 요소들에 대해 설명합니다. 인터랙티브 컨트롤 인터랙티브 컨트롤(interactive control)은 사용자가 입력한 데이터를 브라우저나 서버로 전송하기 위한 도구다. 과거에는 데이터 전송을 위해 폼이나 자바스크립트를 이용해야만 했다. 웹이 점점 애플리케이션화 되면서 웹 문서 어느 곳에서든 데이터 전송이 이루어질 필요가 있었고, 이를 위해 새롭게 details, summary, command, menu 요소가 제안되었다. DETAILS 요소 details 요소는 HTML5에 새롭게 추가된 요소로서 세부사항(DETAILS)을 표시한다. 이 요소를 사용하면 세부사항을 선택적으로 보여줄 수 있다. 사용자가 요약(summary)을 선택하면 숨겨져 있던 세부사항이 나타나도록 ..

웹코딩/HTML 2015. 5. 11. 17:00

스크립트(Script) 요소 - SCRIPT, NOSCRIPT

흔히 자바스크립트를 삽입할때 스크립트 요소를 사용합니다. 이에 대해 알아보며 곁들여 noscript 사용법도 알아봅니다. SCRIPT 요소 script 요소는 클라이언트 사이드 스크립트와 같은 프로그래밍 코드를 HTML 문서 내에 직접 작성하거나 불러올때 사용한다. script 요소는 문서 내 어디든 놓일 수 있으며, 그 횟수도 제한이 없다. 문서의 머리에 script 요소를 두면 로딩과 함께 스크립트가 실행된다. 문서 전체에 걸쳐 기능을 제어해야 하거나 문서 본문을 처리하기 전에 스크립트가 실행될 필요가 있을때 문서의 머리에 둔다. 문서의 직전에 script 요소를 두게 되면 문서의 마지막에 스크립트가 실행된다. 이는 접속자들의 화면에 HTML의 구조와 CSS의 디자인을 먼저 적용하고 렌더링되기 때문에..

웹코딩/HTML 2015. 5. 11. 12:00

본문 : 폼(Form) 요소 #3 - TEXTAREA, SELECT, OPTION, OPTGROUP, DATALIST, BUTTON, KEYGEN, METER, PROGRESS, OUTPUT

폼 요소를 소개하는 마지막 장입니다. HTML5에서 추가된 요소들도 포함되어 있지만 브라우저 지원사항이 제각각임에 유념하세요. TEXTAREA 요소 textarea 요소는 텍스트 영역(TEXT AREA)을 표시한다. 텍스트 필드가 한 줄짜리 입력 컨트롤이라면 텍스트 영역은 여러 줄짜리 입력 컨트롤이다. ... cols 속성 cols 속성은 세로 행에 입력될 수 있는 글자 수를 지정한다. 이것은 글자 수에 의해 텍스트 영역의 넓이를 지정하는 것인데 기본값은 20이다. 만약 20자를 넘게 되면 텍스트 영역이 커지는 것이 아니라 스크롤바가 생기면서 원래 저장되었던 텍스트 영역의 넓이는 그대로 유지된다. maxlength 속성 maxlength 속성은 사용자가 입력할 수 있는 최대 글자 수를 지정한다. 이 속성..

웹코딩/HTML 2015. 5. 8. 17:00

본문 : 폼(Form) 요소 #2 - LABEL, INPUT

폼에서 가장 많이 사용되는 label과 input 요소의 다양한 속성들에 대하여 알아봅니다. LABEL 요소 label 요소는 컨트롤 레이블(LABEL)을 표시한다. 레이블은 항목이나 파일을 식별하기 위해 사용되는 제목이나 이름을 말한다. 시각적으로만 그 용도가 표현되므로 브라우저가 레이블과 컨트롤 사이의 관계를 알 수 있도록 label 요소를 사용해야 한다. 이름: for 속성 for 속성은 레이블과 관련된 컨트롤을 지정한다. 컨트롤에 레이블을 제공하는 방법은 크게 암시적 방법과 명시적 방법으로 나뉜다. 암시적 방법 : 이 방법은 label 요소 내에 컨트롤을 둔다. 즉 label 요소 내에 있는 컨트롤은 굳이 밝히지 않아도 관련 있다고 보는 것이다. 명시적 방법 : 이 방법은 for 속성을 이용하여 ..

웹코딩/HTML 2015. 5. 7. 17:00