Tag: footer

  • HTML 레이아웃 요소 구성하기

    HTML 레이아웃 요소 구성하기

    Heading은 문서에서 새로운 섹션(new section)이나 하위 섹션(sub-section)의 시작을 정의 할 때 완벽하게 효율적인 접근이지만, 더 명확하고 정확한 의미 구조(semantic structure)를 확립하기 위해 잘못 사용될 수 있는 여지가 있습니다.

    div 엘리먼트는 주로 CSS를 걸 수 있는 스캐폴딩(scaffolding)으로 사용되는 섹션을 포함하는 데 사용할 수 있지만 큰 의미는 없습니다. 단면 처리(sectioning)에는 기사(articles), 머리글(headers), 바닥 글(footers) 및 내비게이션(navigation)과 같이 페이지의 특정 부분을 정의하는 데 사용할 수 있는 몇 개의 태그가 포함됩니다.

    Articles과 Sections

    article 요소는 독립형 콘텐츠 섹션을 마크업하는 데 사용할 수 있습니다. 예를 들어 블로그 게시물을 기사로 생각하거나 많은 기사가 담긴 전통적인 신문 페이지를 복제하는 경우 여러 번 생각하면 이 작업은 한 번만 사용할 수 있습니다.

    섹션 요소는 보다 일반적인 섹션을 나타내며 예를 들어 기사를 분할하거나 챕터(chapters)를 나타내는 데 사용할 수 있습니다.

    <article>
        <section id="intro">
            <p>[An introduction]</p>
        </section>
        <section id="main_content">
            <p>[Content]</p>
        </section>
        <section id="related">
            <ul>
                <li><a href="that.html">That related article</a></li>
                <li><a href="this.html">This related article</a></li>
            </ul>
        </section>
    </article>

    div가 이러한 분리를 만드는 데 사용될 수 있지만 ( 또는 스타일링을 위해 이러한 구분이 필요하지 않은 경우에도 ) 훨씬 풍부하고 의미 있는 문서를 제공합니다.

    Headers와 Footers

    머리글(Headers)과 바닥 글(Footers)은 보다 전문화되고 자체 설명이 가능한 섹션을 제공합니다.

    <body>
        <article>
            <header>
                <h1>Alternatively…</h1>
                <p>[An introduction]</p>
            </header>
            <section id="main_content">
                <p>[Content]</p>
            </section>
            <footer>
                <p>[End notes]</p>
            </footer>
        </article>
        <footer>
            <p>[Copyright bumf]</p>
        </footer>
    </body>

    바닥 글(Footers)은 포함되어있는 섹션의 꼬리말입니다. 위의 예에서 첫 번째 바닥 글은 집필의 바닥 글이고 두 번째 바닥 글은 페이지의 바닥 글입니다.

    Asides

    Aside는 콘텐츠를 둘러싼 콘텐츠와 관련된 콘텐츠를 나타내는 데 사용할 수 있습니다.
    Article에서 관련 정보의 인용 내용 또는 미리보기를 생각해보십시오.

    <section id="main_content">
        <h1>Tixall</h1>
        <p>[All about Tixall]</p>
        <aside>
            <h2>Tixall Obelisk</h2>
            <p>[A short note about Tixall Obelisk]</p>
        </aside>
        <p>[Maybe a bit more about Tixall]</p>
    </section>

    Aside는 콘텐츠를 둘러싼 콘텐츠와 관련된 콘텐츠를 나타내는 데 사용할 수 있습니다.
    Article에서 관련 정보의 인용 내용 또는 미리보기를 생각해보십시오.

    우리가 이 구조에 집중하는 동안,
    figures를 포함 시키려면, 그 일을하기위한 두 개의 태그가있을 수 있습니다.

    <figure>
        <img src="pictures.jpg">
        <figcaption>My Birthday Party</figcaption>
    </figure>

    img 요소는 alt 속성이 필요 없다는 것을 명심하십시오. figcaption (맞춤법이 필요한 경우 “figure caption”)이 해당 작업을 수행하면됩니다.

    Navigation

    마지막으로 내비게이션 링크 그룹을 마크업하는 데 사용되는 nav가 있습니다.

    <nav id="main_nav">
        <ul>
            <li><a href="/tutorials/">Tutorials</a></li>
            <li><a href="/techniques/">Techniques</a></li>
            <li><a href="/examples/">Examples</a></li>
            <li><a href="/references/">References</a></li>
        </ul>
    </nav>

  • HTML 레이아웃 구성 태그

    HTML 레이아웃 구성 태그

    HTML Tag : article

    독립적인 HTML 문서의 독립 섹션. 예를 들어 블로그 게시물을 기사로 생각하면 이 요소를 한 번만 사용할 수 있습니다. 많은 기사가 포함된 전통적인 신문 페이지를 복제한다고 생각하면 여러 번 사용할 수 있습니다.

    <h1>The Daily News</h1>
    
    <article>
        <h2>Man Eats House</h2>
        <!-- article content -->
    </article>
    
    <article>
        <h2>Martian Mice Invade Ecuador</h2>
        <!-- article content -->
    </article>

    HTML Tag : section

    HTML 문서의 일반적인 섹션을 예를 들어, 기사(articles)를 분할하거나 챕터(chapters)를 나타내는 데 사용할 수 있습니다.

    <article>
        <section id="intro">
            <!-- An introduction -->
        </section>
        <section id="main_content">
            <!-- Main content -->
        </section>
        <section id="related">
            <ul>
                <li><a href="that.html">That related article</a></li>
                <li><a href="this.html">This related article</a></li>
            </ul>
        </section>
    </article>

    HTML Tag : header

    소개 콘텐츠 또는 내비게이션 기능이 포함 된 페이지 또는 섹션의 머리글(headers)입니다.

    <body>
        <header>
            <!-- A header for the page. -->
        </header>
    
        <section>
            <header>
                <!-- A header for the section. -->
            </header>
        </section>
    </body>

    페이지 또는 섹션의 바닥 글(footers). 여기에는 포스트 스크립트, 부록 또는 관련 페이지에 대한 링크와 같은 내용이 포함될 수 있습니다.

    <body>
        <section>
            <!-- stuff -->
            <footer>
                <!-- A footer for the section. -->
            </footer>
        </section>
    
        <footer>
            <!-- A footer for the page. -->
        </footer>
    </body>

    HTML Tag : aside

    콘텐츠를 둘러싼 콘텐츠와 관련이 있지만, 콘텐츠와 별개입니다. 기사(articles)에서 관련 정보의 인용 글 또는 미리보기는 aside 태그로 마크업 할 수 있는 콘텐츠의 예입니다.

    <section id="main_content">
        <h1>Tixall</h1>
        <!-- All about Tixall -->
        <aside>
            <h2>Tixall Obelisk</h2>
            <!-- A short note about Tixall Obelisk -->
        </aside>
        <!-- A bit more about Tixall -->
    </section>

    HTML Tag : nav

    내비게이션 영역 – 다른 페이지 또는 페이지의 섹션에 대한 주요 연결 그룹입니다.

    <nav id="main_nav">
        <ul>
            <li><a href="/tutorials/">Tutorials</a></li>
            <li><a href="/techniques/">Techniques</a></li>
            <li><a href="/examples/">Examples</a></li>
            <li><a href="/references/">References</a></li>
        </ul>
    </nav>

    HTML Tag : figure

    그림(Figure). 일반적으로 페이지의 주 콘텐츠에서 참조되는 자체 포함 된 설명 콘텐츠. 관련 사진이나 차트를 원하는 곳에 사용됩니다.

    <figure>
        <img src="obelisk.jpg">
        <figcaption>Tixall Obelisk</figcaption>
    </figure>
  • HTML 레이아웃 표현 방법 ③

    HTML 레이아웃 표현 방법 ③

    페이지 레이아웃 1 : 2 columns – 1 단계 : 네비게이션 열의 위치 지정.
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Page layout 1</title>
        <style>
            body {
                font: 80% arial, helvetica, sans-serif;
                margin: 0;
            }
            
            #navigation {
                position: absolute;
                left: 0;
                width: 15em;
            }
    
            #content {
                color: #ccc;
            }
            
            
        </style>
    </head>
    <body>
    
        <div id="navigation">
            <ul>
                <li><a href="">Biology</a></li>
                <li><a href="">Evolution</a></li>
                <li><a href="">Natural Selection</a></li>
                <li><a href="">Genetics</a></li>
            </ul>
            <ul>
                <li><a href="">Erasmus Darwin</a></li>
                <li><a href="">Lamarck</a></li>
                <li><a href="">Charles Darwin</a></li>
                <li><a href="">Wallace</a></li>
                <li><a href="">Dawkins</a></li>
            </ul>
        </div>
    
        <div id="content">
            <h2>On the Origin of The Origin</h2>
            <p>Darwin's father was dead set on his son becoming a cleric but even though the young rapscallion began to study theology he found worms much more interesting.</p>
            <p>When a lonely man with a moustache asked Darwin to ride with him on his boat named after a dog, Darwin agreed and set off around the world fiddling with wildlife.</p>
            <p>Some say it was a load of birds from a bunch of islands hundreds of miles off the Ecuadorean coast that inspired his now widely accepted explanation of the mechanism of evolution. "Why does that bird on that island have a beak like that while that finch on that island has a beak like that? AHA! I've got it! Natural Selection!" he thought. It wasn't actually quite like that, but, y'know, it's a fine, popular romantic myth.</p>
    
            <h2>The Origin</h2>
            <p>Upon return from his jaunt, Charles chronicled his escapades (as <em>The Voyage of the Beagle</em>) and got a bit carried away with barnacles, although his theory of evolution was always ticking away in the back of his mind.</p>
            <p>Some 20 or so year after he returned to England, a Welsh naturalist by the name of Wallace popped up with a similar idea to Darwin's grand theory. Darwin got a move on.</p>
            <p>In 1858 a paper jointly attributed to Darwin and Wallace was presented to the Linnean Society of London that sent rumbles across the establishment and really ticked off a fair few people. The next year saw the publication of Darwin's 500-page "abstract" - <em>On The Origin of Species by Means of Natural Selection or the Preservation of Favoured Races In The Struggle For Life</em> (or <abbr>OTOOSBMONSOTPOFRITSFL</abbr> for short).</p>
            <p>Darwin, already a prominent arc in scientific circles, was propelled into megastardom.</p>
    
            <h2>After The Origin</h2>
            <p>Chuck D revised The Origin five times, toning down each one a bit more than the one before it, partly to appease his religious wife. Who also happened to be his cousin. But some years later he'd had enough of trying to disguise the logical conclusion that humans are descended from the same common ancestor as all other animals and his third classic, <em>The Descent of Man</em>, was published and <em>really</em> pissed off the religious establishment.</p>
        </div>
    
    </body>
    </html>
    페이지 레이아웃 2 : 2 columns – 2 단계 : 여백을 사용하여 네비게이션 열 아래에서 콘텐츠를 밀어냅니다.
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Page layout 2</title>
        <style>
            body {
                font: 80% arial, helvetica, sans-serif;
                margin: 0;
            }
            
            #navigation {
                position: absolute;
                left: 0;
                width: 15em;
            }
            #content {
                margin-left: 15em;
            }
        </style>
    </head>
    <body>
        <div id="navigation">
            <ul>
                <li><a href="">Biology</a></li>
                <li><a href="">Evolution</a></li>
                <li><a href="">Natural Selection</a></li>
                <li><a href="">Genetics</a></li>
            </ul>
            <ul>
                <li><a href="">Erasmus Darwin</a></li>
                <li><a href="">Lamarck</a></li>
                <li><a href="">Charles Darwin</a></li>
                <li><a href="">Wallace</a></li>
                <li><a href="">Dawkins</a></li>
            </ul>
        </div>
        <div id="content">
            <h2>On the Origin of The Origin</h2>
            <p>Darwin's father was dead set on his son becoming a cleric but even though the young rapscallion began to study theology he found worms much more interesting.</p>
            <p>When a lonely man with a moustache asked Darwin to ride with him on his boat named after a dog, Darwin agreed and set off around the world fiddling with wildlife.</p>
            <p>Some say it was a load of birds from a bunch of islands hundreds of miles off the Ecuadorean coast that inspired his now widely accepted explanation of the mechanism of evolution. "Why does that bird on that island have a beak like that while that finch on that island has a beak like that? AHA! I've got it! Natural Selection!" he thought. It wasn't actually quite like that, but, y'know, it's a fine, popular romantic myth.</p>
            <h2>The Origin</h2>
            <p>Upon return from his jaunt, Charles chronicled his escapades (as <em>The Voyage of the Beagle</em>) and got a bit carried away with barnacles, although his theory of evolution was always ticking away in the back of his mind.</p>
            <p>Some 20 or so year after he returned to England, a Welsh naturalist by the name of Wallace popped up with a similar idea to Darwin's grand theory. Darwin got a move on.</p>
            <p>In 1858 a paper jointly attributed to Darwin and Wallace was presented to the Linnean Society of London that sent rumbles across the establishment and really ticked off a fair few people. The next year saw the publication of Darwin's 500-page "abstract" - <em>On The Origin of Species by Means of Natural Selection or the Preservation of Favoured Races In The Struggle For Life</em> (or <abbr>OTOOSBMONSOTPOFRITSFL</abbr> for short).</p>
            <p>Darwin, already a prominent arc in scientific circles, was propelled into megastardom.</p>
            <h2>After The Origin</h2>
            <p>Chuck D revised The Origin five times, toning down each one a bit more than the one before it, partly to appease his religious wife. Who also happened to be his cousin. But some years later he'd had enough of trying to disguise the logical conclusion that humans are descended from the same common ancestor as all other animals and his third classic, <em>The Descent of Man</em>, was published and <em>really</em> pissed off the religious establishment.</p>
        </div>
    </body>
    </html>
    페이지 레이아웃 3 : 테두리를 사용하여 열의 배경을 제공합니다.
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Page layout 3</title>
        <style>
            body {
                font: 80% arial, helvetica, sans-serif;
                margin: 0;
            }
            
            h2 {
                margin-top: 0;
            }
            
            #navigation {
                position: absolute;
                left: 0;
                width: 15em;
            }
            #content {
                border-left: 15em solid #ccf;
            }
        </style>
    </head>
    <body>
        <div id="navigation">
            <ul>
                <li><a href="">Biology</a></li>
                <li><a href="">Evolution</a></li>
                <li><a href="">Natural Selection</a></li>
                <li><a href="">Genetics</a></li>
            </ul>
            <ul>
                <li><a href="">Erasmus Darwin</a></li>
                <li><a href="">Lamarck</a></li>
                <li><a href="">Charles Darwin</a></li>
                <li><a href="">Wallace</a></li>
                <li><a href="">Dawkins</a></li>
            </ul>
        </div>
        <div id="content">
            <h2>On the Origin of The Origin</h2>
            <p>Darwin's father was dead set on his son becoming a cleric but even though the young rapscallion began to study theology he found worms much more interesting.</p>
            <p>When a lonely man with a moustache asked Darwin to ride with him on his boat named after a dog, Darwin agreed and set off around the world fiddling with wildlife.</p>
            <p>Some say it was a load of birds from a bunch of islands hundreds of miles off the Ecuadorean coast that inspired his now widely accepted explanation of the mechanism of evolution. "Why does that bird on that island have a beak like that while that finch on that island has a beak like that? AHA! I've got it! Natural Selection!" he thought. It wasn't actually quite like that, but, y'know, it's a fine, popular romantic myth.</p>
            <h2>The Origin</h2>
            <p>Upon return from his jaunt, Charles chronicled his escapades (as <em>The Voyage of the Beagle</em>) and got a bit carried away with barnacles, although his theory of evolution was always ticking away in the back of his mind.</p>
            <p>Some 20 or so year after he returned to England, a Welsh naturalist by the name of Wallace popped up with a similar idea to Darwin's grand theory. Darwin got a move on.</p>
            <p>In 1858 a paper jointly attributed to Darwin and Wallace was presented to the Linnean Society of London that sent rumbles across the establishment and really ticked off a fair few people. The next year saw the publication of Darwin's 500-page "abstract" - <em>On The Origin of Species by Means of Natural Selection or the Preservation of Favoured Races In The Struggle For Life</em> (or <abbr>OTOOSBMONSOTPOFRITSFL</abbr> for short).</p>
            <p>Darwin, already a prominent arc in scientific circles, was propelled into megastardom.</p>
            <h2>After The Origin</h2>
            <p>Chuck D revised The Origin five times, toning down each one a bit more than the one before it, partly to appease his religious wife. Who also happened to be his cousin. But some years later he'd had enough of trying to disguise the logical conclusion that humans are descended from the same common ancestor as all other animals and his third classic, <em>The Descent of Man</em>, was published and <em>really</em> pissed off the religious establishment.</p>
        </div>
    </body>
    </html>
    페이지 레이아웃 4 : 3 columns
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Page layout 4</title>
        <style>
            body {
                font: 80% arial, helvetica, sans-serif;
                margin: 0;
            }
            
            h2 {
                margin-top: 0;
            }
            
            #navigation1 {
                position: absolute;
                left: 0;
                width: 200px;
            }
            #navigation2 {
                position: absolute;
                right: 0;
                width: 150px;
            }
        
            #content {
                margin: 0 150px 0 200px;
            }
        </style>
    </head>
    <body>
        <div id="navigation1">
            <ul>
                <li><a href="">Biology</a></li>
                <li><a href="">Evolution</a></li>
                <li><a href="">Natural Selection</a></li>
                <li><a href="">Genetics</a></li>
            </ul>
        </div>
        <div id="navigation2">
            <ul>
                <li><a href="">Erasmus Darwin</a></li>
                <li><a href="">Lamarck</a></li>
                <li><a href="">Charles Darwin</a></li>
                <li><a href="">Wallace</a></li>
                <li><a href="">Dawkins</a></li>
            </ul>
        </div>
        <div id="content">
            <h2>On the Origin of The Origin</h2>
            <p>Darwin's father was dead set on his son becoming a cleric but even though the young rapscallion began to study theology he found worms much more interesting.</p>
            <p>When a lonely man with a moustache asked Darwin to ride with him on his boat named after a dog, Darwin agreed and set off around the world fiddling with wildlife.</p>
            <p>Some say it was a load of birds from a bunch of islands hundreds of miles off the Ecuadorean coast that inspired his now widely accepted explanation of the mechanism of evolution. "Why does that bird on that island have a beak like that while that finch on that island has a beak like that? AHA! I've got it! Natural Selection!" he thought. It wasn't actually quite like that, but, y'know, it's a fine, popular romantic myth.</p>
            <h2>The Origin</h2>
            <p>Upon return from his jaunt, Charles chronicled his escapades (as <em>The Voyage of the Beagle</em>) and got a bit carried away with barnacles, although his theory of evolution was always ticking away in the back of his mind.</p>
            <p>Some 20 or so year after he returned to England, a Welsh naturalist by the name of Wallace popped up with a similar idea to Darwin's grand theory. Darwin got a move on.</p>
            <p>In 1858 a paper jointly attributed to Darwin and Wallace was presented to the Linnean Society of London that sent rumbles across the establishment and really ticked off a fair few people. The next year saw the publication of Darwin's 500-page "abstract" - <em>On The Origin of Species by Means of Natural Selection or the Preservation of Favoured Races In The Struggle For Life</em> (or <abbr>OTOOSBMONSOTPOFRITSFL</abbr> for short).</p>
            <p>Darwin, already a prominent arc in scientific circles, was propelled into megastardom.</p>
            <h2>After The Origin</h2>
            <p>Chuck D revised The Origin five times, toning down each one a bit more than the one before it, partly to appease his religious wife. Who also happened to be his cousin. But some years later he'd had enough of trying to disguise the logical conclusion that humans are descended from the same common ancestor as all other animals and his third classic, <em>The Descent of Man</em>, was published and <em>really</em> pissed off the religious establishment.</p>
        </div>
    </body>
    </html>
    페이지 레이아웃 5 : 헤더(Header) 추가
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Page layout 5</title>
        <style>
            body {
                font: 80% arial, helvetica, sans-serif;
                margin: 0;
            }
            
            h1, h2 {
                margin: 0;
            }
            
            #header {
                background: #ccc;
            }
            
            #navigation {
                position: absolute;
                left: 0;
                top: 70px;
                width: 150px;
            }
            
            #content {
                margin-left: 150px;
            }
        </style>
    </head>
    <body>
        <div id="header">
            <h1>Charles Darwin</h1>
        </div>
        <div id="navigation">
            <ul>
                <li><a href="">Biology</a></li>
                <li><a href="">Evolution</a></li>
                <li><a href="">Natural Selection</a></li>
                <li><a href="">Genetics</a></li>
            </ul>
            <ul>
                <li><a href="">Erasmus Darwin</a></li>
                <li><a href="">Lamarck</a></li>
                <li><a href="">Charles Darwin</a></li>
                <li><a href="">Wallace</a></li>
                <li><a href="">Dawkins</a></li>
            </ul>
        </div>
        <div id="content">
            <h2>On the Origin of The Origin</h2>
            <p>Darwin's father was dead set on his son becoming a cleric but even though the young rapscallion began to study theology he found worms much more interesting.</p>
            <p>When a lonely man with a moustache asked Darwin to ride with him on his boat named after a dog, Darwin agreed and set off around the world fiddling with wildlife.</p>
            <p>Some say it was a load of birds from a bunch of islands hundreds of miles off the Ecuadorean coast that inspired his now widely accepted explanation of the mechanism of evolution. "Why does that bird on that island have a beak like that while that finch on that island has a beak like that? AHA! I've got it! Natural Selection!" he thought. It wasn't actually quite like that, but, y'know, it's a fine, popular romantic myth.</p>
            <h2>The Origin</h2>
            <p>Upon return from his jaunt, Charles chronicled his escapades (as <em>The Voyage of the Beagle</em>) and got a bit carried away with barnacles, although his theory of evolution was always ticking away in the back of his mind.</p>
            <p>Some 20 or so year after he returned to England, a Welsh naturalist by the name of Wallace popped up with a similar idea to Darwin's grand theory. Darwin got a move on.</p>
            <p>In 1858 a paper jointly attributed to Darwin and Wallace was presented to the Linnean Society of London that sent rumbles across the establishment and really ticked off a fair few people. The next year saw the publication of Darwin's 500-page "abstract" - <em>On The Origin of Species by Means of Natural Selection or the Preservation of Favoured Races In The Struggle For Life</em> (or <abbr>OTOOSBMONSOTPOFRITSFL</abbr> for short).</p>
            <p>Darwin, already a prominent arc in scientific circles, was propelled into megastardom.</p>
            <h2>After The Origin</h2>
            <p>Chuck D revised The Origin five times, toning down each one a bit more than the one before it, partly to appease his religious wife. Who also happened to be his cousin. But some years later he'd had enough of trying to disguise the logical conclusion that humans are descended from the same common ancestor as all other animals and his third classic, <em>The Descent of Man</em>, was published and <em>really</em> pissed off the religious establishment.</p>
        </div>
    </body>
    </html>
    페이지 레이아웃 6 : Footer은(는) 절대 위치(absolute)의 열(columns)과 항상 작동하지 않습니다.
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Page layout 6</title>
        <style>
            body {
                font: 80% arial, helvetica, sans-serif;
                margin: 0;
            }
            
            h1, h2 {
                margin: 0;
            }
            
            #header {
                background: #ccc;
            }
            
            #navigation {
                position: absolute;
                left: 0;
                width: 150px;
            }
            
            #content {
                margin-left: 150px;
            }
            
            #footer {
                background: #ccc;
            }
            
            #footer p {
                margin: 0;
            }
        </style>
    </head>
    <body>
        <div id="header">
            <h1>Charles Darwin</h1>
        </div>
        <div id="navigation">
            <ul>
                <li><a href="">Biology</a></li>
                <li><a href="">Evolution</a></li>
                <li><a href="">Natural Selection</a></li>
                <li><a href="">Genetics</a></li>
            </ul>
            <ul>
                <li><a href="">Erasmus Darwin</a></li>
                <li><a href="">Lamarck</a></li>
                <li><a href="">Charles Darwin</a></li>
                <li><a href="">Wallace</a></li>
                <li><a href="">Dawkins</a></li>
            </ul>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div id="content">
            <h2>On the Origin of The Origin</h2>
            <p>Darwin's father was dead set on his son becoming a cleric but even though the young rapscallion began to study theology he found worms much more interesting.</p>
            <p>When a lonely man with a moustache asked Darwin to ride with him on his boat named after a dog, Darwin agreed and set off around the world fiddling with wildlife.</p>
            <p>Some say it was a load of birds from a bunch of islands hundreds of miles off the Ecuadorean coast that inspired his now widely accepted explanation of the mechanism of evolution. "Why does that bird on that island have a beak like that while that finch on that island has a beak like that? AHA! I've got it! Natural Selection!" he thought. It wasn't actually quite like that, but, y'know, it's a fine, popular romantic myth.</p>
            <h2>The Origin</h2>
            <p>Upon return from his jaunt, Charles chronicled his escapades (as <em>The Voyage of the Beagle</em>) and got a bit carried away with barnacles, although his theory of evolution was always ticking away in the back of his mind.</p>
            <p>Some 20 or so year after he returned to England, a Welsh naturalist by the name of Wallace popped up with a similar idea to Darwin's grand theory. Darwin got a move on.</p>
            <p>In 1858 a paper jointly attributed to Darwin and Wallace was presented to the Linnean Society of London that sent rumbles across the establishment and really ticked off a fair few people. The next year saw the publication of Darwin's 500-page "abstract" - <em>On The Origin of Species by Means of Natural Selection or the Preservation of Favoured Races In The Struggle For Life</em> (or <abbr>OTOOSBMONSOTPOFRITSFL</abbr> for short).</p>
            <p>Darwin, already a prominent arc in scientific circles, was propelled into megastardom.</p>
            <h2>After The Origin</h2>
            <p>Chuck D revised The Origin five times, toning down each one a bit more than the one before it, partly to appease his religious wife. Who also happened to be his cousin. But some years later he'd had enough of trying to disguise the logical conclusion that humans are descended from the same common ancestor as all other animals and his third classic, <em>The Descent of Man</em>, was published and <em>really</em> pissed off the religious establishment.</p>
        </div>
        <div id="footer">
            <p>Content is © Copyright Patrick Griffiths.</p>
            <p>This page is valid HTML5.</p>
        </div>
    </body>
    </html>
    페이지 레이아웃 7 : 플로팅 된 열(columns)을 사용하여 Footer 추가
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Page layout 7</title>
        <style>
            body {
                font: 80% arial, helvetica, sans-serif;
                margin: 0;
            }
            
            h1, h2 {
                margin: 0;
            }
            
            #header {
                background: #ccc;
            }
            
            #navigation {
                float: left;
                width: 150px;
            }
            
            #content {
                margin-left: 150px;
            }
            
            #footer {
                clear: left;
                background: #ccc;
            }
            
            #footer p {
                margin: 0;
            }
            
        </style>
    </head>
    <body>
        <div id="header">
            <h1>Charles Darwin</h1>
        </div>
        <div id="navigation">
            <ul>
                <li><a href="">Biology</a></li>
                <li><a href="">Evolution</a></li>
                <li><a href="">Natural Selection</a></li>
                <li><a href="">Genetics</a></li>
            </ul>
            <ul>
                <li><a href="">Erasmus Darwin</a></li>
                <li><a href="">Lamarck</a></li>
                <li><a href="">Charles Darwin</a></li>
                <li><a href="">Wallace</a></li>
                <li><a href="">Dawkins</a></li>
            </ul>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div id="content">
            <h2>On the Origin of The Origin</h2>
            <p>Darwin's father was dead set on his son becoming a cleric but even though the young rapscallion began to study theology he found worms much more interesting.</p>
            <p>When a lonely man with a moustache asked Darwin to ride with him on his boat named after a dog, Darwin agreed and set off around the world fiddling with wildlife.</p>
            <p>Some say it was a load of birds from a bunch of islands hundreds of miles off the Ecuadorean coast that inspired his now widely accepted explanation of the mechanism of evolution. "Why does that bird on that island have a beak like that while that finch on that island has a beak like that? AHA! I've got it! Natural Selection!" he thought. It wasn't actually quite like that, but, y'know, it's a fine, popular romantic myth.</p>
            <h2>The Origin</h2>
            <p>Upon return from his jaunt, Charles chronicled his escapades (as <em>The Voyage of the Beagle</em>) and got a bit carried away with barnacles, although his theory of evolution was always ticking away in the back of his mind.</p>
            <p>Some 20 or so year after he returned to England, a Welsh naturalist by the name of Wallace popped up with a similar idea to Darwin's grand theory. Darwin got a move on.</p>
            <p>In 1858 a paper jointly attributed to Darwin and Wallace was presented to the Linnean Society of London that sent rumbles across the establishment and really ticked off a fair few people. The next year saw the publication of Darwin's 500-page "abstract" - <em>On The Origin of Species by Means of Natural Selection or the Preservation of Favoured Races In The Struggle For Life</em> (or <abbr>OTOOSBMONSOTPOFRITSFL</abbr> for short).</p>
            <p>Darwin, already a prominent arc in scientific circles, was propelled into megastardom.</p>
            <h2>After The Origin</h2>
            <p>Chuck D revised The Origin five times, toning down each one a bit more than the one before it, partly to appease his religious wife. Who also happened to be his cousin. But some years later he'd had enough of trying to disguise the logical conclusion that humans are descended from the same common ancestor as all other animals and his third classic, <em>The Descent of Man</em>, was published and <em>really</em> pissed off the religious establishment.</p>
        </div>
        <div id="footer">
            <p>Content is © Copyright Patrick Griffiths.</p>
            <p>This page is valid HTML5.</p>
        </div>
    </body>
    </html>
    찰스 다윈 (Charles Darwin) : 이전 예제의 기본 원리를 스타일 업 한 버전입니다.
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Charles Darwin</title>
        <style>
            body {
                font: 80% arial, helvetica, sans-serif;
                background: #ccc url(./img/lizards2.gif);
                margin: 0;
            }
            
            .accessaid, h1 {
                position: absolute;
                height: 0;
                overflow: hidden;
            }
            
            #header {
                background: #036 url(./img/charlesdarwin.gif);
                height: 60px;
            }
            
            #navigation {
                position: absolute;
                top: 60px;
                margin-top: 0.5em;
                left: 0;
                width: 134px;
            }
            
            #navigation ul {
                margin: 0 0 1em 0;
                padding: 0;
                list-style: none;
            }
            
            #navigation ul a {
                color: white;
                text-decoration: none;
                display: block;
                background: #17a;
                border-left: 3px solid #28b;
                padding: 0 0.5em;
                margin: 0 1em 3px 1em;
            }
            
            #navigation a:visited {
                color: #ccc;
            }
            
            #navigation a:hover {
                background: #39c;
                border-color: white;
            }
            
            #content {
                border-left: 134px solid #069;
                background: white url(./img/lizards.gif) repeat-y;
                padding: 1px 20px 1em 40px;
            }
            h2 {
                font-size: 1.5em;
                color: #036;
            }
            
            h3 {
                font-size: 1.25em;
                color: #036;
            }
            
            #content img {
                width: 100px;
                height: 150px;
                padding: 1px;
                border: 1px solid #333;
                float: right;
                margin: 0 0 1em 1em;
            }
            
            #container {
                position: relative;
                width: 580px;
                border: solid #036;
                border-width: 0 3px;
                margin: auto;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="header">
                <h1>Charles Darwin</h1>
            </div>
            <div id="navigation">
                <p><a href="#content" class="accessaid">Skip navigation</a></p>
                <ul>
                    <li><a href="">Biology</a></li>
                    <li><a href="">Evolution</a></li>
                    <li><a href="">Natural Selection</a></li>
                    <li><a href="">Genetics</a></li>
                </ul>
                <ul>
                    <li><a href="">Erasmus Darwin</a></li>
                    <li><a href="">Lamarck</a></li>
                    <li><a href="">Charles Darwin</a></li>
                    <li><a href="">Wallace</a></li>
                    <li><a href="">Dawkins</a></li>
                </ul>
                <ul>
                    <li><a href="">Home</a></li>
                    <li><a href="">About</a></li>
                    <li><a href="">Contact Us</a></li>
                    <li><a href="">Site map</a></li>
                </ul>
            </div>
            <div id="content">
                <h2>On the Origin of The Origin</h2>
                <p><img src="./img/darwin.jpg" alt="Darwin">Darwin's father was dead set on his son becoming a cleric but even though the young rapscallion began to study theology he found worms much more interesting.</p>
                <p>When a lonely man with a moustache asked Darwin to ride with him on his boat named after a dog, Darwin agreed and set off around the world fiddling with wildlife.</p>
                <p>Some say it was a load of birds from a bunch of islands hundreds of miles off the Ecuadorean coast that inspired his now widely accepted explanation of the mechanism of evolution. "Why does that bird on that island have a beak like that while that finch on that island has a beak like that? AHA! I've got it! Natural Selection!" he thought. It wasn't actually quite like that, but, y'know, it's a fine, popular romantic myth.</p>
                <h2>The Origin</h2>
                <p>Upon return from his jaunt, Charles chronicled his escapades (as <em>The Voyage of the Beagle</em>) and got a bit carried away with barnacles, although his theory of evolution was always ticking away in the back of his mind.</p>
                <p>Some 20 or so year after he returned to England, a Welsh naturalist by the name of Wallace popped up with a similar idea to Darwin's grand theory. Darwin got a move on.</p>
                <p>In 1858 a paper jointly attributed to Darwin and Wallace was presented to the Linnean Society of London that sent rumbles across the establishment and really ticked off a fair few people. The next year saw the publication of Darwin's 500-page "abstract" - <em>On The Origin of Species by Means of Natural Selection or the Preservation of Favoured Races In The Struggle For Life</em> (or <abbr>OTOOSBMONSOTPOFRITSFL</abbr> for short).</p>
                <p>Darwin, already a prominent arc in scientific circles, was propelled into megastardom.</p>
                <h2>After The Origin</h2>
                <p>Chuck D revised The Origin five times, toning down each one a bit more than the one before it, partly to appease his religious wife. Who also happened to be his cousin. But some years later he'd had enough of trying to disguise the logical conclusion that humans are descended from the same common ancestor as all other animals and his third classic, <em>The Descent of Man</em>, was published and <em>really</em> pissed off the religious establishment.</p>
            </div>
        </div>
    </body>
    </html>
    2D Transforms : 변형 속성을 사용하여 상자의 크기, 모양 및 위치 조작
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>2D Transforms</title>
        <style>
            body {
                font: 15px/1.5 helvetica, arial, sans-serif;
                background: #333;
                color: #ccc;
                margin: 50px 0 50px 50px;
            }
            a, code { color: #fff }
            p { margin-bottom: 50px }
        
            pre, #htmldog {
                float: left;
                height: 300px;
                width: 300px;
                background-color: #666;
                margin: 0 50px 50px 0;
                white-space: normal;
            }
            pre code {
                display: block;
                height: 260px;
                background: rgba(255,204,000,.7);
                padding: 20px;
            }
            #c0 {
                -webkit-transform: none; /* for some older browsers */
                -ms-transform: none; /* for IE9 */
                transform: none; /* default, obvs */
            }
            #c1 {
                -webkit-transform: rotate(10deg);
                -ms-transform: rotate(10deg);
                transform: rotate(10deg);
            }
            #c2 {
                -webkit-transform: skewX(10deg);
                -ms-transform: skewX(10deg);
                transform: skewX(10deg);
            }
            #c3 {
                -webkit-transform: skewY(-10deg);
                -ms-transform: skewY(-10deg);
                transform: skewY(-10deg);
            }
            #c4 {
                -webkit-transform: skew(10deg, -10deg);
                -ms-transform: skew(10deg, -10deg);
                transform: skew(10deg, -10deg);
            }
            #c5 {
                -webkit-transform: scale(0.8);
                -ms-transform: scale(0.8);
                transform: scale(0.8);
            }
            #c6 {
                -webkit-transform: scale(0.8, 1.2);
                -ms-transform: scale(0.8, 1.2);
                transform: scale(0.8, 1.2);
            }
            #c7 {
                -webkit-transform: translate(25px, 10px);
                -ms-transform: translate(25px, 10px);
                transform: translate(25px, 10px);
            }
            #c8 {
                -webkit-transform: scale(0.8) rotate(10deg) translate(25px, 10px);
                -ms-transform: scale(0.8) rotate(10deg) translate(25px, 10px);
                transform: scale(0.8) rotate(10deg) translate(25px, 10px);
            }
            #c9 {
                -webkit-transform: matrix(0.787846, 0.138919, -0.138919, 0.787846, 18.307, 11.3514);
                -ms-transform: matrix(0.787846, 0.138919, -0.138919, 0.787846, 18.307, 11.3514);
                transform: matrix(0.787846, 0.138919, -0.138919, 0.787846, 18.307, 11.3514);
            }
            #htmlknu a {
                display: block;
                padding: 105px 90px;
                background: rgba(255,204,000,.7);
                -webkit-transform: scale(.8);
                -ms-transform: scale(.8);
                transform: scale(.8);
                transition: .7s transform cubic-bezier(0.5,1.5,0.5,-0.5);
            }
            #htmlknu a:hover {
                -webkit-transform: scale(1);
                -ms-transform: scale(1);
                transform: scale(1);
            }
        </style>
    </head>
    <body>
        <h1>2D Transforms</h1>
        <p>Using the <code>transform</code> CSS property.</p>
        <pre><code id="c0">transform: none;</code></pre>
        <pre><code id="c1">transform: rotate(10deg);</code></pre>
        <pre><code id="c2">transform: skewX(10deg);</code></pre>
        <pre><code id="c3">transform: skewY(-10deg);</code></pre>
        <pre><code id="c4">transform: skew(10deg, -10deg);</code></pre>
        <pre><code id="c5">transform: scale(0.8);</code></pre>
        <pre><code id="c6">transform: scale(0.8, 1.2);</code></pre>
        <pre><code id="c7">transform: translate(25px, 10px);</code></pre>
        <pre><code id="c8">transform: scale(0.8) rotate(10deg) translate(25px, 10px);</code></pre>
        <pre><code id="c9">transform: matrix(0.787846, 0.138919, -0.138919, 0.787846, 18.307, 11.3514);</code></pre>
        <p id="htmlknu"><a href="#"><img src="./img/knulab.png" alt="HTML KNULAB" width="120" height="90"></a></p>
    </body>
    </html>
    Transform origin : 변환이 측정되는 지점을 변경합니다.
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Transform origin</title>
        <style>
            body {
                font: 15px/1.5 helvetica, arial, sans-serif;
                background: #333;
                color: #ccc;
                margin: 50px 0 50px 50px;
            }
            a, code { color: white }
            p { margin-bottom: 50px }
        
            pre, #htmlknu {
                float: left;
                height: 300px;
                width: 300px;
                background-color: #666;
                margin: 0 50px 50px 0;
                white-space: normal;
                position: relative;
            }
            pre code {
                display: block;
                height: 260px;
                background: rgba(255,204,000,.7);
                padding: 20px;
            }
            pre:after {
                content: "";
                position: absolute;
                width: 10px;
                height: 10px;
                background: red;
                border: 5px solid white;
                border-radius: 10px;
                margin: -10px 0 0 -10px;
            }
            #p0 code {
                -webkit-transform: rotate(10deg); /* for some older browsers */
                -webkit-transform-origin: 50% 50%;
                -ms-transform: rotate(10deg); /* for IE9 */
                -ms-transform-origin: 50% 50%;
                transform: rotate(10deg);
                transform-origin: 50% 50%; /* default */
            }
            #p0:after {
                top: 50%;
                left: 50%;
            }
            #p1 code {
                -webkit-transform: rotate(10deg);
                -webkit-transform-origin: top;
                -ms-transform: rotate(10deg);
                -ms-transform-origin: top;
                transform: rotate(10deg);
                transform-origin: top;
            }
            #p1:after {
                top: 0;
                left: 50%;
            }
            #p2 code {
                -webkit-transform: rotate(10deg);
                -webkit-transform-origin: right;
                -ms-transform: rotate(10deg);
                -ms-transform-origin: right;
                transform: rotate(10deg);
                transform-origin: right;
            }
            #p2:after {
                top: 50%;
                right: 0;
                margin: -10px -10px 0 0;
            }
            #p3 code {
                -webkit-transform: rotate(10deg);
                -webkit-transform-origin: right top;
                -ms-transform: rotate(10deg);
                -ms-transform-origin: right top;
                transform: rotate(10deg);
                transform-origin: right top;
            }
            #p3:after {
                top: 0;
                right: 0;
                margin: -10px -10px 0 0;
            }
            #p4 code {
                -webkit-transform: rotate(10deg);
                -webkit-transform-origin: 25% 25%;
                -ms-transform: rotate(10deg);
                -ms-transform-origin: 25% 25%;
                transform: rotate(10deg);
                transform-origin: 25% 25%;
            }
            #p4:after {
                top: 25%;
                left: 25%;
            }
            #p5 code {
                -webkit-transform: rotate(10deg);
                -webkit-transform-origin: -20px 20px;
                -ms-transform: rotate(10deg);
                -ms-transform-origin: -20px 20px;
                transform: rotate(10deg);
                transform-origin: -20px 20px;
            }
            #p5:after {
                top: 20px;
                left: -20px;
            }
            #htmlknu a {
                display: block;
                padding: 105px 90px;
                background: rgba(255,204,000,.7);
                -webkit-transform: rotate(10deg);
                -webkit-transform-origin: 0 0;
                -ms-transform: rotate(10deg);
                -ms-transform-origin: 0 0;
                transform: rotate(10deg);
                transform-origin: 0 0;
                transition: 1s;
            }
            #htmlknu a:hover {
                -webkit-transform: rotate(-10deg);
                -webkit-transform-origin: right top;
                -ms-transform: rotate(-10deg);
                -ms-transform-origin: right top;
                transform: rotate(-10deg);
                transform-origin: right top;
            }
        </style>
    </head>
    <body>
        <h1>Transform origin</h1>
        <p>Using the <code>transform-origin</code> CSS property to alter the point at which transformations are measured from. Using a rotated 2D transformation as an example.</p>
        <pre id="p0"><code id="c0">transform: rotate(10deg);
    transform-origin: 50% 50%;
    /* default */</code></pre>
        <pre id="p1"><code id="c1">transform: rotate(10deg);
    transform-origin: top;</code></pre>
        <pre id="p2"><code id="c2">transform: rotate(10deg);
    transform-origin: right;</code></pre>
        <pre id="p3"><code id="c3">transform: rotate(10deg);
    transform-origin: right top;</code></pre>
        <pre id="p4"><code id="c4">transform: rotate(10deg);
    transform-origin: 25% 25%;</code></pre>
        <pre id="p5"><code id="c5">transform: rotate(10deg);
    transform-origin: -20px 20px;</code></pre>
        <p id="htmlknu"><a href="#"><img src="./img/knulab.png" alt="HTML KNULAB" width="120" height="118"></a></p>
    </body>
    </html>