CSS 포지셔닝?
- CSS를 이용해서 HTML 엘리먼트 들의 위치를 제어하는 방법을 의미한다.
position: static
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box {
width: 150px; height: 150px; margin: 30px;
border: 3px dotted gray;
background: orange;
}
.default-box {
background: #333; color: #eee; font-weight: bold;
text-align: center; line-height: 150px;
}
.static-box {
position: static;
background: #333; color: #eee; font-weight: bold;
text-align: center; line-height: 150px;
}
</style>
</head>
<body>
<h3>position:static - 기본, 일반적인 문서 흐름에 따라 배치 </h3>
<div class="box"> <div class="default-box">default</div></div>
<div class="box"> <div class="static-box">static</div></div>
<div class="box" style="padding: 10px;"> <div class="default-box">default</div></div>
</body>
</html>
position:relative
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box {
width: 150px; height: 150px; margin: 30px;
border: 3px dotted gray;
background: orange;
}
.default-box {
background: #333; color: #eee; font-weight: bold;
text-align: center; line-height: 150px;
}
.relative-box {
position: relative;
left: 5px;
top: 5px;
background: green; color: #eee; font-weight: bold;
text-align: center; line-height: 150px;
}
</style>
</head>
<body>
<h3>porision:relative - 일반적인 문서 흐름에 따라 배치하며, 위치를 지정할 수 있다. </h3>
<div class="box"> <div class="relative-box">relative</div></div>
<div class="box"> <div class="default-box">default</div></div>
</body>
</html>position 오타 ㅎㅎ...
position:absolute
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box {
width: 150px; height: 150px; margin: 30px;
border: 3px dotted gray;
background: orange;
}
.default-box {
background: #333; color: #eee; font-weight: bold;
text-align: center; line-height: 150px;
}
.absolute-box {
position: absolute;
width: 150px;
height: 150px;
left: 50px;
top: 50px;
background: green; color: #eee; font-weight: bold;
text-align: center; line-height: 150px;
}
</style>
</head>
<body>
<h3>position:absolute - 일반적인 문서 흐름에 따르지 않으며, 페이지 레이아웃 공간도 배정하지 않음. </h3>
<div class="box"> <div class="absolute-box">parent:div</div></div>
<div class="absolute-box">parent:body</div>
</body>
</html>
position:fixed
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box {
width: 100%; height: 2500px;
background: yellow;
}
.fixed-box {
position: fixed;
width: 150px;
height: 150px;
left: 100px;
top: 100px;
background: green; color: #eee; font-weight: bold;
text-align: center; line-height: 150px;
}
</style>
</head>
<body>
<h3>position:fixed - 일반적인 문서 흐름에 따르지 않으며, 페이지 레이아웃 공간도 배정하지 않음. </h3>
<div class="box">
요소가 문서의 일반적인 흐름을 따르지 않고, 페이지 레이아웃에 공간을 배정하지 않는다.<br>
부모 요소와 관계없이 viewport를 기준으로 좌표 프로퍼티를 사용하여 위치를 이동 시킨다.<br>
스크롤이 되더라도 화면에 사라 지지않고 항상 같은 곳에 위치한다.
</div>
<div class="fixed-box">fixed-box</div>
</body>
</html>
'쌍용강북교육센터 > 9월' 카테고리의 다른 글
| 0923_CSS : clip (0) | 2021.09.23 |
|---|---|
| 0923_CSS : Z-index (0) | 2021.09.23 |
| 0916~0917_CSS : Cascading Style Sheets(CSS) (0) | 2021.09.22 |
| 0915_HTML : table, ul li 사용한 회원가입 폼 만들기 숙제 (0) | 2021.09.15 |
| 0914_HTML : table 태그 사용 이력서 만들기 숙제 (2) | 2021.09.14 |