WEB 2일차 다섯번째) div
① 소스 내용
<?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>
② 실행 화면
태연
몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마
몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마
몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마
몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마
몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마