728x90
반응형
transform
transform 속성은 요소를 2D 또는 3D 공간에서 변형하는 데 사용됨.
transform 기능은 다음과 같습니다
- translate(): 요소를 이동시킵니다.
- rotate(): 요소를 회전시킵니다.
- scale(): 요소의 크기를 조절합니다.
- skew(): 요소를 기울입니다.
- matrix(): 위의 변형을 결합하여 변형합니다.
사용 예시
transform: translateY(-50%);transform: translateY(-50%);는 요소를 수직으로 가운데 정렬하는 데 사용됨.
이를 위해 position: absolute; 또는 position: fixed;를 함께 사용하여 기준 위치를 설정한 후,
top: 50%;와 함께 사용된다.
요소가 부모 요소의 높이의 50% 지점에 위치한 후,
자기 자신의 높이의 50%만큼 위로 이동하여 정확히 중앙에 오게 된다.
꼭 position을 같이 사용 해 줘야하는 지
반드시 position 속성을 함께 사용해야 하는 것은 아니다.
그러나, 특정 위치 조정(예: 요소를 수직 또는 수평으로 중앙에 배치)과
같은 효과를 얻기 위해 transform을 사용할 때,
position 속성이나 다른 위치 지정 속성과 함께 사용하면 더 유용
position 속성과의 조합
- 위치 기준 설정:
- transform 속성은 요소의 현재 위치를 기준으로 변형을 적용합니다.
- position 속성을 사용하여 요소의 위치 기준을 설정할 수 있습니다(relative, absolute, fixed, sticky 등).
- 정확한 위치 조정:
- transform: translateY(-50%); 와 같이 변형을 사용할 때, 요소의 현재 위치를 기준으로 이동합니다.
- position: absolute;와 top: 50%;를 함께 사용하면, 부모 요소를 기준으로 요소의 위치를 설정할 수 있습니다
transform과 position의 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transform and Position Example</title>
<style>
.container {
position: relative;
width: 300px;
height: 300px;
background-color: lightgray;
}
.element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background-color: coral;
}
</style>
</head>
<body>
<div class="container">
<div class="element"></div>
</div>
</body>
</html>HTML 구조:
- container 클래스는 상대 위치를 가지는 부모 요소입니다.
- element 클래스는 자식 요소로, 절대 위치를 가지고 있습니다
CSS:
- container는 position: relative;를 사용하여 자식 요소의 기준 위치를 설정합니다.
- element는 position: absolute;와 top: 50%;, left: 50%;를 사용하여 부모 요소의 중심에 배치됩니다.
- transform: translate(-50%, -50%);는 element 요소의 중앙을 기준으로 좌표를 이동시켜, 부모 요소의 정확한 중심에 배치합니다.
728x90
반응형
'> 메모 > CSS' 카테고리의 다른 글
| [CSS] transition 속성 종류 (0) | 2024.06.30 |
|---|---|
| [CSS] img 에 display: block 을 쓰는 이유 (0) | 2024.06.28 |
| [CSS] 자식 width 를 부모 width 와 동일하게 맞추기 (0) | 2024.06.27 |
| [CSS] Fieldset 태그의 사용 (0) | 2024.06.27 |
| [CSS] padding 축약 설정 (0) | 2024.06.23 |
