<!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>설립목적</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "맑은 고딕";
font-size: 16px;
line-height: 1.5;
color: #000;
}
table {
border-collapse: collapse;
}
#wrap {
margin: 0px auto;
padding: 50px;
width: 1000px;
/* height: 465px; */
background-color: #eee;
}
#wrap h1 {
font-size: 40px;
color: #017eba;
}
#wrap p {
margin: 15px 0px 20px;
padding: 10px 20px;
color: #fff;
background-color: #017eba;
}
/* #wrap p::before {
content: "글자";
}
#wrap h2::after{
content: " 내가 넣은 글자";
} */
/* .desc {
clear: both; // float:left, right를 해제
overflow: auto;
} */
.desc::after {
content: "";
display: block;
clear: both;
}
.imgBox {
width: 300px;
float: left;
}
.contents {
width: 560px;
float: right;
}
.contents ul {
padding: 10px 0px 0px 20px;
}
</style>
</head>
<body>
<div id="wrap">
<h1>설립목적</h1>
<p>
K-water는 수자원을 종합적으로 개발, 관리하여 생활용수 등의 공급을 원활하게 하고
수질을 개선함으로써 국민 생활의 향상과 공공복리의 증진에 이바지함을 목적으로 하는 공기업입니다.
</p>
<div class="desc">
<div class="imgBox">
<img src="./images/kwater.jpg" alt="K-water 이미지">
</div>
<div class="contents">
<h2>임무와 역할</h2>
<ul>
<li>수자원의 종합적인 시설의 건설운영관리</li>
<li>광역상수도(공업용수도 포함)시설의 건설관리</li>
<li>산업단지 및 특수지역 개발</li>
<li>지방상하수도 수탁 운영</li>
<li>신재생에너지 설비의 설치운영관리 등</li>
</ul>
</div> <!-- contents end -->
</div> <!-- desc end -->
</div> <!-- wrap end -->
</body>
</html>
Engineering is the closest thing to magic that exists in the world.