목차
<html> 예제 <html> 정의 HTML5 추가속성 manifest 속성 예제 xmlns 속성 예제 <html> 기본 CSS HTML5 기본 레이아웃
<html> 예제
<!DOCTYPE html>
<html>
<head>
<title>문서 제목 : 홈짱닷컴 (homzzang.com)</title>
</head>
<body>
문서 내용 : (홈페이지 제작관리 + 서버관리 + 웹코딩언어) 강의 + 관리매뉴얼
</body>
</html>
<html> 정의
HTML ( H yper t ext M arkup L anguage: 하이퍼텍스트 마크업 랭귀지)
하이퍼텍스트 (Hypertext) : 컴퓨터를 통하여 저장된 정보를 학습자가 자유롭게 검색 하도록 도와주는 비순차적 텍스트의 전개원리 마크업 랭귀지 (Markup Language) : 표시를 해둔 언어. 즉, 웹 페이지에 어떻게 보일지 태그를 이용해 표시 를 해둔 언어
1. <html>는 해당 웹 문서가 HTML 언어로 작성된 문서임을 브라우저에게 알리는 역할 함.
2. <html>는 DTD 선언한 후에 위치하며, 모든 HTML 요소로 작성된 문서의 첫 머리에 위치.
즉, DTD → <HTML> → HTML 태그 요소 순으로 배열.
3. 위에서 보듯이, <html> 태그엔 DTD는 포함되지 않음.
4. 시작 태그와 종료 태그로 구성
※<html> 태그는 전역속성 지원.lang 속성은 전역속성 중 하나. (예) 한국어 : <html lang="ko" >
HTML5 추가속성
속성 속성값 쓰임새 manifest URL 주소 오프라인 브라우징을 위해 캐쉬 주소 명시 xmlns http://www.w3.org/1999/xhtml XHTML DTD 따를 경우, XML 네임스페이스 속성을 명시
※ manifest 속성은 IE 10 이상 주요 브라우저에서 지원 (즉, IE9 이하 경우 지원 X) ※ xmlns 속성은 모든 주요 브라우저에서 지원.
※ XHTML에선 명시 필수 지만, HTML에선 <html>에 내장된 걸로 간주.
manifest 속성 예제
<!DOCTYPE HTML>
<html manifest="demo.appcache">
<head>
<title>문서 제목 : 홈짱닷컴 (homzzang.com)</title>
</head>
<body>
문서 내용 : 홈페이지 무료 제작 강의 (html css 무료 강의, 그누보드 배추빌더 수정 팁 공유)
</body>
</html>
xmlns 속성 예제
<head>
<title>문서 제목 : 홈짱닷컴 (homzzang.com)</title>
</head>
<body>
문서 내용 : 홈페이지 무료 제작 강의 (html css 무료 강의, 그누보드 배추빌더 수정 팁 공유)
</body>
</html>
<html> 기본 CSS
html {
display: block;
}
html:focus {
outline: none;
}
※ 주요 브라우저는 위 CSS로 화면 표시.
HTML5 기본 레이아웃
<!DOCTYPE html>
<html lang="kr">
<head id=''>
UTF-8 ' />
</head>
<body>
<div>
<header >전체 헤더</header>
<div>
<nav >메뉴</nav>
<main >
<section >
<header>섹션1 헤더</header>
<article >섹션1 내용1</article> <article>섹션1 내용2</article>
<footer>섹션1 푸터</footer>
</section>
<section>
<header>섹션2 헤더</header>
<article>섹션2 내용1</article> <article>섹션2 내용2</article>
<footer>섹션2 푸터</footer>
</section>
</main>
<aside >부가 영역</aside>
</div>
<footer >전체 푸터</footer>
</div>
</body>
</html>
결과보기
PS2. nav 태그는 <header> 안에 넣기도 하고 별도로 빼기도 함.
PS3. div로 중간 중간 묶는 이유는 스타일로 레이아웃 제어하기 위함.
PS4. <header>・<footer> 경우, <section> 안팎에서 각각 사용 가능.
최신댓글