페이지 레이아웃 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>
