<맨 위로>

html

태그(tag)

  • 태그는 <와>로 묶어서 표현하는 명령어. 기본형식은 ~ 이며, 일부 명령어인 empty element(빈 요소)의 경우 형태로 기술.

요소(element)

  • 시작태그와 종료태그 까지의 모든 명령어 집합을 ‘요소(element)’라고 정의. HTML 문서에서 콘텐츠는 이러한 요소들로 구성되며 각 요소의 의미에 따라 콘텐츠의 제목이나 본문의 구조를 가짐.

속성(attribute)

  • 시작 태그는 태그의 의미와 필요에 따라 개별적인 옵션을 가질 수 있는데, 이러한 옵션을 ‘속성(attribute)’이라고 정의.
  • 속성은 태그마다 다를 수 있으며, 여러 개의 속성을 하나의 태그에 지정할 때는 공백으로 구분하여 시작 태그에 지정할 수 있음.

값(value)

  • 각 속성이 가지는 값을 의미하며, 속성에 값을 할당할 때는 대입 연산자인 =과 함께 지정.
<태그 속성="값">내용</태그>

태그의 유형

<시작태그>
</종료태그>
<독립형태그 />
  • 시작태그와 종료 태그는 항상 쌍을 이루어야 한다
  • 독립형 태그는 혼자 사용된다

HTML 문서의 기본 형태

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<meta charset="utf-8" />
		<style></style>
		<script></script>
	</head>
	<body>
	</body>
</html>

body 내부의 형태 (예시)

<body>
	<header></header>
		<nav></nav>
		<section>
			<article></article>
			<article></article>
			<article></article>
		</section>
		<aside></aside>
 	<footer></footer>
</body>

DOCTYPE

DOCTYPE이란

  • 모든 HTML 파일의 시작 부분에 HTML문서 타입을 선언하는데 그것을 DOCTYPE 선언이라고 함
  • DOCTYPE은 문서가 사용하고 있는 마크업 언어가 무엇인지, 어떤 버전을 사용하고 있는지, 페이지를 출력할때 규칙을 얼마나 엄격히 준수할지에 대한 정보가 적혀있음

DTD:Document Type Definition

  • (DTD:Document Type Definition)문서 타입 정의
  • 마크업 문서 작성을 위해 문서의 첫머리에 선언
  • 문서형 선언의 위에는 공백을 포함해서 어떤 요소도 올 수 없음
  • 요소와 속성 등을 어떤 규칙에 따라 기술해야 하는지의 기준
  • 브라우저 렌더링의 기준
  • 특정 요소의 사용이 제한 되거나 규칙이 다르게 적용
  • 크로스 브라우징 환경에 반드시 필요.

구문 규칙 준수정도

  • Strict(엄격한) DTD : 이상적인 문서를 작성할 때 사용. 권장하지 않는 element, attribute, frame은 절대 사용하지 못함. element 배치에 대해 엄격한 기준 적용. 화면 디자인에 관한 HTML요소와 속성을 사용할수 없는 문서타입. HTML 4.01/XHTML 1.0에 적용하는 타입
  • Trasitional(보통의, 느슨한) DTD : 권장하지 않는 element, attribute는 사용가능 하나 frame은 사용하지 못함. element 배치에 대해서도 비교적 유연하게 사용가능. 문서가 디자인 요소와 비디자인 요소를 모두 포함할 수 있음
  • Frameset(프레임을 적용한) DTD : Transitional과 유사하되 frame 사용이 가능. HTML프레임을 사용하는 문서에서 사용. 사용을 지양하는 문서타입으로, 사용하지 않는것을 권장

DOCTYPE 예시

HTML4.01 <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
XHTML 1.0 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd”>
XHTML 1.0 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd”>
XHTML 1.0 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml/DTD/xhtml1-frameset.dtd”>
HTML5 <!DOCTYPE HTML>

head

  • 문자 코드 세트와 문서 정보(meta)
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <meta charset="utf-8" /> 
</head>
  • 문자 코드 세트(charset) 지정하기
  • utf-8 : 유니코드, 전세계의 모든 문자를 표현, 국제적인 코드규약
  • euc-kr : 2,350개의 한글문자, 한국에서 통용되는 한자, 영문
<head>
    <meta name="keywords" content="키워드내용" />
    <meta name="subject" content="문서 제목 정보" />
    <meta name="descriptioin" content="웹 페이지 요약 정보" />
    <meta name="author" content="제작자 정보" />
    <meta name="robots" content="검색 로봇 제어" />
    <meta name="copyright" content="저작권 정보" />
</head>
  • 문서정보 - 키워드 및 그 외 정보
  • 웹 페이지 홍보의 수단으로 검색 키워드 지정
  • robots : 크롤링 봇과 관련된 설정사항 구글 robots
  • 문서 제목
<head>
    <title>사이트의 제목 - 현재 페이지명</title>
</head>
  • 웹문서의 제목을 선언
  • 문서마다 유일한 내용으로 구성
  • Title요소는 문서를 구별할 수 있는 첫번째 관문
  • 즐겨찾기 및 북마크에 해당 웹 문서를 추가 할 경우에 사용되는 북마크 이름
  • 페이지와 웹 사이트 정보 함께 표기하기
  • 시각적으로는 웹사이트 명이 먼저 표기
<head>
    <title>:::::::::: 우리 회사 웹사이트 ::::::::::</title>
</head>
  • 의미 없는 장식문자 금지
  • 스크린 리더와 같은 보조기기를 통해 접근할 경우
  • “콜론콜론콜론콜론콜론콜론콜론콜론콜론 우리회사 웹사이트 콜론콜론콜론콜론콜론콜론콜론콜론”