728x90
반응형
13_fixed.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>요안도라</title>
<style>
@import "../css/13_fixed.css";
</style>
</head>
<body>
<h2>이용 안내</h2>
<div id="cont1">
<p>입실은 오후 3시, 퇴실은 오전 11시입니다.</p>
<p>이곳은 관광지가 아닌, 귤농사를 짓는 중산간 마을입니다.</p>
</div>
<div id="cont2">
<p>바베큐, 야외식사 등 바깥채, 외부 앞뜰에서의 활동은 밤 11시 이전까지 마쳐 주셔야 합니다. 바깥채 내부의
소등은 자유롭게 하시되, 자정 이후로 음주나 소란스러운 대화를 자제해 주시면 고맙겠습니다.</p>
</div>
<div id="cont3">
<p>
우도, 성산일출봉, 섭지코지, 김영갑 갤러리, 용눈이 오름 등 주변 관광지와 한라산 동쪽 등산로로 오가실 경우 요안도라에서
콜택시를 이용하실 수 있습니다.<br>
</p>
</div>
</body>
</html>13_fixed.css
@CHARSET "UTF-8";
div{
width:200px;
height:auto;
margin:10px 5px;
padding: 5px;
border: 1px solid black;
}
#cont1{/*absolute와 차이: [scrollbar] 표시 안함*/
position: fixed;/*left와 top 값에 맞춰 위치 고정*/
left:20px;/*기준점 left top: 0px*/
top:50px;
background:lightyellow;
}
#cont2{
position: fixed;/*left와 top 값에 맞춰 위치 고정*/
left:270px;
top:200px;
background:lightgreen;
}
#cont3{
position: fixed;/*left와 top 값에 맞춰 위치 고정*/
left:520px;
top:450px;
background:lightblue;
}
728x90
반응형
'WEB > CSS' 카테고리의 다른 글
| [CSS] ch04-15. zindex (0) | 2017.08.28 |
|---|---|
| [CSS] ch04-14. visibility (0) | 2017.08.28 |
| [CSS] ch04-12. absolute (0) | 2017.08.28 |
| [CSS] ch04-11. relative (0) | 2017.08.28 |
| [CSS] ch04-10. static (0) | 2017.08.28 |