WEBDIR

[HTML5] 9장 추가된 DOM과 자바스크립트

MIME 타입이나 프로토콜에 웹 애플리케이션 연결 HTML5부터 window.navigator 객체에 추가된 registerProtocolHandler() 메서드와 registerContentHandler() 메서드를 사용하면 임의의 프로토콜이나 MIME 타입에 대해 웹 애플리케이션을 연결할 수 있다. 예를 들어 'fax'라는 프로토콜을 팩스 웹 서비스에 연결해두면 이후 사용자가 'fax:'로 시작하는 URL에 접근할 때 팩스 웹 서비스가 처리를 대신하게 된다. //첫 번째 인수에는 웹 애플리케이션에 연결하고 싶은 URL 스키마를 지정 window.navigator.registerProtocolHandler(scheme, url, title) //MIME 타입 지정시에 대,소문자 구별하지 않아도 된다 w..

웹코딩/HTML 2013. 2. 12. 00:00

[HTML5] 8장 그밖의 추가된 속성

HTML5에서는 기존의 태그들에 유용한 속성들을 추가시키거나 삭제시켰는데 그 중에 몇가지를 살펴봅니다. IFRAME 요소는 콘텐츠 삽입에 많이 이용되는데, 새로운 속성 추가로 인해 보안성을 높였다. sandbox 속성 새로 추가된 sandbox 속성을 iframe에 지정하면 해당 프레임에 삽입되는 페이지에 다음과 같은 제한을 둘 수 있다. 실제 존재하지 않는 도메인(오리진)에 속한 것으로 간주함. 따라서 자신이 소속된 도메인과도(allow-scripts에 의해 실행이 가능해져도) 통신할 수 없음 플러그인 실행금지 자바스크립트 사용금지 폼 요소에 의한 페이지 호출금지 위의 제한이 너무 엄격하여 iframe 안의 페이지가 동작하지 않을때는 sandbox 속성에 다음과 같은 값을 지정하여 샌드박스 제한을 완화..

웹코딩/HTML 2013. 2. 11. 00:00

[HTML5] 7장 추가된 글로벌 속성

