<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>시조</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-family: "맑은 고딕";
font-size: 16px;
line-height: 1.5;
}
div {
margin: 80px 650px auto;
padding: 50px;
border: 5px solid #ffcc00;
}
h1 {
margin-bottom: 20px;
padding: 20px;
border-top: 5px solid #d69129;
color: #fff;
background-color: #ffcc00;
}
strong {
margin-bottom: 20px;
color: #fff;
background-color: #33cc00;
}
em {
margin-bottom: 20px;
color: #33cc00;
}
p {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div>
<h1>하여가</h1>
<p><strong>청구영언</strong> <em>이방원</em></p>
<p>
이런들 어떠하며 저런들 어떠하리<br>
만수산 드렁칡이 얽혀진들 어떠하리<br>
우리도 이같이 얽혀져 백년까지 누리리라.
</p>
<h1>단심가</h1>
<p><strong>청구영언</strong> <em>정몽주</em></p>
<p>
이 몸이 죽고 죽어 일백번 고쳐 죽어<br>
백골이 진토되어 넋이라도 있고 없고<br>
임 향한 일편단심이야 가실 줄이 있으랴.
</p>
</div>
</body>
</html>