① 소스 내용
<?xml version="1.0" encoding="EUC-KR" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" />
<title>div로 레이아웃 잡기</title>
<style>
/* div {
border: thin red solid;
} */
.content {
position: absolute;
margin-left: 155px;
width: 645px;
}
.menu {
width: 150px;
position: absolute;
}
.out {
width: 800px;
/* 위 아래는 0px 좌우로는 auto */
margin: 0px auto;
}
div.menu ul {
list-style: none;
padding: 0px;
margin: 0px;
}
div.menu ul li:HOVER {
/* background-color: #E0E0E0; */
background-image:url("teayeon2.jpg");
background-position: 50%;
}
</style>
</head>
<body>
<div class="out">
<div class="menu">
<ul>
<li>꽃게탕</li>
<li>스테이크</li>
<li>깐풍기</li>
<li>탕수육</li>
<li>타르트</li>
</ul>
</div>
<div class="content">
<img src="teayeon2.jpg" alt="태연" width="150" />
태연
</div>
</div>
</body>
</html>
② 실행 화면
태연
'WEB > CSS' 카테고리의 다른 글
| WEB 2일차 다섯번째) div (0) | 2012.09.13 |
|---|---|
| WEB 2일차 네번째) CSS 두번째 (0) | 2012.09.13 |
| WEB 2일차 세번째) CSS 첫번째 (0) | 2012.09.13 |
모데스티