CSS
9. Position
실습 8. 연습2
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
<style>
aside {
width: 200px;
position: fixed;
left: 70px;
top: 80px;
}
aside nav ul {
width: 150px;
margin: 10px 0;
}
aside nav ul li {
background: #123456;
margin: 2px 0;
padding: 5px;
font-size: 16px;
font-weight: bold;
}
aside nav ul li a {
text-decoration: none;
color: #fff;
}
aside nav ul li a:hover {
background: #456789;
}
.content {
width: 70%;
background: #ccc;
height: 1000px;
margin-left: 30%;
padding: 20px;
line-height: 1.4;
text-indent: 10px;
}
footer {
background: #000;
padding: 40px 20px;
}
footer address {
font-size: 20px;
color: #fff;
}
</style>
</head>
<body>
<aside>
<nav>
<ul>
<li><a href="#">COMPANY</a></li>
<li><a href="#">PRODUCT</a></li>
<li><a href="#">SERVICE</a></li>
<li><a href="#">COMMUNITY</a></li>
</ul>
</nav>
</aside>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et elementum ipsum. Sed quis risus justo.
Mauris pretium, ligula vitae molestie feugiat, quam turpis vestibulum sapien, quis bibendum augue sem eu ipsum.
Nullam lorem diam, imperdiet ultricies erat et, tristique consectetur massa. Etiam luctus libero id volutpat
imperdiet. Maecenas a luctus lacus. Morbi auctor pharetra ante tincidunt lobortis.
<br>
Suspendisse eu commodo elit. Suspendisse vel sem sit amet risus consequat ornare. Nam eleifend neque sagittis
volutpat scelerisque. Morbi placerat justo at tristique ullamcorper. Integer tellus augue, commodo nec orci in,
vulputate hendrerit justo. Pellentesque sed ante sit amet nibh molestie tincidunt sit amet id orci. Curabitur
dictum est faucibus ante posuere efficitur.
<br>
Etiam non justo in nulla posuere aliquam quis a felis. Vestibulum laoreet felis vitae purus feugiat, et
efficitur velit vulputate. Nam sed nibh maximus, scelerisque sem at, ultricies ex. Sed ut justo risus. Cras
sapien justo, fringilla sit amet ex non, pulvinar vulputate leo. Donec tristique, sapien id lobortis
scelerisque, nibh neque posuere mi, et tempor tortor libero id tortor. Phasellus volutpat libero at urna
scelerisque, vel vulputate nisl maximus. Suspendisse potenti. Quisque elit nibh, blandit sed ultricies vitae,
bibendum aliquam ipsum. Cras quis mauris posuere, auctor nulla sed, tincidunt nibh. Curabitur scelerisque
pulvinar scelerisque.
<br>
Quisque in mi nec turpis venenatis scelerisque. Nunc pellentesque a ipsum id consectetur. Ut ut turpis mi.
Suspendisse eu libero mauris. Integer lobortis feugiat purus nec venenatis. Curabitur facilisis tortor lorem,
eget elementum sapien hendrerit a. Sed elementum, quam sed ullamcorper porttitor, odio nibh tincidunt velit,
varius venenatis tortor est vitae nulla.
<br>
Pellentesque facilisis quam ut magna egestas, ac egestas erat finibus. Fusce sollicitudin mauris in scelerisque
egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo leo a porta aliquam. Ut ut
arcu venenatis, iaculis massa vel, lacinia tellus. Duis gravida ultrices mattis. In sit amet venenatis nisi,
quis dapibus metus. Suspendisse potenti. Mauris sodales dolor velit. Vestibulum dignissim tincidunt accumsan.
Vestibulum at elit ac magna tristique varius et sit amet augue. Integer purus mi, laoreet lobortis lectus vel,
elementum blandit massa. Donec at elit at nisl posuere posuere.
</div>
<footer>
<address>Copyright Allright Reserved</address>
</footer>
</body>
</html>
실습 9. 연습 3
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
<style>
body {
background-image: url(./images/bg.png);
}
header .logo {
margin: 20px auto;
text-align: center;
}
.menu {
background: black;
text-align: center;
}
.menu li {
display: inline-block;
padding: 20px;
}
.menu li:hover {
background: #4d4d4d;
}
.menu li a {
text-decoration: none;
color: #fff;
font-size: 20px;
font-weight: bold;
}
.slider {
background: #fff;
}
.slider ul {
width: 75%;
margin: 0 auto;
}
.slider ul li {
width: 25%;
box-sizing: border-box;
float: left;
text-align: center;
margin: 40px 0;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
.top {
width: 50px;
height: 50px;
background: #c13333;
position: fixed;
right: 0;
top: 0;
text-align: center;
line-height: 50px;
}
.top a {
color: #fff;
text-decoration: none;
}
section {
width: 700px;
margin: 0 auto;
position: relative;
}
section .left {
position: absolute;
top: 0;
left: -240px;
}
section .right {
position: absolute;
top: 0;
right: -240px;
}
</style>
</head>
<body>
<header>
<div class="logo">
<img src="./images/logo.jpg" alt="로고">
</div>
<nav>
<ul class="menu">
<li><a href="#">메뉴 1</a></li>
<li><a href="#">메뉴 2</a></li>
<li><a href="#">메뉴 3</a></li>
<li><a href="#">메뉴 4</a></li>
</ul>
</nav>
</header>
<article class="slider">
<ul class="clearfix">
<li><img src="./images/item01.png" alt="item01"><br>iPhone</li>
<li><img src="./images/item02.png" alt="item02"><br>iPod</li>
<li><img src="./images/item03.png" alt="item03"><br>iPad</li>
<li><img src="./images/item04.png" alt="item04"><br>iMac</li>
</ul>
</article>
<section>
<div class="content">
<img src="./images/ipad.jpg" alt="iPad">
</div>
<aside class="left">
<img src="./images/side01.png" alt="side01">
<br><br>
<img src="./images/side02.png" alt="side02">
</aside>
<aside class="right">
<img src="./images/side03.png" alt="side03">
<br><br>
<img src="./images/side04.png" alt="side04">
</aside>
</section>
<div class="top">
<a href="#">TOP</a>
</div>
</body>
</html>
실습 10. stack-order
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container .box {
position: relative;
width: 100px;
height: 100px;
background: tomato;
border: 4px dashed black;
font-size: 30px;
margin-right: -30px;
float: left;
}
.box1 {
z-index: 0;
}
.box2 {
z-index: -200;
}
.box3 {
z-index: 100;
}
.box4 {
z-index: 10;
}
.box5 {
z-index: 10;
}
</style>
</head>
<body>
<div class="container">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="box box5">5</div>
</div>
</body>
</html>
실습 11. 실습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
width: 600px;
margin: 100px auto 0;
}
.container .box {
position: relative;
width: 100px;
height: 100px;
background: tomato;
border: 4px dashed yellow;
border-radius: 10px;
font-size: 30px;
margin-right: -30px;
text-align: center;
line-height: 100px;
float: left;
transition: 0.5s;
}
.container .box:hover {
background: yellowgreen;
border-color: red;
z-index: 10;
transform: translateY(-20px);
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="box box5">5</div>
</div>
</body>
</html>
