position
html요소가 위치를 결정하는 방식을 설정하는 방법
속성 : top left right bottom
위치를 결정하는 방식
static
정적위치 속성값을 줘도 움직이지 않는다.
지정하지 않았을 때의 default 값이다.
내 본래 위치는 기억된다.
relative
상대위치 현재 있던 위치에서 속성값만큼 움직인다.
내 본래 위치는 기억된다.
absolute
절대위치 브라우저의 최상단 최좌측에서 속성값만큼 움직이고 스크롤 된다.
내 본래 위치는 무시된다.
너비를 지정하지 않으면 contents 영역만을 너비로 삼는다.
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(900,200,50,.3);
position: absolute;
left: 0;
top: 0;
transition: 0.5s;
}
li:hover::after{
width: 60px;
}
</style>
<body>
<ul>
<li><a href="#">menu</a></li>
<li><a href="#">menu</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: lightblue;
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;및ransition: 1s;
그리고 마우스를 대기 전 상태의 건을 (ex; width:0) 입력
#position div:hover에 마우스를 댄 후 상태의 건을 (ex;width: 100px) 입력
transform
움직임을 결정하는 방식
transform: translate(-50%,-50%)
css에,
position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);를 지정하면 화면상의 중앙에 정렬시켜준다.
브라우저 크기 및 높이가 바뀌어도 변하지 않는다. (vw 혹은 vh로 width height를 지정했을때)
translate 이동
transform: translate(x,y);
transform: translateX(x);
transform: translateY(y);
transform: translateZ(z);
scale 확대 축소
transform: scle(x,y);
transform: scaleX(x);
transform: scaleY(y);
transform: scaleZ(z);
rotate 회전
transform: rotate(deg);
transform: rotateX(xdeg);
transform: rotateY(ydeg);
transform: rotateZ(zdeg);
rotate의 회전축을 중심으로 하고 싶다면
transform: translate(-50%, -50%) rotate(각도deg);로 작성
Z축을 움직였을 때는,
그 부모요소에perspective: npx;를 입력하여 원근감을 주어야 한다. 이n은 작을수록 효과가 크게 나타난다.
skew 기울임
skew(xdeg, ydeg);
skewX(xdeg);
skewY(Ydeg);
요약
<div id="transform">
<div></div>
</div>html이 위와 같을 때, css에서
#transform에 position: relative;를 준다.
#transform div에 position: absolute;와 transition: .5s;를 준다.
#transform div:hover에 transform:()을 준다.
