7장 다양한 레이아웃의 구성과 기능
응용 예제 7-1 수평 정렬 레이아웃
219페이지
코드 7-1 example_1.html
<!DOCTYPE html>
<html>
<head>
<title>Float With Overflow</title>
<style>
div.container {
overflow: hidden;
}
div.item {
float: left;
margin: 0 3px;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
<div class="item">메뉴 - 1</div>
<div class="item">메뉴 - 2</div>
<div class="item">메뉴 - 3</div>
<div class="item">메뉴 - 4</div>
</div>
</body>
</html>
응용 예제 7-2 중앙 정렬 레이아웃
223페이지
이 사이트는 너비가 좁으므로 결과를 쉽게 확인할 수 있게, 너비를 400px로 지정했습니다.
코드 7-2 example_2.html
<!DOCTYPE html>
<html>
<head>
<title>Margin Width</title>
<style>
/* 초기화 */
* { margin: 0; padding: 0; }
/* 주제 */
body {
margin: 0 auto;
width: 400px;
}
</style>
</head>
<body>
<h1>Lorem ipsum</h1>
<h2>Neque porro quisquam est qui...</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consequat vehicula erat vel hendrerit. Etiam in est dolor, non pretium justo. Aliquam eu ipsum diam, sed dictum ante. Nunc pellentesque semper cursus. Nam aliquet consequat sapien id porttitor. Proin quis pharetra urna. Nam risus arcu, tincidunt quis imperdiet in, ullamcorper in sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur vestibulum enim gravida sapien vehicula id consectetur ipsum gravida. Nulla porta consequat velit vitae elementum.</p>
<p>Nullam neque quam, blandit eget venenatis at, viverra vitae metus. Pellentesque quis ligula turpis. Nulla at justo est, id egestas mauris. Phasellus nec nunc egestas magna iaculis rhoncus. Praesent ut risus tellus. Ut pretium hendrerit vehicula. Donec id felis quis neque ornare facilisis. Praesent dictum orci quis metus vestibulum vitae vulputate sapien luctus. Aliquam pellentesque urna id nunc aliquam aliquam quis sed nunc. Sed rhoncus accumsan dolor, ut interdum quam ultricies in. Morbi venenatis nisi a nunc porta tempus. Vestibulum hendrerit posuere consequat. Nam eleifend malesuada est at dictum. Mauris sit amet nisi lobortis dolor consequat ullamcorper.</p>
</body>
</html>
응용 예제 7-3 One True 레이아웃
225페이지
코드 7-3 example_3.html
<!DOCTYPE html>
<html>
<head>
<title>One True Layout</title>
<style>
body {
width: 500px;
margin: 10px auto;
}
#middle { overflow: hidden; }
#left { float: left; width: 150px; background: red; }
#right { float: left; width: 350px; background: blue; }
#top { background: green; }
#bottom { background: purple; }
</style>
</head>
<body>
<div id="top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elit elit, ornare non elementum ut, imperdiet nec felis. Proin leo felis, congue vitae facilisis id, ullamcorper vitae ipsum.</div>
<div id="middle">
<div id="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elit elit, ornare non elementum ut.</div>
<div id="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elit elit, ornare non elementum ut, imperdiet nec felis. Proin leo felis, congue vitae facilisis id, ullamcorper vitae ipsum. Integer a risus sed libero imperdiet lacinia vel vel massa. Vestibulum tempus ullamcorper tellus vitae gravida. Donec cursus, enim at porta auctor, purus sapien luctus erat, vitae placerat ante nibh eget lectus. Integer a leo sit amet neque suscipit commodo sed et mauris. Nullam a turpis nunc. Ut metus risus, scelerisque ac dignissim non, faucibus ac metus.</div>
</div>
<div id="bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elit elit, ornare non elementum ut, imperdiet nec felis. Proin leo felis, congue vitae facilisis id, ullamcorper vitae ipsum.</div>
</body>
</html>
응용 예제 7-4 절대 위치를 사용해 요소 배치
229페이지
코드 7-4 example_4.html
<!DOCTYPE html>
<html>
<head>
<title>Absolute Position</title>
<style>
#container {
width: 500px; height: 300px;
border: 3px solid black;
overflow: hidden;
position: relative;
}
.circle {
position: absolute;
width: 100px; height: 100px;
border-radius: 50% 50%;
}
#red {
background: red;
left: 20px; top: 20px;
}
#green {
background: green;
right: 20px; top: 20px;
}
#blue {
background: blue;
right: 20px; bottom: 20px;
}
#yellow {
background: yellow;
left: 20px; bottom: 20px;
}
</style>
</head>
<body>
<h1>Dummy Text</h1>
<div id="container">
<div id="red" class="circle"></div>
<div id="green" class="circle"></div>
<div id="blue" class="circle"></div>
<div id="yellow" class="circle"></div>
</div>
<h1>Dummy Text</h1>
</body>
</html>
응용 예제 7-5 요소 중앙 배치
231페이지
코드 7-5 example_5.html
<!DOCTYPE html>
<html>
<head>
<title>Absolute Position</title>
<style>
/* 초기화 */
* { margin: 0; padding: 0; }
/* 주제 */
body { background: red; }
#container {
/* 색상 및 크기 적용 */
width: 500px; height: 250px;
background: orange;
/* 위치 설정 */
position: absolute;
left: 50%; top: 50%;
margin-left: -250px;
margin-top: -125px;
}
</style>
</head>
<body>
<div id="container">
<h1>요소의 중앙 배치</h1>
</div>
</body>
</html>
응용 예제 7-6 고정 바 배치
233페이지
코드 7-6 example_6.html
<!DOCTYPE html>
<html>
<head>
<title>Fixed Bar</title>
<style>
.container {
margin-top: 50px;
margin-left: 50px;
}
.top_bar {
background: red;
position: fixed;
left: 0; top: 0; right: 0;
height: 50px;
}
.left_bar {
background: blue;
position: fixed;
left: 0; top: 50px; bottom: 0;
width: 50px;
}
</style>
</head>
<body>
<div class="top_bar"></div>
<div class="left_bar"></div>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elit elit, ornare non elementum ut, imperdiet nec felis. Proin leo felis, congue vitae facilisis id, ullamcorper vitae ipsum. Integer a risus sed libero imperdiet lacinia vel vel massa. Vestibulum tempus ullamcorper tellus vitae gravida. Donec cursus, enim at porta auctor, purus sapien luctus erat, vitae placerat ante nibh eget lectus. Integer a leo sit amet neque suscipit commodo sed et mauris. Nullam a turpis nunc. Ut metus risus, scelerisque ac dignissim non, faucibus ac metus. Vivamus molestie ultrices luctus. Cras pellentesque malesuada magna interdum feugiat. Nam condimentum massa et lectus elementum ac congue nibh mollis. Proin adipiscing nisi et neque fermentum ornare.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elit elit, ornare non elementum ut, imperdiet nec felis. Proin leo felis, congue vitae facilisis id, ullamcorper vitae ipsum. Integer a risus sed libero imperdiet lacinia vel vel massa. Vestibulum tempus ullamcorper tellus vitae gravida. Donec cursus, enim at porta auctor, purus sapien luctus erat, vitae placerat ante nibh eget lectus. Integer a leo sit amet neque suscipit commodo sed et mauris. Nullam a turpis nunc. Ut metus risus, scelerisque ac dignissim non, faucibus ac metus. Vivamus molestie ultrices luctus. Cras pellentesque malesuada magna interdum feugiat. Nam condimentum massa et lectus elementum ac congue nibh mollis. Proin adipiscing nisi et neque fermentum ornare.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elit elit, ornare non elementum ut, imperdiet nec felis. Proin leo felis, congue vitae facilisis id, ullamcorper vitae ipsum. Integer a risus sed libero imperdiet lacinia vel vel massa. Vestibulum tempus ullamcorper tellus vitae gravida. Donec cursus, enim at porta auctor, purus sapien luctus erat, vitae placerat ante nibh eget lectus. Integer a leo sit amet neque suscipit commodo sed et mauris. Nullam a turpis nunc. Ut metus risus, scelerisque ac dignissim non, faucibus ac metus. Vivamus molestie ultrices luctus. Cras pellentesque malesuada magna interdum feugiat. Nam condimentum massa et lectus elementum ac congue nibh mollis. Proin adipiscing nisi et neque fermentum ornare.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elit elit, ornare non elementum ut, imperdiet nec felis. Proin leo felis, congue vitae facilisis id, ullamcorper vitae ipsum. Integer a risus sed libero imperdiet lacinia vel vel massa. Vestibulum tempus ullamcorper tellus vitae gravida. Donec cursus, enim at porta auctor, purus sapien luctus erat, vitae placerat ante nibh eget lectus. Integer a leo sit amet neque suscipit commodo sed et mauris. Nullam a turpis nunc. Ut metus risus, scelerisque ac dignissim non, faucibus ac metus. Vivamus molestie ultrices luctus. Cras pellentesque malesuada magna interdum feugiat. Nam condimentum massa et lectus elementum ac congue nibh mollis. Proin adipiscing nisi et neque fermentum ornare.</p>
</div>
</body>
</html>
응용 예제 7-7 글자 생략
235페이지
코드 7-7 example_7.html
<!DOCTYPE html>
<html>
<head>
<title>Ellipsis</title>
<style>
h1, p {
width: 300px;
}
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<h1 class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
<p class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>