<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
body{
width : 900px;
margin-left : auto; /* 가운데 정렬 */
margin-right: auto; /* 가운데 정렬 */
}
header{
background-color: red;
height : 150px;
}
#aside01{
background-color: yellow;
height : 800px;
width : 150px;
float : left;
}
section{
background-color: olive;
height : 400px;
width : 600px;
/* float : right; */
}
#aside02{
background-color: yellow;
height : 800px;
width : 150px;
float : right;
}
section{
background-color: olive;
height : 400px;
width : 600px;
float : right;
}
footer{
background-color: orange;
height : 150px;
clear : both;
}
a:link{ /* 위와 똑같은 의미다 */
color : lime;
/* text-decoration: underline; */
text-decoration: none;
}
a:visited { /* a 태그 중 방문기록이 있는 것. 설정 안하면 보라색으로 나타난다. */
color : lime;
}
a:hover { /* 마우스 올렸을 때 */
background-color: lightgray;
text-decoration: underline;
}
#numberlist li { /* 자식 중 li인 것 */
float : left; /* 마진을 안 주면 붙어버린다 */
margin : 0px 30px 0px 0px; /* top - bottom - left - right */
/* margin : 10px 10px; 2개를 적으면, left - right */
font-size : 12pt;
list-style : none;
}
</style>
</head>
<body>
<header>
<img src = "../html/images/header.png">
</header>
<aside id="aside01">
<ul id = "numberlist">
<li><a href = "https://www.kebhana.com/index.html">하나은행</a><hr></li>
<li>TWO</li>
<li>THREE</li>
<li>FOUR</li>
<li>FIVE</li>
<li>SIX</li>
<li>SEVEN</li>
<li>EIGHT</li>
<li>NINE</li>
<li>TEN</li>
</ul>
</aside>
<aside id="aside02">aside부분</aside>
<section id="section01">
<a href = "https://www.kebhana.com/index.html">하나은행</a><hr>
<a href = "https://www.hanacard.co.kr/index2.jsp">하나카드 바로가기</a><hr>
</section>
<section id="section02">
<a href = "https://news.naver.com/">네이버 뉴스 바로가기</a><hr>
<a href = "https://comic.naver.com/index.nhn">네이버 만화 바로가기</a><hr>
</section>
<footer>footer부분</footer>
</body>
</html>