HTML5에서 새로 추가된 속성들 중에 애플리케이션 제작에 편리한 몇가지 기능을 구현해 놓았습니다. CONTENTEDITABLE 이 속성을 가지고 있는 요소들의 콘텐츠를 사용자가 편집할 수 있다. 또 선택하고 편집할 수 있는 콘텐츠 영역에 대해 수정한 내용을 반영할 수 있다. 박스 텍스트 수정 브라우저에서 수정해 보세요 활용 이 속성을 지정하면 하위에 있는 모든 요소들에 영향을 미친다. 브라우저에서 수정해 보세요 DOM속성에서는 contentEditable이라고 표현하며 isContentEditable로 해당요소가 편집 가능한지 확인할 수 있다. 또 자바스크립트 사용해서 document.designMode='on' 이라고 지정을 해서 문서 전체가 편집 가능하게 만들수 있다. 마지막으로 사용자가 선택한(활..

웹코딩/HTML 2013. 2. 10. 00:00

[HTML5] 6-2장 멀티미디어 태그

HTML5에서 추가된 멀티미디어 요소인 video와 audio, 그리고 대체요소(fallback)로 사용될 embed에 대해서 알아봅니다. 현재에도 웹에서 동영상을 시청하는데 지장이 없다고 생각할 수 있습니다만 그 안을 유심히 들여다보면 각종 플러그인과 ActiveX라는 불편함과 보안위협에 노출되어 있습니다. 그런 이유로 브라우저 자체에서 동영상을 재생하게끔 멀티미디어 태그가 필요하게 된 것이죠. VIDEO 관련 사양을 알아보기에 앞서 그 이해를 높여봅시다. 비디오 파일 포멧 종류와 이해 'AVI 파일'이나 'MP4 파일'이 비디오 파일이라고 생각하겠지만 실제로 'AVI'나 'MP4'는 비디오 컨테이너 포맷이다. ZIP 파일이 종류에 상관없이 파일을 담을 수 있는 것과 마찬가지로 비디오 컨테이너 포맷은 ..

웹코딩/HTML 2013. 2. 9. 23:30

[HTML5] 6-1장 새로운 태그

새로운 태그가 생겼지만 해당 태그들은 구조만 이룰뿐, 기능은 제공되지 않기에 자바스크립트나 스타일시트로 구현은 따로 적용해야 합니다. 간단한 기능들은 브라우저 자체에서 제공했으면 하는 바램이 생기네요. 의미를 부여받은 특별한 텍스트 조금 더 디테일하고 많이 사용될 일종의 템플릿과도 같은 의미있는 요소가 많이 추가되었다. dialog 대화를 의미있는 콘텐츠로 만들고자 할때 사용하며 에 말하는 사람 에 내용을 작성한다. 나 아!, 이런 오늘 작업한 걸 저장하지 않고 종료했네~ 수정 이런, stupid! figure 이미지, 그래프, 사진, 예제 코드, 비디오, 일반 텍스트등을 하나로 묶어 블록을 형성하고 캡션을 포함시켜 서로의 관계를 명확히 구조화 시킨다. 반드시 메인이 되는 문서 안에 삽입될 필요는 없으며..

웹코딩/HTML 2013. 2. 9. 00:00

[HTML5] 5장 문서 구조

HTML5에서는 눈에는 보이지 않지만 문서의 구조를 나누는 요소들이 존재합니다. 이를 활용하여 마치 책의 목차와 같은 순서를 만들 수 있어 한 눈에 구조를 파악할 수 있게 됩니다. 섹션화 콘텐츠(sectioning contents) 해당하는 요소 : , , , 헤더와 푸터 범위내에서 콘텐츠를 그룹화하는 모든 섹션형 태그, 모든 섹션형 콘텐츠는 헤더와 아웃라인을 가지게 된다. 구조를 나누는 의미 요소 섹션 제목 섹션에는 각각 하나의 제목을 지정할 수 있으며 섹션 내부에 제목이 2개 이상이 있을 경우, 암묵적으로 해당 섹션이 나누어 지거나 하위 섹션을 만든다. HTML5에서 크게 바뀐것 중 하나가 섹션이 다르면 같은 수준의 제목을 사용할 수 있다는 것이다. hgroup hgroup 요소는 HTML5 사양에서..

웹코딩/HTML 2013. 2. 8. 00:00

[HTML5] 4-2장 HTML5 기본 템플릿

HTML5의 템플릿은 이전에 비해 매우 간소화 되었습니다. 기존의 방식이 에 의존하여 콘텐츠를 구조화 시켰다면 HTML5에서는 구조화를 위한 요소들이 등장하여 좀 더 시멘틱한 웹이 가능해졌습니다. WebDir navigation 메뉴1 메뉴2 콘텐츠 제목 콘텐츠 내용 트위터 트위터내용 &copy unclepapa / unclepapa@mail.com http-equiv="X-UA-Compatible"에 대한 설명은 아래 링크로 대신합니다. [HTML/XHTML] - X-UA-Compatible 위 메타 태그를 간단히 설명하자면 IE에서만 해석되며 IE=edge는 최신 버전으로 렌더링하라는 것입니다. name="viewport"는 스마트폰과 같은 다양한 플랫폼에서 보여지게 될 화면의 크기를 조정하는 태그입..

웹코딩/HTML 2013. 2. 7. 01:00

[HTML5] 4-1장 구조를 위한 태그

HTML5에서는 구조를 위한 태그가 새로 생겼습니다. 기존에는 를 이용해서 내용적으로 구분하였지만, 사실 이는 기계가 이해할 수 있는 구조가 아니였지요. 아래에서 소개하는 구조 태그들을 사용하는 웹 문서들이 늘어난다면 다양한 애플리케이션이 등장할 수 있을겁니다. SECTION 요소는 테마별로 연관된 콘텐츠를 한데 묶어서 더 큰 논리적인 단위를 형성할 수 있게 도와주며 하나의 페이지 안에서 주제가 다른 영역을 구분짓거나 하나의 글을 부분으로 나누기도 한다. 주로 제목과(h) 함께 사용한다. 스타일링이나 스크립트를 위해서 감싸는 요소가 필요하다면 문서 구조상 특별한 의미가 없는 를 사용해야 한다. 항상 section은 연관된 콘텐츠를 위해 사용하도록 하자. 오늘의 할일 아침에 할일 밥먹고 운동하기 점심에 할..

웹코딩/HTML 2013. 2. 7. 00:00

[HTML5] 3장 HTML5 소개 및 특징

HTML5는 최신의 마크업 언어이며, 새로운 기능과 기존 기능에 대한 개선사항, 그리고 스크립팅 기반 API를 포함하고 있습니다. HTML5 특징 하위 호환성 : HTML5는 기존의 모든 문서 타입을 래핑한다(HTML4와 XHTML1.0 양쪽의 모든 유효한 요소들을 포함하고 있다). 간단한 문법 : 시멘틱 마크업을 위한 의미적 요소들이 강화되었으며, 생산성이 향상된 코딩을 지원하며, 문서의 크기가 작아졌다. text/html MIME 타입을 사용하면서도 SVG 및 MathML을 인라인으로 활용할 수 있는 기능을 제공한다. 새로운 웹 폼 속성들을 이용하여 폼 검증과 디자인이 간소화 되었다. 오류를 쉽게 처리할 수 있게끔 몇 가지 기본 원칙을 바탕으로 설계돼 있다. 플러그인 없이도 비디오와 오디오를 비롯한 ..

웹코딩/HTML 2013. 2. 6. 00:00

[HTML5] 2장 XHTML과 HTML5의 차이점

1. 웹 브라우저마다 기존의 HTML을 해석하는 방식의 차이에서 오는 오류와 혼란을 피하기 위하여 구현되는 방식을 단순화 하였다. 즉 이라는 DOCTYPE을 가지게 되면 모든 브라우저에서 각 요소와 속성이 정확하게 동작하게끔 처리한다. 2. 새로운 HTML 태그들이 도입되었다. 웹사이트의 레이아웃을 담당하는 , , 같은 태그를 포함해서 기존에 와 같은 방식으로 처리했던 번거로움을 제거 했다. 3. HTML5에서 가장 편리하게 바뀐 것이 웹애플리케이션 개발용 요소들이 추가된 점이다. 특히 web form에 다양한 속성이 추가되었다.(현재 브라우저마다 지원여부가 다릅니다.) 4. XHTML1.0과 HTML5 문서 내부 태그 서술방식에서 아래와 같은 차이점이 있다. 구분 XHTML 1.0 HTML 5 태그 소..

웹코딩/HTML 2013. 2. 5. 00:00

[HTML5] 1장 HTML5를 시작하기 전에...

HTML5에 대한 궁금증 BEST 3 하나, 지금 당장 HTML5를 사용해도 되나요? 결론부터 말하자면, "그렇다" 이다. 하지만 HTML5를 사용할때 몇가지 주의점이 있다. 그것들을 알아보기 위해 이번 장을 준비했다. 둘, 현재 브라우저들은 HTML5를 얼마나 지원하나요? 각각의 브라우저마다 그 지원여부가 다르다. 이를 확인하기 위해서는 http://caniuse.com 을 방문하여 살펴보길 추천한다. 물론 대부분의 디자이너, 개발자들이 관심있어 하는 부분들은 앞다투어 Modern Brower(파이어폭스, 크롬, 오페라, 사파리, IE9이상)에서 지원되고 있으니 미리 경계의 날을 세울 필요는 없다. 셋, HTML5는 사용하기 어렵나요? HTML5는 기존의 HTML과 XHTML의 장점을 흡수하며 일정한 ..

웹코딩/HTML 2013. 2. 4. 00:00

IE6 position fixed

IE6을 위한 fixed 포지션의 구현은 CSS expression을 사용한 방법, 자바스크립트를 이용하는 방법등이 있습니다. CSS만으로 이를 구현하기도 했는데 정확히 테스트를 못해봤고 관련해서 제약이 있었던걸로 압니다. 최근에는 IE6을 대비할 일이 없겠지만 기록은 남겨둡니다. IE6 전용 핵 사용 출처 : http://naradesign.net/wp/2007/09/08/128/ CSS에는 position:fixed 라는 속성이 존재하고 이 속성이 부여된 엘리먼트는 화면에 고정되어 스크롤을 해도 움직이지 않고 항상 같은 자리에 머물게 됩니다. 흔히 "스크롤을 따라다니는 배너" 라고 표현하는 이런 UIO(User Interface Object) 따위를 코딩할 때 이 속성을 사용할 수 있는데 보통의 경우..

웹개발론/크로스브라우징 2013. 1. 2. 00:00

전체화면 배경고정 - FullScreenBackground

전체 화면에 이미지나 배경을 고정시키는 일이 필요한 경우가 종종 있습니다. 관련하여 정보를 찾아 서술합니다. 목표 여백없이 화면에 꽉차게 배경에 이미지를 깔기 윈도우의 사이즈에 따라 이미지의 크기도 변경하기 이미지의 가로 세로 비율 유지 스크롤바 감추기 가능한한 크로스 브라우징 마치 플래시 효과처럼 데모 보기 CSS3를 사용한 손쉬운 방법 배경에 이미지를 고정시키는 가장 손쉬운 방법은 CSS3를 사용하는 것이다. 물론 이미 이미지를 화면에 고정시키는 방법은 많이들 알고 있겠지만 여기서 중요한 점은 바로 전체화면에 꽉차게 영화나 TV를 보듯이 스크롤바도 없게 한다는 것이 요점이다. IE Chrome Firefox Opera Safari background-size 9.0 부터 지원 지원 지원 지원 지원 어..

웹코딩/CSS 2013. 1. 2. 00:00

Microdata (마이크로데이터)

접근성을 높이는 방법 중에 하나인 마이크로데이터에 대하여 설명합니다. 마이크로데이터 란? 마이크로데이터는 스코프(scope)로 범위가 제한된 사용자 지정 목록에 이름/값의 쌍으로 정의된 속성을 DOM에 추가해 기존 데이터에 주석을 다는 것이다. 마이크로데이터를 사용할 최적의 경우는 이미 HTML을 정확하게 사용하고 있지만 HTML만으로 페이지가 포함하는 데이터의 시맨틱을 전부 나타낼 수 없는 경우다. 마이크로데이터 목록 (itemtype) 표준에 의해 사전에 정의되어 있는 것을 가져다 쓰거나 직접 원하는 방식으로, 마이크로데이터 목록을 정의할 수 있으며 자신의 웹 페이지에 사용자 지정 속성으로 삽입할 수 있다. 특정 형식을 기준으로 정의된 아이템은 그 형식을 해석할 수 있는 모든 프로그램에 의해 처리가 ..

웹개발론/웹표준, 접근성 2013. 1. 1. 00:00

opacity 와 rgba (Transparent)

CSS3에는 투명도를 조정하는 두가지 속성이 있습니다. 바로 opacity와 rgba 속성인데, 해당 속성들은 적용시 조금씩 차이를 보이는데 이에 대하여 자세히 알아봅니다. OPACITY 속성 CSS3에는 opacity 라는 속성을 가지고 있다. 요소의 Transparent(투명화) 정도를 조절하는 속성인데 포토샵등의 그래픽툴을 이용해서 투명도를 조절하는 것과 같은 원리이다. IE Chrome Firefox Opera Safari opacity 9.0부터 지원 지원 지원 지원 지원 예상했겠지만 IE6~8 버전들은 이를 지원하지 않는다. 대신 filter를 사용해서 이와 비슷하게 꾸밀 수 있다..transparent8 { zoom: 1; /* ie 5,6,7 bug fix */ filter: alpha(o..

웹코딩/CSS 2012. 12. 31. 02:24