CSS 10. 배치
배치
position 속성
- 위치 지정하기
- 요소의 위치 지정 기준
- 웹 페이지의 요소를 어떻게 배치할지 정함.
- 웹 페이지는 수많은 요소들과의 위치 관계로 이루어져 있음.
<style>
div { position: static;}
</style>
네가지 위치값
- static(기본값) : 기본 위치, 기준 없음
- fixed : 웹 브라우저 화면(뷰포트) 기준으로 배치 (고정 위치)
- relative : 요소 자신을 기준으로 배치, 기본 위치(static) 기준 상대적인 위치
- absolute : 위치 상 부모 요소를 기준으로 배치
static이 아닌 가장 가까운 조상 기준 상대적 위치
요소의 각 방향별 거리 지정
top, bottom, left, right
- auto : 브라우저 계산
- 단위 : px, em, rem 등 단위로 지정
static(기본값) : 기본 위치
- ‘변화나 움직임이 없는’
- 기본이 되는
- 모든 태그는 position 값을 지정해주지 않으면 static 상태임
fixed : 웹 브라우저 화면(뷰포트) 기준
- ‘고정된’
- 페이지를 스코롤해도 항상 같은 위치에 있음.
- 웹페이지 상단에 있는 메뉴바 혹은 네비게이션바에 fixed를 적용함.
#second { background-color: teal; position : fixed;}
- 2번 블럭은 고정되있음
relative
- 요소 자신을 기준으로 배치
-
(이 값은 배치 용도로 활용하는 것은 권장하지 않는다.)
- 형제 관계일 때
<style type="text/css">
.up{
background-color: indigo;
width: 100px;
height: 100px;
}
.down{
background-color: deeppink;
width: 100px;
height: 100px;
position: relative; /**/
left : 30px; /**/
}
</style>
</head>
<body>
<h3>형제 관계일 때</h3>
<div class="up"></div>
<div class="down"></div>
- 조부모, 부모, 자식 관계일 떄
...
<style type="text/css">
.grandparent {
background-color: aqua;
width: 200px;
height: 200px;
}
.parent {
background-color: blueviolet;
width: 150px;
height: 150px;
position: relative; /*조부모기준에서 떨어짐*/
top: 20px;
}
.child {
background-color: chartreuse;
width: 50px;
height: 50px;
position: relative; /*부모기준에서 떨어짐*/
top: 20px;
}
</style>
</head>
<body>
<h3>조부모, 부모, 자식 관계일 때 </h3>
<div class="grandparent">
<div class="parent">
<div class="child"></div>
...
absolute
- fixed, relative, absolute 중 하나이면서 가장 가까운
조상의 위치를 기준으로 움직임. - 특정 태그를 기준으로 움직이고 싶을 떄 효과적임.
- 기준이 되는 태그의 position 값을 relative로 지정함
- 움직이려는 태그의 position 값을 absolute로 정하면 됨.
- 형제 관계일 때
```
<style>
.up{
background-color: indigo;
width: 100px;
height: 100px;
}
.down{
background-color: deeppink;
width: 100px;
height: 100px;
position: absolute;
top: 20px;
left : 30px;
}
</style>
</head>
<body>
<h3>형제 관계일 때</h3>
<div class="up"></div>
<div class="down"></div>
...
- 부모, 자식 관계일때
<style type="text/css">
.parent-box {
background-color:pink;
width: 200px;
height: 200px;
position: relative; /*기준*/
}
.child-box {
background-color:green;
width: 150px;
height: 150px;
position: absolute; /*위치 상 부모 요소를 기준으로 배치*/
top: 50px;
left: 100px;
opacity:0.5;
}
</style>
</head>
<body>
<div class="parent-box">
<div class="child-box"></div>
</div>
댓글남기기