연습12
<!DOCTYPE html>
<html lang="en">
<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>
.box{
border-width : 10px 5px;
border-style : dashed;
border-color: black;
border-radius: 50px 50px 50px 50px;
}
</style>
</head>
<body>
<div class="box">
<h1>Lorem ipsum dolor amet</h1>
</div>
</body>
</html>연습13
<!DOCTYPE html>
<html lang="en">
<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>
.box{
width: 100px;
height: 100px;
border-width: 2px;
border-style: dashed;
border-color : balck;
border-radius : 50px;
text-align:center;
line-height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
<h1>test</h1>
</div>
</body>
</html>연습14
<!DOCTYPE html>
<html lang="en">
<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>
#box{
display: inline-block;
background-color: red;
width: 100px; height: 50px;
margin:10px;
}
</style>
</head>
<body>
<p>의미 없는 더미 객체</p>
<span>더미 객체</span>
<div id="box">대상 객체</div>
<span>더미 객체</span>
</body>
</html>배경이미지 삽입과 크기 조정
1.배경이미지와 작성할 페이지를 같은 폴더에 넣기
2.배경 이미지 1개 삽입하기
연습15
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color: #E7E7E8;
background-image: url('hanbit/BackgroundFront.png'),url('hanbit/BackgroundBack.png');
background-size: 100%;
background-repeat: no-repeat;
background-attachment:fixed;
background-position: 0px 50%;
}
</style>
</head>
<body>
<p>What is Lorem Ipsum?</p>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
<p>when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
<p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,</p>
<p>and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</body>
</html>
연습16
<!DOCTYPE html>
<html lang="en">
<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>
.font_big{font-size: 2em;}
.font_italic{font-size: initial;}
.font_bold{font-weight: bold;}
.font_center{text-align: center;}
.button{
width: 150px;
height: 70px;
background-color: #FF6A00;
border: 10px solid #FFFFFF;
border-radius: 30px;
box-shadow: 5px 5px 5px #a9a9a9;
}
.button> a{
display: block;
line-height: 70px;
}
</style>
</head>
<body>
<div class="button">
<a href="#" class="font_big font_italic font_bold font_center">Click</a>
</div>
</body>
</html>연습17
<!DOCTYPE html>
<html lang="en">
<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>
.box{
width: 100px; height: 100px;
position:absolute; /*
없애면 3개가 나옴*/
}
.box:nth-child(1){background-color: red;}
.box:nth-child(2){background-color: green;}
.box:nth-child(3){background-color: blue;}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>연습18
<!DOCTYPE html>
<html lang="en">
<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>
.box{
width: 100px; height: 100px;
position:absolute; /*
없애면 3개가 나옴*/
}
.box:nth-child(1){background-color: red;
left: 10px; top: 10px;}
.box:nth-child(2){background-color: green;
left: 50px; top: 50px;}
.box:nth-child(3){background-color: blue;
left: 90px; top: 90px;}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>연습19
<!DOCTYPE html>
<html lang="en">
<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>
.box{
width: 100px; height: 100px;
position:absolute; /*
없애면 3개가 나옴*/
}
.box:nth-child(1){background-color: red;
left: 10px; top: 10px;
z-index: 100;}
.box:nth-child(2){background-color: green;
left: 50px; top: 50px;
z-index: 10;}
.box:nth-child(3){background-color: blue;
left: 90px; top: 90px;
z-index: 1;}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<h1>Lorem ipsum dolor amet</h1>
</body>
</html>연습20
<!DOCTYPE html>
<html lang="en">
<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>
body > div{
width: 400px; height: 100px;
border: 3px solid black;
position: relative;
overflow-y: hidden;
}
.box{
width: 100px;
height: 100px;
position:absolute; /*없애면 3개가 나옴*/
}
.box:nth-child(1){background-color: red;
left: 10px;
top: 10px;
z-index: 100;
}
.box:nth-child(2){background-color: green;
left: 50px;
top: 50px;
z-index: 10;
}
.box:nth-child(3){background-color: blue;
left: 90px;
top: 90px;
z-index: 1;
}
</style>
</head>
<body>
<div>
<h1>Lorem ipsum dolor amet</h1>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<h1>Lorem ipsum dolor amet</h1>
</div>
</body>
</html>연습21
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
</body>
</html>연습22
<!DOCTYPE html>
<html lang="en">
<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>
img{
float: left;
}
</style>
</head>
<body>
<img src="hanbit/hanbit.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p>
<p>eiusmod tempor incididunt ut labore et dolore magna aliqua.
eiusmod tempor incididunt ut labore et dolore magna aliqua.
eiusmod tempor incididunt ut labore et dolore magna aliqua.
eiusmod tempor incididunt ut labore et dolore magna aliqua.
eiusmod tempor incididunt ut labore et dolore magna aliqua.
eiusmod tempor incididunt ut labore et dolore magna aliqua.
eiusmod tempor incididunt ut labore et dolore magna aliqua.
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</body>
</html>연습23
<!DOCTYPE html>
<html lang="en">
<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>
.box{
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
padding: 10px;
/* 태그를 왼쪽으로 붙입니다 float는 기억하기.*/
float: left;
}
.nobox{
clear: both; /* float를 빼는 것*/
width: 400px; height: 400px;
background-color: green;
}
</style>
</head>
<body>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="nobox">3</div>
<div class="nobox">4</div>
</body>
</html>Share article
