11. position 속성
페이지 정보
작성자 관리자 댓글 0건 조회 521회 작성일 22-01-06 23:37본문
11. position 속성
position 속성 : 웹문서 안에 원하는 위치에 요소를 배치하기 위해 사용하는 속성
속성값 : 1. static - 요소를 문서의 흐름대로 배치
2. relative - 요소를 상대적으로 배치
3. absolute - 문서의 흐름과는 상관 없이 배치
4. fixed - 지정한 위치에 고정해서 배치
실습 : position.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>position </title>
</head>
<body>
<header>
<h1>스타일시트 연습</h1>
</header>
<div id="wrapper">
<div class="div1"> <p>동해물과 백두산이 마르고 닳도록동해물과 백두산이 마르고 닳도록동해물과 백두산이 마르고 닳도록동해물과 백두산이 마르고 닳도록동해물과 백두산이 마르고 닳도록동해물과 백두산이 마르고 닳도록동해물과 백두산이 마르고 닳도록</p></div>
<div class="div2"> <p>동해물과 백두산이 마르고 닳도록 </p></div>
<div class="div3"> <p>동해물과 백두산이 마르고 닳도록동해물과 백두산이 마르고 닳도록동해물과 백두산이 마르고 닳도록</p></div>
<div class="div4"><p>동해물과 백두산이 마르고 닳도록동해물과 백두산이 마르고 닳도록동해물과 백두산이 마르고 닳도록</p></div>
</div>
</body>
</html>
static 스타일을 추가한다.
<style type="text/css">
.div1{
position:static;
background:yellow;
}
.div2{
position:static;
background:green;
}
.div3{
position:static;
background:lightblue;
}
</style>
relative 스타일로 수정한다.
<style type="text/css">
.div1{
position:relative;
background:yellow;
}
.div2{
position:relative;
left:30px;
top:-50px;
background:green;
}
.div3{
position:relative;
left:-30px;
top:50px;
background:lightblue;
}
</style>
요소들의 원래 있어야 할 위치에서 지정된 방향으로 이동하게 된다.
left:-30px은 왼쪽으로 -30px만큼 요소가 이동하게 된다.
absolute 스타일로 수정한다.
<style type="text/css">
.div1{
position:absolute;
left:100px;
top:100px;
background:yellow;
}
</style>
스타일을 수정한다.
<style type="text/css">
.div1{
position:absolute;
left:100px;
top:100px;
background:yellow;
}
.div2{
position:absolute;
left:120px;
top:120px;
background:lightgreen;
}
</style>
스타일을 수정한다.
<style type="text/css">
#wrapper {
position:absolute;
left:100px;
top:100px;
width:400px;
padding:20px;
background:purple;
}
.div1{
width:200px;
padding:20px;
background:yellow;
}
.div2{
padding:20px;
width:200px;
position:relative;
left:120px;
top:120px;
background:lightgreen;
}
.div3{
padding:20px;
width:200px;
position:absolute;
left:200px;
top:200px;
background:lightblue;
}
.div4{
position:fixed;
left:500px;
top:500px;
background:red;
padding:20px;
width:200px;
}
</style>
div 태그를 하나씩 입력하면서 결과를 확인하면 이해하기 쉬울 것 같습니다.
댓글목록
등록된 댓글이 없습니다.