📝 CSS 위치 이동의 모든 것: top·left·right·bottom과 transform
요소를 원하는 위치로 이동시키는 방법은 크게 두 가지입니다.
top·left·right·bottom으로 직접 좌표를 지정하거나, transform: translate()로 상대적으로 이동하거나!
두 방법의 차이를 제대로 알아봅시다.
1. top · left · right · bottom이란?
position 속성과 함께 사용해서 요소의 위치를 지정하는 속성들입니다.
top: 20px; /* 기준점에서 위쪽으로부터 20px */
left: 30px; /* 기준점에서 왼쪽으로부터 30px */
right: 10px; /* 기준점에서 오른쪽으로부터 10px */
bottom: 0; /* 기준점에서 아래쪽으로부터 0px */📐 방향 기준
top
↓
left → [요소] ← right
↑
bottom💡 헷갈리지 않는 팁 —
top: 20px은 "위에서 20px 떨어진 곳"이라는 의미입니다.
요소를 아래로 내리고 싶으면top값을 키우고, 위로 올리고 싶으면 줄입니다!
2. ⚠️ position과 함께 써야 하는 이유
top · left · right · bottom은 단독으로는 동작하지 않습니다.
반드시 position: static이 아닌 값과 함께 써야 합니다.
/* ❌ 동작 안 함 */
div {
top: 20px; /* position이 static(기본값)이라 무시됨 */
}
/* ✅ 동작함 */
div {
position: relative; /* 또는 absolute, fixed */
top: 20px;
}| position 값 | 기준점 | top/left 동작 |
|---|---|---|
static | - | ❌ 무시 |
relative | 현재 위치 | ✅ |
absolute | 부모 유령 | ✅ |
fixed | 뷰포트 | ✅ |
3. 간단 예제: 방향 속성으로 이동하기
📝 relative — 현재 위치 기준 이동
<div class="box">나는 relative</div>.box {
width: 100px;
height: 100px;
background-color: steelblue;
position: relative;
top: 30px; /* 원래 위치에서 아래로 30px */
left: 50px; /* 원래 위치에서 오른쪽으로 50px */
}원래 위치 → [ ]
[박스] ← 30px 아래, 50px 오른쪽으로 이동📝 absolute — 부모 기준 이동
<div class="parent">
<div class="child">나는 absolute</div>
</div>.parent {
position: relative;
width: 300px;
height: 300px;
background-color: #eee;
}
.child {
position: absolute;
bottom: 0; /* 부모의 아래쪽 끝 */
right: 0; /* 부모의 오른쪽 끝 */
width: 100px;
height: 100px;
background-color: tomato;
}┌────────────────┐
│ .parent │
│ │
│ │
│ [child] │ ← 오른쪽 하단에 딱 붙음
└────────────────┘4. transform이란? ✨
요소를 이동, 회전, 크기 변경, 기울이기 등 다양한 변형을 줄 수 있는 속성입니다.
transform: translate(x, y); /* 이동 */
transform: rotate(45deg); /* 회전 */
transform: scale(1.5); /* 크기 변경 */
transform: skew(10deg); /* 기울이기 */💡 핵심 특징 —
transform은 요소가 문서 흐름에 영향을 주지 않습니다.
주변 요소의 위치가 바뀌지 않고, 오직 시각적으로만 이동/변형됩니다!
5. translate — 이동 🏃
transform의 가장 많이 쓰이는 함수입니다.
요소를 X축(가로), Y축(세로) 방향으로 이동시킵니다.
📝 문법
transform: translate(x, y); /* X축, Y축 동시 이동 */
transform: translateX(x); /* X축만 이동 */
transform: translateY(y); /* Y축만 이동 */📝 간단 예제
<div class="box">translate</div>.box {
width: 100px;
height: 100px;
background-color: coral;
/* 오른쪽으로 50px, 아래로 30px 이동 */
transform: translate(50px, 30px);
}좌표 방향
translate(+x, +y) → 오른쪽, 아래로 이동
translate(-x, -y) → 왼쪽, 위로 이동
-Y (위)
↑
-X ← [요소] → +X
↓
+Y (아래)% 단위 활용
translate에서 % 단위를 쓰면 요소 자신의 크기를 기준으로 이동합니다.
/* 요소 자신의 너비의 50%, 높이의 50%만큼 이동 */
transform: translate(50%, 50%);
/* 요소 자신의 너비만큼 왼쪽으로, 높이만큼 위로 이동 */
transform: translate(-100%, -100%);6. 그 외 transform 함수들 🎨
🔄 rotate — 회전
transform: rotate(45deg); /* 시계 방향 45도 회전 */
transform: rotate(-45deg); /* 반시계 방향 45도 회전 */🔍 scale — 크기 변경
transform: scale(2); /* 2배 확대 */
transform: scale(0.5); /* 절반 축소 */
transform: scale(2, 1); /* 가로만 2배 */📐 skew — 기울이기
transform: skew(20deg); /* X축 기준 20도 기울기 */
transform: skew(20deg, 10deg); /* X축 20도, Y축 10도 */🔗 여러 함수 동시 적용
/* 공백으로 구분해서 여러 개 동시 적용 */
transform: translate(50px, 30px) rotate(45deg) scale(1.2);7. top·left vs translate 차이
비슷하게 요소를 이동시키지만 동작 방식이 다릅니다.
| 비교 | top · left | transform: translate() |
|---|---|---|
| 기준점 | 부모 또는 현재 위치 | 요소 자신의 현재 위치 |
| 문서 흐름 영향 | ✅ 영향 줌 | ❌ 영향 없음 |
| 주변 요소 밀림 | ✅ 밀릴 수 있음 | ❌ 밀리지 않음 |
| transition 성능 | ⚠️ 느림 (레이아웃 재계산) | ✅ 빠름 (GPU 가속) |
| position 필요 | ✅ 필요 | ❌ 불필요 |
🍯 실무 꿀팁 — 애니메이션이나 hover 효과처럼 자주 바뀌는 이동은
translate를 사용하세요.
top · left보다 GPU 가속이 적용돼 훨씬 부드럽고 성능이 좋습니다!
8. 💻 실전 활용: 정중앙 정렬하기
가장 많이 쓰이는 패턴입니다. 요소를 부모 기준으로 완벽한 정중앙에 배치합니다.
<div class="parent">
<div class="child">정중앙!</div>
</div>.parent {
position: relative;
width: 400px;
height: 400px;
background-color: #eee;
}
.child {
position: absolute;
/* 부모의 50% 지점으로 이동 */
top: 50%;
left: 50%;
/* 자기 자신의 크기만큼 다시 빼기 */
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background-color: tomato;
}🔍 동작 원리
1단계: top: 50%, left: 50%
┌──────────────────┐
│ │
│ │
│ [★] │ ← 요소의 왼쪽 상단이 중심에 위치
│ │
└──────────────────┘
2단계: transform: translate(-50%, -50%)
┌──────────────────┐
│ │
│ [★] │ ← 요소의 중심이 정중앙에 위치!
│ │
│ │
└──────────────────┘💡
top: 50%+left: 50%만 하면 요소의 왼쪽 상단 꼭짓점이 중앙에 옵니다.
translate(-50%, -50%)로 자기 자신의 크기 절반만큼 다시 당겨줘야 진짜 정중앙이 됩니다!
9. 📖 핵심 요약
📌 top · left · right · bottom
| 포인트 | 내용 |
|---|---|
| 단독 사용 | position: static이면 무시됨 |
| 기준점 | relative → 현재 위치 / absolute → 부모 유령 / fixed → 화면 |
| 값의 의미 | top: 20px = 위에서 20px 떨어진 곳 |
📌 transform · translate
| 포인트 | 내용 |
|---|---|
| transform | 이동 · 회전 · 크기 · 기울이기 등 다양한 변형 |
| translate | X · Y 방향 이동, %는 자기 자신 크기 기준 |
| 성능 | 애니메이션에는 translate가 top/left보다 빠름 |
| 정중앙 | top: 50% + left: 50% + translate(-50%, -50%) |
