부끄럽지만 당시에는 정말!! 만족했던 결과물이었다.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Quiz-3</title>
<style>
body {
font-family: Georgia;
}
header {
background: rgb(134, 150, 168);
text-align: center;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
.leftside {
background: whitesmoke;
width: 15%;
margin-top: 120px;
position: fixed;
font-weight: bold;
font-size: 20px;
}
dl li {
padding: 10px;
}
dl li:hover {
color: rgb(255, 255, 255);
background: rgb(126, 177, 255);
}
dl {
list-style-type: none;
}
.section{
background-color: white;
}
.div1 {
background: rgb(228, 228, 228);
width: 70%;
float: right;
margin-right: 10%;
font-size: 18px;
}
div div {
float: left;
margin: 10px;
}
</style>
</head>
<body>
<header>
<h1> CSS Quiz </h1>
</header>
<div>
<div class="leftside">
<dl>
<li>
Home
</li>
<li>
menu1
</li>
<li>
menu2
</li>
<li>
menu3
</li>
</dl>
</div>
<div class="div1" style=margin-top:120px;>
<p>
Department: Computer Engineering <br>
Student Name: Hong Kil Dong <br>
Student ID: 20191029
</p>
</div>
<div class="div1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus<br>
imperdiet, nulla et dictum interdum, nisi lore egestas adio, vitae<br>
scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec<br>
congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.<br>
Mauris ante ligula, facilsis sed ornare eu, lobortis in odio. Praesent<br>
convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis<br>
dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc<br>
venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida<br>
venenatis. Integer fringilla congue eros non fermentum. Sed dapibus<br>
pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.<br>
</p>
</div>
<div class="div1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus<br>
imperdiet, nulla et dictum interdum, nisi lorem egestas adio, vitaes<br>
sclerisque enim ligula venenatis dolor.<br>
</p>
</div>
<div class="div1">
<p>
Department: Computer Engineering <br>
Student Name: Hong Kil Dong <br>
Student ID: 20191029 <br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus<br>
imperdiet, nulla et dictum interdum, nisi lore egestas adio, vitae<br>
scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec<br>
congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.<br>
Mauris ante ligula, facilsis sed ornare eu, lobortis in odio. Praesent<br>
convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis<br>
dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc<br>
venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida<br>
venenatis. Integer fringilla congue eros non fermentum. Sed dapibus<br>
pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus<br>
imperdiet, nulla et dictum interdum, nisi lorem egestas adio, vitaes<br>
sclerisque enim ligula venenatis dolor.<br>
Department: Computer Engineering <br>
Student Name: Hong Kil Dong <br>
Student ID: 20191029 <br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus<br>
imperdiet, nulla et dictum interdum, nisi lore egestas adio, vitae<br>
scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec<br>
congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.<br>
Mauris ante ligula, facilsis sed ornare eu, lobortis in odio. Praesent<br>
convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis<br>
dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc<br>
venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida<br>
venenatis. Integer fringilla congue eros non fermentum. Sed dapibus<br>
pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus<br>
imperdiet, nulla et dictum interdum, nisi lorem egestas adio, vitaes<br>
sclerisque enim ligula venenatis dolor.<br>
</p>
</div>
</div>
</body>
</html>
갓 프로그래밍에 입문