Position
html요소가 위치를 결정하는 방식을 설정하는 방법
속성: top left right bottom
위치를 결정하는 방식
1.static
정적위치 ; 속성값을 줘도 움직이지 않는다.
지정하지 않았을 때의 default 값이다.
내 본래 위치는 기억된다.
2.relative
상대위치 ; 현재 있던 위치에서 속성값만큼 움직인다.
내 본래 위치는 기억된다.
3.absolute
절대위치 ; 브라우저의 최상단 최좌측에서 속성값만큼 움직이고 스크롤 된다.
내 본래 위치는 무시된다.
너비를 지정하지 않으면 contents 영역만을 너비로 삼는다.
4.fixed
고정위치 ; 브라우저의 최상단 최좌측에서 속성값만큼 움직이고 스크롤되지 않는다.
활용방법
상위 요소에게 positon:relative를 주고 position:absolute를 적용시키면 상위 요소를 기준으로 하여 속성값만큼 움직인다.
현 요소에 (있는 부분)position:relative를 두고
현 요소의 ::after(바뀔 부분)에 position:absolute를 적용, width를 0으로 입력, transition을 0.5s로 입력,
현 요소의 :hover::after(얼마나 바뀔건지)에 width를 지정하면
<style>
li{
position: relative;
}
li::after{
content: "";
display: block;
width: 0px;
height: 30px;
background: rgba(245,50,50,.3);
position: absolute;
left: 0;
top: 0;
transition: 0.5s;
}
li:hover::after{
width: 60px;
}
</style>
<body>
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
</ul>
</body>
요소에 마우스를 올렸을 때에 0.5초의 속도로 width를 30px까지 늘리는 모습의 연출이 가능하다.
현 요소에 position:relative를 두지 않았을 경우, 화면상의 left:0 top:0 좌표에서 연출된다.
overflow:hidden (내 영역을 벗어난 자식 요소를 보이지 않게 만든다.)를 이용하여
::after에 속성값으로 음수를 준 뒤
:hover::after에 속성값으로 0을 줘
숨겨진 곳에서 나타나게 하는 연출도 가능하다.
<style>
li2{
position: relative;
padding-left: 30px;
list-style: none;
overflow: hidden;
}
li2::after{
content: "";
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
background: orange;
position:absolute;
left: 0;
bottom: -30px;
transition: 1s;
}
li2:hover::after{
bottom: 0;
}
</style>
</head>
<body>
<ul>
<li2><a href="#">menu1</a></li2>
<li2><a href="#">menu2</a></li2>
<li2><a href="#">menu3</a></li2>
<li2><a href="#">menu4</a></li2>
</ul>
<hr class>
요약
<div id="position">
<div></div>
</div>html이 다음과 같을때, css에서
#position 에 position: relative;
#position div 에 position:absolute; 및 transition: 1s;
그리고 마우스를 대기 전 상태의 건을 (ex; width:0) 입력
#position div:hover에 마우스를 댄 후 상태의 건을 (ex; width:100px) 입력
trans form
움직임을 결정하는 방식
1.translate 이동
transform:translate(x,y)
transform:translateX(x)
transform:translateY(y)
transform:translateZ(z)
2. scale 확대 축소
transform: scle(x,y);
transform: scaleX(x);
transform: scaleY(y);
transform: scaleZ(z);
3.rotate 회전
transform: rotate(deg)
transform: rotateX(xdeg)
transform: rotateY(ydeg)
transform: rotateZ(zdeg)
*rotate의 회전축을 중심으로 하고 싶다면
transform: translate(-50%, -50%) rotate(각도deg);
로 작성
Z축을 움직였을때에는, 그 부모요소에
perspective: npx;
를 입력하여 원근감을 주어야 한다. 이 n은 작을 수록 효과가 크게 나타난다.
4.skew 기울임
skew(xdeg, ydeg)
skewX(xdeg)
skewY(Ydeg)
요약
<div id="trans">
<div></div>
</div> html이 위와 같을 때, css에서
#trans에 position: relative;를 준다.
#trans div에 position: absolute;와 transition: .5s;를 준다.
#trans div:hover에 transform:()을 준다.
