정구리의 우주정복
[HTML/CSS] position 정복하기 본문
position 에는 relative , absolute, static, fixed 등등이있다 오늘은 저 4개에 대해서 정복을 할거임 !
relative 는 자기 자신 기준으로 이동을 한다 + relative 를 부여한 애는 부모역할을 하게 된다
absolute 는 부모 기준으로 이동을 한다 만약 relative 를 사용해 부모를 지정하지 않으면 최상위 뷰포트가 부모가 된다
static 을 주면 부모의 역할을 하지 않게 된다
fixed는 그냥 뷰포트 기준으로 이동하게 된다.
전체 소스 보면서 얘기 해봅세다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
border : 1px solid red;
width : 100%;
height:300px;
padding:20px;
}
div div{
width: 50px;
height: 50px;
background: red;
color: #fff;
text-align: center;
display: inline-block;
}
.par {
position:relative;
}
div .a:hover {
position:absolute;
left: 20px;
bottom:20px;
background-color: green;
}
div .c:hover {
position:relative;
right: 20px;
bottom:20px;
background-color: green;
}
div .e:hover {
position:relative;
left: 20px;
top:20px;
background-color: green;
}
div .f:hover{
position : fixed;
right:20px;
bottom:20px;
background-color: green;
}
</style>
</head>
<body>
<h3>상대 배치 , relative</h3>
<hr>
<div class="par">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
<div class="d">D</div>
<div class="e">E</div>
<div class="f">F</div>
</div>
</body>
</html>
<!--
부모기준(위에 div ?_hover)
A : 좌하 20px(div)
C: 좌 상 20px (자기 기준)
E : 우 하 20px ( 자신 기준)
F : 우하 20px (viewport 기준 ( body))
-->
HTML
<body>
<h3>상대 배치 , relative</h3>
<hr>
<div class="par">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
<div class="d">D</div>
<div class="e">E</div>
<div class="f">F</div>
</div>
</body>div 안에 div 7개 만들어줬다
CSS
<style>
div{
border : 1px solid red;
width : 100%;
height:300px;
padding:20px;
}
div div{
width: 50px;
height: 50px;
background: red;
color: #fff;
text-align: center;
display: inline-block;
}
.par {
position:relative;
}
div .a:hover {
position:absolute;
left: 20px;
bottom:20px;
background-color: green;
}
div .c:hover {
position:relative;
right: 20px;
bottom:20px;
background-color: green;
}
div .e:hover {
position:relative;
left: 20px;
top:20px;
background-color: green;
}
div .f:hover{
position : fixed;
right:20px;
bottom:20px;
background-color: green;
}
</style>짤라서 보자
div{
border : 1px solid red;
width : 100%;
height:300px;
padding:20px;
}
div div{
width: 50px;
height: 50px;
background: red;
color: #fff;
text-align: center;
display: inline-block;
}
position 이 중요하니까 별도로 설명하지는 않겠음
.par {
position:relative;
}
div .a:hover {
position:absolute;
left: 20px;
bottom:20px;
background-color: green;
}par( 바깥 div ) 에 postition relative 를 줘서 부모처리 해준다
a:hover (마우스 올려놓았을때)
position absolute 를 줘 자식처리 해준다 -> 이렇게 되면 par 을 부모로 인식해 par의 left 20px , bottom 20px ; 떨어진 곳으로 이동하게 된다
div .c:hover {
position:relative;
right: 20px;
bottom:20px;
background-color: green;
}
div .e:hover {
position:relative;
left: 20px;
top:20px;
background-color: green;
}
c 와 e 는 position relative 를 줘 자기 자신을 기준으로 움직이게 만들어준다 마우스 호버 시 자기 자신 기준으로 오른쪽으로 20 밑에서 20 떨어진 곳으로 이동하게 된다
div .f:hover{
position : fixed;
right:20px;
bottom:20px;
background-color: green;
}
f 는 position fixed 를 줬다
그래서 뷰포트를 기준으로 움직이게된다 (뷰포트 = 화면 )
마우스 호버 시 화면 기준 오른쪽에서 20 밑에서 20 떨어진 곳으로 이동하게 된다
참고로 같은 계층의 친구에게는 relative 를 줘도 부모로 인식하지 못한다
'STUDY > K-DIGITAL' 카테고리의 다른 글
| [HTML/CSS] display:flex 정복하기 , media query 사용해보기 (0) | 2022.08.27 |
|---|---|
| [HTML/CSS] float 정복하기 (0) | 2022.08.23 |
| [Java] static에 대해 (0) | 2022.08.21 |
| [Java] 객체 생성, 클래스에서 다른 클래스 호출해 사용하기 (5) | 2022.08.21 |
| [Java] Mac Eclipse IDE / Projects are not visible in workspace folder (0) | 2022.08.21 |
