<!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>
<link rel="stylesheet" href="./css/common.css" type="text/css">
<link rel="stylesheet" href="./css/sample.css" type="text/css">
</head>
<body>
<ul id="list1" class="inner clearfix">
<li>
<h3>about</h3>
<div class="detail">
<p>
미래 주역인 대학생들이 아시아 역사와 문화를 올바르게 이해하고 바람직한 문화 비전을 가지고 아시아 미래상을 만들어 갈 수 있도록 현장체험 및 교육의 기회를 제공하고 있습니다.
</p>
<a href="#">자세히보기</a>
</div>
</li>
<li>
<h3>program</h3>
<div class="detail">
<p>
문화행사, 자원봉사, 리더십 교육, 다양한 온오프라인 모임 등을 통해 대원들은 지속적인 네트워크를 형성하고 교류하며 관계의 폭을 넓히게 됩니다.
</p>
<a href="#">자세히보기</a>
</div>
</li>
<li>
<h3>history</h3>
<div class="detail">
<p>
매년 새로운 주제와 그에 따른 스토리텔링을 토대로 현지 문화를 탐방하며 역사, 사회, 문화 등에 대한 인문적 지식을 쌓고 사유의 폭을 넓히며 이를 바탕으로 창의적으로 사고할 수 있는 힘을 기르게 됩니다.
</p>
<a href="#">자세히보기</a>
</div>
</li>
</ul>
<hr>
<ul id="list2" class="inner clearfix">
<li>
<img src="./images/img1.jpg" alt="img1 image">
<h3>about</h3>
<p class="detail">
<a href="#">자세히보기</a>
</p>
</li>
<li>
<img src="./images/img2.jpg" alt="img2 image">
<h3>program</h3>
<p class="detail">
<a href="#">자세히보기</a>
</p>
</li>
<li>
<img src="./images/img3.jpg" alt="img3 image">
<h3>history</h3>
<p class="detail">
<a href="#">자세히보기</a>
</p>
</li>
</ul>
</body>
</html>
Engineering is the closest thing to magic that exists in the world.