<!--
1. 전체 background를 이미지(img_tree.png)는 한번 조회되고
이미지는 top left 에 위치, div는 이미지를 제외한 영역의 80%를 차지하고
div의 양옆의 margin은 10%씩 할당시키시오 사용 컬러(#d0f0f6)
6. 아래 그림처럼 스타일을 적용하시오. (적용색상: gray)
-->
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-image:url('img_tree.png');
margin-left:250px;
background-repeat:no-repeat;
background-position:top left;
}
.center_div{
border: 1px solid gray;
margin-right: 10%;
margin-left: 10%;
background-color:#d0f0f6;
size: 80%;
text-align: left;
padding: 8px;
}
div{
border: 2px solid gray;
width:320px;
padding: 10px;
margin: 0;
}
</style>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div class="center_div">
<h1>1번 - Hello World!</h1>
<p>This example contains some advanced CSS methods you may nothave learned yet. But,
we will explain these methods in alater chapter in the tutorial.</p>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2>6번 - Calculate the totalwidth:</h2>
<img src="flower_big.jpg"width="350" height="263" alt="flower">
<div>The picture above is350px wide. The total width of this element is also 350px.</div>
</body>
</html>
-----------------------------
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<style>
/*2. <h1>의 배경색은 lightblue, 넓이는 300px,padding은없고 margin은 right/left에만 동일하게 부여하시오*/
div{
border: 1px solid gray;
width: 300px;
margin-right: 10%;
margin-left: 10%;
}
h1{
background-color: lightblue;
width: 300px;
margin: auto;
}
/*3. div2 에 Text가 아래 그림처럼 브라우저의 size가 변경되더라도 가로 400px, 세로 100px 영역 이상 커지지 않도록 스타일을 적용하시오 (적용색상: powderblue)*/
div2{
display: block;
max-width: 400px;
min-height:100px;
background-color: powderblue;
}
/*4. 두개의 div는 모두 width가 300px이다. 하단의 div의 총 요소의 넓이를 350px로 만드시오(적용색상:yellow, lightblue)*/
.ex1{
display: block;
width:300px;
background-color: yellow;
}
.ex2{
display: block;
width:300px;
padding: 25px;
background-color: lightblue;
}
/*5. 그림처럼 스타일을 적용하시오. (적용색상: lightgrey, green)*/
div4{
display: inline-block;
border: 10px solid green;
background-color: lightgrey;
padding: 50px;
margin: 20px;
}
/*6. 그림처럼 스타일을 적용하시오. (적용색상: gray)*/
</style>
<body>
<div>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</div>
<h2>Set the max-width andmin-width of an element</h2>
<p>Resize the browser windowto see the effect.</p>
<div2>This is some text. Thisis some text. This is some text.
This is some text. This is sometext. This is some text.
This is some text. This is sometext. This is some text.</div2>
<h2>Padding and elementwidth</h2>
<div3 class="ex1">This div is 300px wide.</div3>
<br>
<div3 class="ex2">The width of this div is 350px, even though it isdefined as 300px in the CSS.</div3>
<h2>Demonstrating the BoxModel</h2>
<p>The CSS box model isessentially a box
that wraps around every HTMLelement.
It consists of: borders, padding,
margins, and the actualcontent.</p>
<div4>This text is the contentof the box. We have added a 50px padding, 20px margin and a 15px green border.
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.</div4>
</body>
</html>
