① 소스 내용
<?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 1</title>
<style type="text/css">
.f{
float: left;
}
#box {
/*
position
alsolute : div를 원하는 위치에 놓는 것이 가능하다.(절대좌표)
relative : 해당 div앞에 있는 태그를 기준으로 위치가 결정된다.
fixed : 해당 좌표에서 고정되어 스크롤을 해도 위치가 변하지 않는다.
*/
position: fixed;
border: dashed blue;
width: 500px;
left: 50px; top: 50px
}
</style>
</head>
<body>
<div>
이 구역을 침범하지마!!!!
</div>
<div id="box">
몽골마
<!--
상대경로 : 앞에 '/'가 없는 상태로 나오는 경로
>> 현재 경로를 기준으로 상대적으로 경로를 파악한다.
. : 현재경로, .. : 상위경로
-->
<img src="./horse.jpg" alt="몽골마" width="400px"/>
태연
<!-- 절대경로 : 앞에 '/'가 있는 경로 -->
<img src="/hp/teayeon2.jpg" class="f" alt="태연" width="200"/>
몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마
몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마
몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마
몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마
몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마
<img src="/hp/teayeon2.jpg" style="clear: left;" alt="태연" width="200"/>
<img src="/hp/teayeon2.jpg" style="clear: left;" alt="태연" width="200"/>
<img src="/hp/teayeon2.jpg" class="f" alt="태연" width="200"/>
<img src="/hp/teayeon2.jpg" class="f" alt="태연" width="200"/>
<img src="/hp/teayeon2.jpg" class="f" alt="태연" width="200"/>
<img src="/hp/teayeon2.jpg" class="f" alt="태연" width="200"/>
<img src="/hp/teayeon2.jpg" class="f" alt="태연" width="200"/>
<img src="/hp/teayeon2.jpg" class="f" alt="태연" width="200"/>
<img src="/hp/teayeon2.jpg" class="f" alt="태연" width="200"/>
<img src="/hp/teayeon2.jpg" class="f" alt="태연" width="200"/>
<img src="/hp/teayeon2.jpg" class="f" alt="태연" width="200"/>
<img src="/hp/teayeon2.jpg" class="f" alt="태연" width="200"/>
<img src="/hp/teayeon2.jpg" class="f" alt="태연" width="200"/>
<img src="/hp/teayeon2.jpg" class="f" alt="태연" width="200"/>
<img src="/hp/teayeon2.jpg" class="f" alt="태연" width="200"/>
</div>
<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 |
모데스티