ChainSmoker’s Block

HTML5의 정의 -기존의 HTML은 간단한 문서를 만들기 위한 언어이다. 디자인을 담당하는 CSS, 동작을 담당하는 JS(자바스크립트)가 결합하여 하나의 웹 문서를 완성시킨다. 기존의 HTML이 웹 문서를 작성하기 위한 것이었다면 HTML5로 문서 작성을 넘어 다양한 웹 어플리케이션(앱)을 만들기 위한 웹 플랫폼을 지향하고 있다는 것이다. HTML5의 배경 -웹을 위한 표준을 관리하는 W3C는 XHTML을 차세대 웹 표준으로 강력하게 추진하였다. 하지만 이미 널리 사용중인 HTML로 인해 XHTML은 여러 가지 장점이 존재함에도 불구하고 좀처럼 보급되지 못했다. 이에 WHATWG와 W3C는 HTML을 진화시켜 HTML5의 초안을 2008년에 공개하게 되었던 것이다. HTML5의 특징 -웹 어플리케이션(..

[02. HTML5 기본 구조] DOCTYPE 선언 : 문자 형식을 나타내는 DOCTYPE형식이 기존의 4보다 매우 간단해졌다. 기존의 HTML과 XHTML DOCTYPE는 주로 4.01이라는 숫자나 1.0이라는 숫자를 포함하며 추가로 참조관련 설정 등등 복잡한 선언들을 필요로 했다. 그러나, 5로 넘어와서부터는 복잡한 선언을 필요로 하지 않고 참조하는 태그설정도 필요하지 않다. 문자 인코딩 : 문자 인코딩을 위한 선언도 간단/간결 명료해진건 마찬가지이다. 기존엔 엄청 긴 인코딩문 선언을 입력했지만 HTML5에서는 문자 인코딩 선언을 위해 간단하게 캐릭터셋만 설정/선언하게 되면 이후 과정은 필요로 하지 않는다. 변경된 사항이 많이 없어서 싱겁다고 생각될 수도 있지만 기본형식에서는 크게 변화된 것이 없으니..

[02. HTML5 기본 구조] : 각 줄의 의미 1번줄 : DOCTYPE 정의로써 문서가 어떠한 문서 형식인지를 선언하는 부분이다. 2번줄 : html문장의 시작임을 알리는 태그 3번줄 : head문의 시작을 나타내는 태그 4 ~ 6번줄 : 해당 html의 규격(charset, content)과 설명을 넣어두는 부분. 여러 요소들이 포함되며, TITLE, META, LINK, CHARSET, SCRIPT등이 이에 포함된다. 7번줄 : (BLANK) 8 ~ 10번줄 : 문서의 본문내용(body)를 넣는 부분이다. 브라우저 제일 상단에 입력되는 결과를 볼 수 있다. 11번줄 : HTML문서의 끝을 맺는 태그. 보통 끝맺음 태그는 를 태그 내에 보유한다.

[02. HTML5 기본 구조] : 요소(Elements) : 시작과 종료를 나타내는 태그로 이루어진 모든 명령어를 말함. 태그(Tag) : ''로 둘러싸인 요소의 일부이다. 시작 태그()와 종료 태그()로 이루어져 있지만 일부 요소는 종료 태그가 없는 것도 있다. 속성(Attributes) : 요소의 시작 태그 내에 사용한다. 명령어를 구체화시키는 역할을 한다. 변수(Arguments) : 속성과 관련된 값을 말한다.

[02. HTML5 기본 구조] : HTML5의 기본 템플릿은 기존의 HTML, XHTML의 형식과 크게 다르지는 않다. 그리고 HTML, XHTML과 거의 완벽하게 호환되기 때문에 HTML이나 XHTML 그 어떠한 방식의 코딩을 사용해도 무관하다. 예를 들자면 태그의 속성 이름으로 대문자나 소문자를 모두 사용해도 되며, 짝이 없는 태그의 경우 />를 사용해서 닫아도 되고 닫지 않아도 된다는 것이다. HTML을 기준으로 설명할 것이기에 표준으로 생각해주면 될 것. 어느정도 HTML을 다루어봤다면 걱정없을 것이다. HTML의 기본 구성요소 및 형식에 대해 살펴볼 것이기 때문이다.

[웹의 시작] 1_1-3. HTML5의 특징_5 에 이어 설명. [01. HTML5의 개요] : 브라우저의 종류(예시) -> 익스플로러(Explorer) : MS에서 개발한 브라우저로 윈도우95이상에서 운용/사용된다.전 세계적으로 가장 많이 사용되었던 유저들이 가장 많이 익숙해했던 웹 브라우저이다. 다양한 멀티미디어 환경을 브라우저 내에서 실행가능하도록 해주는 ActiveX 기술을 지원하지만 느렸던 속도와 웹 표준에 대한 문제점을 가지고 있어, 요즘의 추세는 크로미언(크롬기반) 브라우저로 넘어가는 추세이다. HTML5를 지원하는 익스플로러9 이후로 MS에서는 11버전까지 출시한 후 지원중단을 발표하였다. 파이어폭스(FireFox) : 익스플로러를 위협하는 웹 브라우저 중 하나가 바로 파이어폭스이다. 모질..

[웹의 시작] 1_1-3. HTML5의 특징_4 에 이어 설명. [01. HTML5 개요] : 앞으로는 기존과 같이 웹의 표준을 무시하고 액티브엑스(ActiveX)등을 사용하여 웹 사이트를 개발하게 된다면 스마트폰 등에서는 해당 홈페이지를 이용하기 어려워지는 추세이다. 웹 표준이라는 것은 매우 중요하다. 어떤 브라우저던지 정상적으로 누구에게나 작동/동작하는 사이트를 이용하기 위해서는 표준이라는 것이 지켜져야 한다. HTML5는 이러한 웹 표준이라는 것에서 중요한 역할을 한다. 기존 한 개의 브라우저에서만 동작한다는 것을 알면서도 액티브엑스를 사용한 이유는 스크립트 언어만으로는 원하는 기능을 구성하기 어려웠기 때문이다. 그러나 HTML5등장으로 표준을 통해 스크립트만으로도 원하는 기능을 충분히 구현할 수 ..

[01. HTML5 개요] : -3. 웹 표준화 대부분의 사람들이 몇년 전까지는 MS 익스플로러를 사용했었습니다. 허나 이때문에 MS는 표준기술보다는 익스플로러의 브라우저 기술만을 적용하게 됐었다. 그 중 하나가 그 유명한 ActiveX이다. 우리나라의 웹 환경에서는 액티브엑스가 상당히 많은 비중으로 사용되고 있었는데 특히 공공기관에서 많은 수요와 사용이 있었다. 하지만 추세가 바뀌었다. 익스플로러의 중단은 크롬의 다양화로 인해 지원이 중단되었고 대부분 크로이안 브라우저들이 유행되는 추세가 되었다. 윈도우 환경의 대중화로 OS운영체제에 대한 변경은 기대되지 않지만 이미 점유율을 높게 가지던 파이어폭스 브라우저나 애플의 사파리 등의 점유율도 애플기기의 사용이 높아진만큼 액티브엑스가 필요없는 방향으로 공공기..

[01. HTML5 개요] : -2. 시맨틱 웹 HTML5의 또하나의 특징은 바로 시맨틱 웹이다. 시맨틱이란 '의미가 있는', '의미의'라고 해석된다. 기존의 HTML문서는 단지 표현을 위한 수단이었다. 그러므로 여러가지 태그를 사용하여 구조를 정의할 수 있지만 이는 정확한 의미의 태그 사용이 아닌 단순한 문서 표현에 불과하였다. 사실 이러한 문서를 사람이 읽기엔 특별한 불편함이 있진 않다. 하지만 검색 엔진이나 문서 해석기가 문서를 판별하고 해석하는 데에는 힘든 구조일 수밖에 없다. W3C에서는 구조화된 마크업을 위하여 대표적인 의미있는 구조를 가지고 있는 XML을 사용하여 XHTML을 개발하고 발표하였다. 하짐나 결국 XHTML은 널리 퍼지지 못하게 되고 HTML5가 이의 발전을 이어받게 되었다. H..

[01. HTML5 개요] : 웹 애플리케이션 개발을 위한 플랫폼 : HTML5를 사용하여 구현할 수 있는 여러가지 기능들은 각 브라우저마다 지원 현황이 다르다. 앞으로 각 기능들에 대해 학습하며 다시 한번 언급하겠지만 종합적인 지원 현황은 현재 제일 점유율이 높은 브라우저에 따라 HTML5의 각 기능별 지원 여부가 제일 낮으므로 크롬 브라우저 사용을 권장한다.