15868 – <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <title>2단 레이아웃</title>   <s

This is an archived snapshot of W3C's public bugzilla bug tracker, decommissioned in April 2019. Please see the home page for more details.

Bug 15868 - <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <title>2단 레이아웃</title>   <s

Summary: <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <title>2단 레이...

Status:	RESOLVED INVALID

Alias:	None

Product:	HTML WG
Classification:	Unclassified
Component:	HTML5 spec (show other bugs)
Version:	unspecified
Hardware:	Other other

Importance:	P3 normal
Target Milestone:	---
Assignee:	Ian 'Hixie' Hickson
QA Contact:	HTML WG Bugzilla archive list

URL:	http://www.whatwg.org/specs/web-apps/...
Whiteboard:
Keywords:

Depends on:
Blocks:

Reported:	2012-02-03 13:40 UTC by contributor
Modified:	2012-03-09 19:58 UTC (History)
CC List:	4 users (show)

See Also:

Attachments

Description contributor 2012-02-03 13:40:20 UTC

Specification: http://html5.clearboth.org/spec.html
Multipage: http://www.whatwg.org/C#top
Complete: http://www.whatwg.org/c#top

Comment:

<!DOCTYPE html>

<html lang="ko">

	<head>

		<meta charset="utf-8" />

		<title>2단 레이아웃</title>

		<!--[if lt IE 9]>

		<script
src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>

		<![endif]-->

		

		

		<!-- HTML4 버전에서는 type속성이 있어야 했으나
HTML5에서는 생략가능 -->

		<style>

			

			#wrap {

				width: 800px;

				margin: auto;

				border:1px solid #000

			}

			

			#header {

				width:800px;

				height:100px; 

				background: red;

				margin:0;

				display: block

				

			}

			

			#sidebar {

				width:300px;

				height:300px;

				background: green;

				float: left;

				margin:0;

				display: block

			}

			

			#content {

				width:500px;

				min-height: 300px;

				background: blue;

				float: right;

				margin:0;

				display: block

			}

			

			#footer {

				width:800px;

				height:100px;

				background: orange; 

				clear:both; 

				margin:0;

				display: block

			}

			

		</style>

		<!--

			HTML5로 마크업할경우에는 

			

			1. 익스플로러 6~8까지에서 새로운 요소를
인식하지 못합니다.

			   (DOM이 생성이 안됩니다.)

			   

			   해결책 :

			   자바스크립트를 이용해서 새로운
요소들을 만들어주면 됩니다.

			   (IE9.js 라이브러리를 이용)

			   

			2. 이전버전 웹표준 브라우저는
header,footer를 인라인레벨로 인식

			  (새로운요소들을 DOM이 생성되나
인라인레벨로 인식)

			  

			  해결책 :

			  reset.css에 display:block 명시

			  (브라우저가 가지고 있는 CSS를 초기화)

			    

			 -->

	</head>

	<body>

		<!-- 현재 버전에서 레이아웃을 담당하는
요소는 div

		그런데 HTML5에서는 의미와 아웃라인을
기준으로

		section, article, nav, aside, header, footer, div

		-->

		<div id="wrap">

			<!-- 

				ctrl + shift + F  : 포맷팅(들여쓰기등)


				ctrl + space : 자동완성기능 활성화

				ctrl + F11 : 실행(내부 웹서버 작동)

				

				 -->

			<header id="header"></header>

			<section id="sidebar"></section>

			<section id="content"></section>

			<footer id="footer"></footer>

		</div>

	</body>

</html>


Posted from: 59.15.138.44
User agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.30618; .NET CLR 3.5.30729; InfoPath.2; .NET4.0C)