Skip to content
2012.04.24 16:33

기본적인 HTML 문서

(*.206.136.166) 조회 수 14582 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

+ - Up Down Comment Print
?

단축키

Prev이전 문서

Next다음 문서

+ - Up Down Comment Print

기본적인 HTML 문서는 다음과 같은 형태를 가진다.


 <!DOCTYPE html>
<html>
	<head>
		<title>테스트 페이지</title>
	</head>
	
	<body>
		<h1>테스트 페이지</h1>
		<p>이 자료는 <a href="http://www.htmlfive.co.kr">HTML5 오픈 커뮤니티</a>에서 배포합니다.</p>
	</body>
</html>


HTML5 문서는 트리 구조로서 요소와 텍스트로 구성되며,

각각의 요소는 시작 태그와 끝 태그로 구분한다


예를 들자면 h1의 경우 <h1>이 시작 태그 </h1>이 끝 태그가 된다

하지만 이는 절대적인 것은 아니며 특정 상황에서 특정 태그가 생략되는 경우도 있다.

 

또한 요소는 서로 간에 올바른 포함 관계를 가져야 한다.

 

예를 들어

 

 <p> 나는 <em>정말 <strong>최고</em>다</strong></p>

 

과 같은 경우 <em> 요소와 <strong> 요소 간에 포함 관계가 엉켜있으므로 잘못된 표현이라고 할 수 있다.

 

또한 요소는 요소가 어떻게 동작할지 제어하는 속성을 가질 수 있다.

 

 <a href="http://www.htmlfive.co.kr">HTML5 오픈 커뮤니티</a>


를 살펴보면 <a> 요소의 속성인 href를 이용하여 하이퍼링크를 만든 것을 알 수 있다

이러한 속성은 시작 태그에 포함되며 이름과 값의 쌍으로 이루어진다

이름과 값은 =로 구분되며 속성의 값이 아무런 특수 문자도 포함하지 않을 경우에는 

따옴표로 감싸지 않아도 되지만 그렇지 않을 경우에는 작은 따옴표나 큰 따옴표로 값을 감싸야 한다

속성의 값이 비었을 경우에는 =과 속성값을 생략할 수 있다


예를 들자면 다음과 같다.


<input name=phone disabled>  
<input name=phone disabled=""> 

<input name=phone maxlength=200> 
<input name=phone maxlength='200'> 
<input name=phone maxlength="200"> 

이러한 DOM(문서 객체 모델) 트리의 최상위 요소는 <html> 요소다

<html> 요소는 항상 최상위에 존재하며 <head> 요소와 <body> 요소를 가진다.

 

<head> 요소는 웹브라우져의 제목을 지정하는 <title> 요소를 가지며 보통 <script> 요소나 <link> 요소 등을 포함한다

<body> 요소 역시 여러 요소를 가질 수 있으며 위의 예제에서는 <h1> 요소, <p> 요소를 가지고 있다.

 

이러한 DOM 트리는 스크립트를 통해 제어할 수 있다

각각의 요소는 객체로 존재하고 API를 통해 제어할 수 있다

예를 들어 위의 <a> 요소의 href 속성을 변경하거나 기타 다른 속성을 제어할 수 있다.


List of Articles
번호 제목 글쓴이 조회 수 날짜
공지 HTML5 참고 사이트 모음 신큰특스 161353 2010.08.30
공지 소스 코드는 Code Highlighter를 이용해주세요. sincntx 74432 2010.08.30
공지 강좌 / 팁 이용 안내 sincntx 73069 2010.08.30
133 웹표준 진단도구 신큰특스 9472 2014.04.08
132 앱템플릿 예제 활용 사이트 공유합니다. 씨트린 17470 2013.08.23
131 스프링부트, Spring Data JPA, Querydsl 쇼핑몰 실무프로젝트과정 탑크리에듀 102 2018.12.19
» 기본적인 HTML 문서 신큰특스 14582 2012.04.24
129 ◆2018년 상반기 자바 개발자 무료취업교육 (취업우수기관)◆ 수키 214 2018.03.07
128 ▶[정보처리기사학원] 정보처리기사 취득 양성과정(국비무료 자격증과정) 탑크리에듀 176 2018.05.31
127 ■ [블록체인] 블록체인 기반 자바 풀스택 개발자 양성 과정 에이콘 8 2018.11.26
126 [팁] 현재 자신의 브라우저의 HTML5 적용 시 점수는? 1 코리 9499 2010.09.10
125 [팁] 브라우저 크기를 간단하게 모바일 크기로 바꾸기 코리 16625 2010.10.19
124 [팁] 꼭 알아야 하는 HTML5의 28가지 특징, 팁, 테크닉 신큰특스 37562 2011.10.28
123 [팁] video 자동 재생 되게 하는 방법 1 file 코리 19361 2010.10.15
122 [팁] CSS3 제작툴 엔토 13383 2010.09.14
121 [취업률 86%이상 NCS 무료교육]네트워크보안관리자,국가가 주목하는 4차산업시대 핵심직무 아이티윌GN 5 2018.12.10
120 [취업교육모집] 네트워크전문가,자바개발자_아이티윌 아이t 72 2018.06.13
119 [자마린학원/자마린교육]자마린(Xamarin) 크로스 플랫폼 앱개발 과정 C#으로 안드로이드, iOS 네이티브를 만들자 탑크리에듀 30 2018.10.29
118 [자마린실무강좌/자마린전문학원] 자마린(Xamarin) 크로스 플랫폼 앱개발 재직자 향상과정 탑크리에듀 26 2018.10.13
117 [자료] HTML 실전 가이드 6 코리 20379 2010.09.03
116 [오라클전문가과정/오라클학원교육]SQL 활용과 오라클(Oracle) Hint를 이용한 SQL튜닝 재직자 향상과정 탑크리에듀 38 2018.10.22
Board Pagination ‹ Prev 1 2 3 4 5 6 7 Next ›
/ 7

나눔글꼴 설치 안내


이 PC에는 나눔글꼴이 설치되어 있지 않습니다.

이 사이트를 나눔글꼴로 보기 위해서는
나눔글꼴을 설치해야 합니다.

설치 취소

Designed by sketchbooks.co.kr / sketchbook5 board skin

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

Copyright by sincntx 2014 All rights reserved.

sketchbook5, 스케치북5

sketchbook5, 스케치북5