Jeongchul Kim
HTML5 09 W3C HTML 웹 표준 및 간단한 웹 페이지 만들기 본문
HTML5 09 W3C HTML 웹 표준 및 간단한 웹 페이지 만들기 W3C HTML 웹 표준 인증 받기 W3C HTML 웹 표준 인증 받기 여러분, 국내의 유명 포털사이트인 네이버나 다음의 소스를 보신적 있으신가요? 네이버와 다음 사이트에서 소스보기를 하면 다음과 같은 소스들을 볼 수 있습니다. 복잡해 보이는 소스창이 보이는데요. 우리가 이번 시간에 확인할 것은 소스창 맨 위에 있는 <doctype html>입니다. 웹 페이지에는 웹 페이지의 타입을 지정하는 선언문이 있는데, 이것이 DOCTYPE입니다. DOCTYPE은 Document Type의 약자로 그 자체가 태그는 아니지만 웹 페이지에서 맨 처음 선언 되어 어떤 종류의 html을 사용할지를 웹 브라우저에게 알려주는 역할을 합니다. 즉, DOCTYPE는 문서 유형을 정의하는 구문이라 할 수 있습니다. DOCTYPE는 HTML5로 넘어오면서 선언방법이 다음과 같이 간단하게 변경되었습니다. xhtml1.0의 DOCTYPE 선언 방법과 비교하면 html5의 DOCTYPE 선언 방법이 얼마나 간단하게 변경 되었는지를 확인 할 수 있습니다. DOCTYPE의 내용을 제대로 이해하기 위해서는 DTD가 무엇인지 알아두는 것이 좋습니다. DTD는 Document Type Definition의 약자로 현재 사용하는 HTML 버전에서 어떤 태그들을 사용할 수 있는지를 알려주는 지침을 말합니다, 하나의 HTML 문서는 단 하나의 DOCTYPE 선언을 통해 오직 하나의 DTD와 결합하게 되는데 HTML5에는 DTD 범주가 없지만 html4.01 이나 xhtml1.0은 크게 strict, transitional, frameset 세가지 범주로 나누어 집니다, 먼저, strict은 엄격한 HTML 표준을 따르며, 시맨틱 마크업에 적합하지 않는 엘리먼트를 사용하지 않겠다는 것을 의미합니다. strict에서는 font, center, frame 등 총 14가지 엘리먼트를 사용할 수 없습니다. transitional은 지금은 사용하지만 앞으로는 변화를 맞춰 사용하지 않는 것은 금지하겠다는 것을 의미하며, frame, frameset 2가지의 엘리먼트를 사용할 수 없습니다. strict에 비해 범위를 넓게 허락해 주기 때문에 국내 환경에 적합한 범주입니다. frameset은 초창기 방식을 그대로 사용한다는 것을 의미합니다. 따라서 HTML의 모든 엘리먼트를 사용할 수 있습니다. W3C에서는 DOCTYPE을 어떻게 사용하면 좋은지를 추천해 주는 웹 페이지를 제공하고 있습니다. 앞서 살펴본 세 가지 범주 중에서 사용자가 원하는 범주를 선택하고 W3C에서 제공해주는 웹 페이지에 접속하여 해당 선언문을 복사하여 사용하면 됩니다. DOCTYPE 추천 페이지를 클릭하면 해당 페이지로 접속할 수 있습니다. http://www.w3.org/QA/2002/04/valid-dtd-list.html W3C(더블유쓰리씨)에서는 Markup 검증 서비스를 제공해줍니다. Markup(마크업) 검증 서비스는 DOCTYPE에 선언된 것을 기준으로 태그가 올바르게 작성되었는지 여부를 확인해 줍니다. 확인하는 방법은 URI 주소 입력에 의한 방법과 파일 업로드에 의한 방법, 그리고 직접 입력에 의한 유효성 검사가 있습니다. URI 입력 탭에서는 URI 주소에 의한 유효성 검사를 합니다. 화면에 보는 주소 입력란에 ‘http://~’ 형식의 인터넷 주소를 직접 입력하고 검사버튼을 누르면 됩니다. 파일 업로드 탭에서는 파일 업로드에 의한 유효성 검사를 합니다. ‘찾아보기’ 버튼을 눌러 html 파일을 업로드하여 검사를 진행하면 됩니다. 직접입력 탭에서 직접입력에 의한 유효성 검사를 합니다. 실제 소스코드를 해당입력란에 복사하여 검사를 진행하면 됩니다. 세 가지 방법 중에서 직접입력을 통한 유효성 검사의 결과를 확인해 보겠습니다. 입력란에 소스를 입력하고 #3 검사 버튼을 눌렀더니 다음과 같은 화면이 나타났습니다. 이 화면은 입력한 소스에 오류가 없다는 것으로 통과 판정을 받은 화면입니다. 이번에는 방금 입력한 소스를 조금 변경하여 입력해보겠습니다. 소스 입력 후 검사버튼을 눌렀더니 다음과 같은 화면이 나타났습니다. 이화면은 입력한 소스에 오류가 있다는 것을 나타내는 화면입니다. 오류 내용은 결과화면 아래 제시가 되므로 확인하여 오류부분을 수정하면 됩니다. markup 검증 서비스 버튼을 눌러 사이트에 접속하여 markup 유효성 검사를 해보시기 바랍니다. 간단한 웹 페이지 제작 간단한 웹 페이지 제작 지금까지 배운 태그들을 이용하여 간단한 웹 페이지를 만들어 보겠습니다. 이 화면이 이번에 만들어 볼 결과물입니다. 여러분이 보시기에도 별로 꾸며지지 않고 이상하게 보일 것입니다. 그 이유는 CSS3와 Javascript를 적용하지 않았기 때문입니다. 화면의 웹 페이지는 크게 header와 section, 그리고 footer로 나눠져 있습니다. 그리고 header 안에 nav를 사용하였고, section 안에 article을 사용 웹 페이지를 만들었습니다. 그럼 이 화면의 소스를 분석해보겠습니다. 문서의 가장 처음에는 doctype 선언을 하였습니다. 이것을 통해 html5 을 이용한 웹 페이지임을 알 수 있습니다. 웹 페이지의 제목은 <title> 태그를 이용하여 OnlineSolutions - Home이라 붙였고 <body> 이하 부분부터 시맨틱 태그를 이용하여 웹 문서의 구조를 작성하였습니다. 다음과 같이 start 엘리먼트로 표시한 부분은 웹 문서의 구조를 쉽게 구분할 수 있도록 표시한 것으로 생략하여도 소스에는 별다른 영향을 주지 않습니다. <header>는 웹 페이지의 상단부분을 의미하는데, <a> 태그와 <img> 태그를 이용하여 logo.png 파일을 불러와 로고를 나타냈습니다. <img> 태그에서 alt 속성값을 ‘logo’로 지정하였는데, 이것은 이미지가 표시되지 못할 때 이미지를 ‘logo’라는 문자열로 대체함을 의미합니다. <header> 안에 <nav> 태그를 이용하여 목록을 만들었는데, 순서가 없는 목록을 만드는 <ul> 태그와 <li>태그를 이용하여 Home, About, Portfolio, News, Contact 라는 목록을 구성하였습니다. 이렇게 로고와 목록을 만들고 <header>를 종료하였습니다. section은 다섯 개의 영역으로 구성하였는데, 첫 번째 section에서는 배너로 사용하기 위한 이미지 파일을 삽입하였습니다. 다음 section에서는 Latest news 문구를 입력하고 이미지를 첨부하였습니다. 그리고 <article> 태그를 이용하여 ‘Internet marketing’ 이라는 제목의 글을 입력하였습니다. 나머지 section에서도 각각 텍스트와 이미지를 삽입한 것을 확인할 수 있습니다. 웹 페이지의 하단은 <footer> 태그를 이용하여 작성자 정보나 저작권 정보, 또는 관련 문서 링크 등 부가 정보들을 담습니다. 지금까지 이번에 만들어 볼 웹 페이지의 소스에 대해 확인해 보았습니다. 1. 웹 페이지의 타입을 지정하는 선언문
2. HTML 웹 표준 인증 받기
웹 페이지 제작
'Web프로그래밍' 카테고리의 다른 글
| CSS 02 CSS 스타일링 (0) | 2016.04.26 |
|---|---|
| CSS 01 CSS의 개요 (0) | 2016.04.26 |
| HTML5 08 변화된 태그 (0) | 2016.04.21 |
| HTML5 07 추가 태그 (0) | 2016.04.21 |
| HTML5 06 시맨틱 태그 - 입력 양식 및 공간 분할 (0) | 2016.04.21 |