[Bug 15868] New: <!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에서는 생략가능 --> <s

https://www.w3.org/Bugs/Public/show_bug.cgi?id=15868

           Summary: <!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(beta
                    4)/IE9.js"></script> <![endif]--> <!-- HTML4 버전에서는
                    type속성이 있어야 했으나 HTML5에서는 생략가능 --> <s
           Product: HTML WG
           Version: unspecified
          Platform: Other
               URL: http://www.whatwg.org/specs/web-apps/current-work/#top
        OS/Version: other
            Status: NEW
          Severity: normal
          Priority: P3
         Component: HTML5 spec (editor: Ian Hickson)
        AssignedTo: ian@hixie.ch
        ReportedBy: contributor@whatwg.org
         QAContact: public-html-bugzilla@w3.org
                CC: mike@w3.org, public-html-wg-issue-tracking@w3.org,
                    public-html@w3.org


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)

-- 
Configure bugmail: https://www.w3.org/Bugs/Public/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the QA contact for the bug.

Received on Friday, 3 February 2012 13:40:25 UTC