6-1.html
실습문제_6-1.pdf
<!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>
.container{
border: 1px solid #ccc;
width: 500px;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>최신 웹 디자인 트렌드</h1>
<p>반응형 웹 디자인-다양한 화면 크기에 최적화 하다</p>
<p>플랫 디자인- 입체에서 평면으로</p>
<p>풀 스크린 배경 - 콘텐츠에 집중</p>
<p>원 페이지 사이트- 한 페이지에 모든 내용을 담다</p>
<p>패럴렉스 스크롤링 - 동적인 효과로 강한 인상을!</p>
<p>웹 폰트 - 웹 타이포그래피를 받쳐주는 기술</p>
</div>
</body>
</html>
6-2.html
실습문제_6-2.pdf
<!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>
.container{
border: 1px solid #ccc;
width: 500px;
padding: 10px;
}
.bigtxt{
font-weight: 700;
font-size: larger;
}
</style>
</head>
<body>
<div class="container">
<h1>최신 웹 디자인 트렌드</h1>
<ul>
<li><span class="bigtxt">반응형 웹 디자인</span>-다양한 화면 크기에 최적화 하다</li>
<li><span class="bigtxt">플랫 디자인</span>- 입체에서 평면으로</li>
<li><span class="bigtxt">풀 스크린 배경</span> - 콘텐츠에 집중</li>
<li><span class="bigtxt">원 페이지 사이트</span>- 한 페이지에 모든 내용을 담다</li>
<li><span class="bigtxt">패럴렉스 스크롤링</span> - 동적인 효과로 강한 인상을!</li>
<li><span class="bigtxt">웹 폰트</span> - 웹 타이포그래피를 받쳐주는 기술</li>
</ul>
</div>
</body>
</html>
실습문제_6-3.pdf
<!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>
.container{
border: 1px solid #ccc;
width: 500px;
padding: 10px;
}
.bigtxt{
font-weight: 700;
font-size: larger;
color: #ad3000;
}
ul{
list-style-type: none;
}
li{
line-height: 2.0;
}
</style>
</head>
<body>
<div class="container">
<h1>최신 웹 디자인 트렌드</h1>
<ul>
<li><span class="bigtxt">반응형 웹 디자인</span>-다양한 화면 크기에 최적화 하다</li>
<li><span class="bigtxt">플랫 디자인</span>- 입체에서 평면으로</li>
<li><span class="bigtxt">풀 스크린 배경</span> - 콘텐츠에 집중</li>
<li><span class="bigtxt">원 페이지 사이트</span>- 한 페이지에 모든 내용을 담다</li>
<li><span class="bigtxt">패럴렉스 스크롤링</span> - 동적인 효과로 강한 인상을!</li>
<li><span class="bigtxt">웹 폰트</span> - 웹 타이포그래피를 받쳐주는 기술</li>
</ul>
</div>
</body>
</html>