수업전에....

웹표준

웹에서 표준으로 사용되는 기술.
W3C가 권고한 표준안에 따라 목적과 방법에 맞게 사용하는 것.
어떠한 운영체제나 브라우저를 이용 하더라도 같은 결과를 볼 수 있도록 표준안을 이용하여 웹페이지를 만들어 가는 것.
그냥 우리가 쓰는 220V 콘센트라고 생각하면 된다.

웹표준으로 코딩하면 뭐가 좋을까?

  1. 마크업 용량 감소
  2. 컨텐츠와 CSS의 분리로 수정과 관리 용이
  3. 미래에 나올 브라우저에 대한 상위 버전 호환성
  4. 검색엔진에 대한 최적화 방안
  5. 웹접근성 향상

웹접근성

모든 사용자들이 웹사이트의 컨텐츠를 수비게 인식하고 서비스를 편리하게 이용할 수 있도록 만드는 것
ISO - 다양한 능력, 숙련, 요구, 취향을 가진 개인들이 정보에 접근할 수 있도록 하는 글로벌 요구사항
W3C WAI - 장애를 가진 사람도 웹을 이용할 수 있도록 보장하는 것으로 장애를 가진 사람들이 웹컨텐츠를 인지하고, 운영하고, 이해하고, 기술에 상관없이 이용할 수 있도록 견고한 컨텐츠를 만드는 것
대한민국은 - 2008년 4월 11월 장차법 발효로, 정부, 지방자치단체 및 공공기관이 운영하는 웹사이트는 장애인의 접근이 가능한 웹컨텐츠를 제공해야 함.
정리하자면 사람, 기계, 브라우져를 가리지 않고 컨텐츠를 이용할 수 있게 만드는 것이라고 생각하면 될 듯.

시멘틱마크업

말그대로 의미가 있는 마크업

크로스브라우징??

여러 종류의 웹브라우저에 동일한 서비스를 제공하는 것이라고 보면 된다.

웹브라우저의 종류

  • Internet Explorer
  • Firefox
  • Chrome
  • Safari
  • Opera

수업에 앞서....

에디터

에디터플러스 or 드림위버

브라우저

파이어폭스 ( 부가기능 : Firebug, Html Validator, Web Developer)

HTML : 문서타입, 기본구조

문서타입과 언어표시

Html / Strict / ko

						<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
						<html lang="ko">

Html / Transitional / ko

						<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
						<html lang="ko">

Html / Frameset / ko

						<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
						<html lang="ko">

xhtml / Strict / ko

						<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
						<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">

xhtml / Transitional / ko

						<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
						<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">

xhtml / Frameset / ko

						<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 
						<html lang="ko">

[참고]공식 언어 코드(ISO 639-1) 목록

바로가기

HTML 은 어떻게 생겼을까?

Html4

						<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
						<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
						<head>
						<title> 문서제목 </title>
						<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
						</head>
						<body>
						문서내용
						</body>
						</html>

Html5

						<!DOCTYPE html>
						<html>
						<head>
						<head>
						<title> 문서제목 </title>
						</head>
						<body>
						문서내용
						</body>
						</html>

참고사이트