시작하기
웹 표준을 준수한 사이트 만들기
HTML이란?
웹 페이지를 만들기 위한 언어
-HT : Hyper Text : 문서와 문서의 연결
-M : Markup : 마크업, 태그
-L : Language : 언어
=> 즉 HTML이란 ? 문서와 문서로 연결된 태그 언어를 말합니다.
태그(Tag)란?
태그란? 정보를 정의하는 방식을 의미합니다.
-태그는 열린태그와 닫는태그가 있어야 합니다.
-닫는 태그에는"/"가 있어야 합니다.
-닫는 태그가 필요없는 태그도 있습니다.(br, meta, link)
CSS란?
CSS(Cascading Style Sheets)는 HTML을 꾸며주는 스타일 시트입니다. 즉 웹페이지를 꾸며주고, 디자인 작업을 도와주는 언어입니다.
DTD 선언
웹 문서에 대한 유형을 설정해주는 선언 규칙입니다.
//HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
//XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
//HTML 5
<!DOCTYPE html>
웹 문서 구조
-HTML문서는 <html>, ~ </html>구조로 이루어져 있습니다.
-HTML문서는 head와 body로 이루어져 있습니다.
-head는 문서에 대한 정보를 표시합니다.
-body는 문서에 대한 내용이 표시됩니다.
<html>
<head> </head>
<body> </body>
</html>
메타 태그란?
메타 태그는 head안에 작성을 하며, 웹 문서에 대한 정보를 기술하는 태그입니다.
//웹 문서에 대한 정보 및 언어 설정
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
//웹 문서에 대한 개발자 정보
<meta name="author" content="babylove789@naver.com" />
//웹 문서에 대한 설명
<meta name="description" content="웹 표준을 준수한 사이트 만들기" />
//웹 문서에 대한 키워드
<meta name="keywords" content="babylove789, 이정민, 웹 퍼블리셔, 웹 디자이너, 웹표준" />
언어 속성 설정
컨텐츠의 언어를 식별하는 프로그램이 컨텐츠 언어를 인식하고 언어 정보를 추철하는데, 미리 언어를 설정하면 효율성이 좋아집니다.
//xml이 설정된 html
<html lang="ko" xml:lang="ko" xmlns="http://www.w3.org/1999/xhtml">
타이틀
웹 페이지의 제목을 설정합니다.
<title>leejungmin</title>
박스모델
HTML 태그에는 기본적으로 2가지 유형의 성질이 있습니다. 각 태그에 대한 블록요소와 인라인 요소의 성질을 알고 코딩을 하면 좀 더 수월하게 할 수 있으며, 효과적으로 CSS를 적용 할 수 있습니다.
블록 엘리먼트(Block Element)
- 독립된 박스 영역으로, 한 줄에 하나의 블록 요소만 표현 할 수 있습니다.
- 블록요소에는 블록요소와 인라인 요소를 포함 할 수 있습니다.
- div, h1~h6, p, ul, li, ol, dl, address, table, filedset, hr
인라인 엘리먼트(Inline Element)
- 독립된 텍스트 영역으로, 한 줄에 여러개의 인라인 요소를 표현 할 수 있습니다.
- 인라인 요소에는 블록요소가 포함 될 수 없지만, 인라인 요소는 포함 될 수 있습니다.
- span,a ,a, strong, em, small, img, br, i, cite, textarea
유효성 검사
태그 규칙의 옭고 그름을 검사하는 기능
마크업 검사http://validator.kldp.orgCSS 검사http://css-validator.kldp.org
파이어폭스 - 부가기능 - web developer 파이어폭스 - 부가기능 - fire bug
웹 표준
모든 운영체제, 모든 브라우저, 모든 사용자, 모든 디바이스에서 같은 결과를 볼 수 있게 만든 표준안
W3C(World Wide Web Consortium)
W3C는 1994년 10월 미국의 MIT 컴퓨터 과학 연구소, 정보 수학유럽연구 컨소시업, 그리고 일본의 게이오 대학이 연합하여 만든 국제적인 웹 기술 표준 기구를 말합니다.
WAI(Web Accessibility Initiative)
WAI는 시각, 청각 기능 등에 장애를 지닌 사람도 일반인과 동등하게 웹에 접근하여 이용 할 수 있도록 관련 지참을 개발하고 웹 접근성 향상을 위한 노력을 기울이는 W3C의 산하 단체를 말합니다.