translate() 그리고 absolute positioning

들어가기 전..

안녕하세요. 오늘의 주제는 absolute와 translate! 비슷비슷한 녀석들을 데리고 왔습니다.

 

---

absolute positioning

가장 가까운 static이 아닌 조상 엘리먼트에게서 상대적으로 위치가 지정됩니다.

 

 

※ html

<div class="relative">
	<div class="absolute"></div>
</div>

 

※ css

.relative {
	width: 100%; 
    height: 300px;
	position: relative; 
}
.absolute {
	position: absolute;
    bottom: 40px; 
    right: 40px;
}

 

※ result

 position : relative

저는 relative 값을 갖고 있는 부모 엘리먼트입니다.
제가 static이였다면
제 자식 absolute 엘리먼트는
제 상위나 body를 기준 삼을 것입니다.

 position : absolute

저는 absolute 값을 갖고 있는 자식 엘리먼트입니다.
static이 아닌 부모 엘리먼트를 기준으로
위치가 지정되었습니다.

 

 

---

 

transform translate()

transform은 javascript를 사용하지 않고 엘리먼트를 2D 또는 3D 변형을 적용합니다.

roate, scale, skew, translate 등이 있는데 이번 포스팅에서는 translate에 대해 적어보겠습니다.

 

지원되는 브라우저 버전

속성	Chrome	IE	Safari
transform - translate	36.0 4.0 -webkit	10, 11 9.0 -ms-	9 3.2 -webkit-

 

translate 속성

transform : translate()	해당 위치에서부터 주어진 값만큼 X축(수평), Y축(수직)을 이동합니다. Y축 값은 생략할 수 있습니다. 그럴 경우 Y축 값은 0입니다. 백분율로 사용이 가능합니다.
transform : translateX()	해당 위치에서부터 주어진 값만큼 X축을 이동합니다.
transform : translateY()	해당 위치에서부터 주어진 값만큼 Y축을 이동합니다.
transform : translateZ()	3차원 공간에서 Z축을 따라 요소를 이동합니다. 사용하려면 투영점을 지정해주어야 합니다. (아래 codepen 참고 / https://webclub.tistory.com/622 참고 추천)
transform : translate3d()	3차원 공간에서 주어진 값만큼 X축, Y축, Z축을 따라 이동합니다. 해당 메소드도 투영점이 필요합니다. (https://webclub.tistory.com/622 참고 추천)

출처 https://webclub.tistory.com/622

 

 

---

 

본격적인 Absolute positioning & translate 비교

1. 목적

• absolute : 포지셔닝 (특정 위치에 위치시키기 위함)
• translate : 디자인 모션

2. x축,y축 시작점

• absolute : 조상 엘리먼트의 최상단좌측이 시작점이자 기준점이 됩니다.
• translate : 부모 요소에서 따로 지정해주는 것이 아니라면 요소가 갖고있는 최상단좌측이 기준점이자 시작점이 됩니다.

 

 

3. 영향력

• absolute : 주변 요소에 영향이 있다.
• translate : 좌표 공간을 변형시키기에 다른 요소(형제 등등..)에 영향을 미치지 않는다.

4. 성능

• 아래 그림과 같이 Reranering, Painting 차이점이 있습니다. Positioning을 변경하면 렌더링과 페인팅이 발생합니다.  cpu의 계산이 늘어날 수록 속도 저하와 끊김이 생깁니다.
• absolute : CPU 처리 (reflow나 repaint 발생)
• translate : GPU 처리

왼쪽 : absolute cpu / 오른쪽 : translate

 

---

 

Absolute positioning & translate 같이 쓰기

요소를 중앙으로 이동 시킬 때 주로 사용하는데요..

예를 들어 dialog를 예로 들을 수 있을 것 같습니다.

 

 

※ html

<div class="wrap">
	<div class="box">
  		<p>개미한마리 하나</p>
  		<p>개미두마리 둘</p>
  		<p>개미세마리 셋</p>
	</div>
</div>

 

※ css

.wrap {
	position: relative;
}
.box {
	width: 500px;
	position: absolute;
	top: 50%;
	left: 50%;
	padding: 10px;
	transform: translate(-50%, -50%);
	-ms-transform:translate(-50%, -50%); /* IE 9 */
	-webkit-transform:translate(-50%, -50%); /* Safari and Chrome */
}

 

※ codepen

 

 

 

 

 

---

혹여나 틀린 점이나 추가할 내용이 있다면 댓글 달아주시면 감사하겠습니다.

 

참고자료

https://wit.nts-corp.com/2017/06/05/4571