css
CSS transform은 웹페이지에서 요소의 모양, 크기, 위치 등을 변형 시키기 위한 속성입니다.
주로 애니메이션 및 레이아웃 조정에 사용됩니다.
CSS transform의 주요 속성과 종류에 대한 설명입니다.
CSS transform 의 주요 속성에 대한 예제입니다.
아래는 예제에 공통적으로 적용되는 HTML 과 CSS 입니다.
비교를 위해 body에 border를 설정했습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transform</title>
<style>
body {
margin: 200px;
border: 2px solid black;
}
.box {
width: 300px;
height: 300px;
margin: 30px auto;
text-align: center;
font-size: 30px;
background-color: orange;
border: 2px solid black;
}
</style>
</head>
<body>
<div class="box">
<p>박스</p>
</div>
</body>
</html>transform 속성을 설정하기 전 입니다.
translate 속성은 설정 값 만큼 요소를 이동 시킵니다.
.box {
transform: translate(50px, 30px);
}translate 속성으로 오른쪽으로 50px, 아래쪽으로 30px 이동 했습니다.
rotate 속성은 설정 값 만큼 요소를 회전 시킵니다.
.box {
transform: rotate(45deg);
}요소를 45도 각도로 회전 했습니다.
scale 속성은 설정 값 만큼 요소의 크기를 조절합니다.
.box {
transform: scale(1.5);
}요소의 크기를 1.5배 확대하였습니다.
skew 속성은 설정 값 만큼 요소를 기울입니다.
.box {
transform: skew(30deg, 20deg);
}첫 번째 값(30deg): X축 방향으로 30도만큼 기울이고,
두 번째 값(20deg): Y축 방향으로 20도만큼 기울기를 주었습니다.
perspective 속성은 원근법을 설정하는 데 사용되며,
해당 속성이 적용된 부모 요소의 하위 자식 요소에게 3D 변형 효과가 나타납니다.
즉 perspective 속성은 부모 요소에 주어야 합니다.
body {
perspective: 1000px;
}
.box {
transform: rotateY(45deg);
}부모 요소인 body 에 perspective 속성을 주었고,
자식 요소인 .box 에 Y축을 기준으로 45도 만큼 회전하는 변형을 주었습니다.
matrix 속성은 matrix(a, b, c, d, tx, ty) 를 이용하여 2D 변형을 행렬로 적용합니다.
a와 d는 각각 X와 Y축에서의 크기를 나타냅니다.
b와 c는 각각 X와 Y축에서의 기울임을 나타냅니다.
tx와 ty는 각각 X와 Y축에서의 이동을 나타냅니다.
.box {
transform: matrix(1, 0.5, -0.5, 1, 100, 100);
}크기: X와 Y축 모두 1배씩 확대합니다. (a=1, d=1)
기울임: X축에서 0.5만큼, Y축에서 -0.5만큼 기울입니다. (b=0.5, c=-0.5)
이동: X와 Y축 모두 100만큼 이동합니다. (tx=100, ty=100)
여러 변형을 한 줄에 조합 할 수 있습니다.
.box {
transform: translate(20px, 20px) rotate(45deg) scale(1.2);
}translate(20px, 20px): X축으로 20px, Y축으로 20px 이동합니다.
rotate(45deg): 45도만큼 시계 방향으로 회전합니다.
scale(1.2): 크기를 1.2배 확대합니다.
CSS transform 을 이용하면 웹 요소에 다양한 변형 효과를 부여하여 동적이고 멋진 스타일을 만들 수 있습니다. 각 속성은 원하는 효과에 따라 조절하여 사용하며, 여러 속성을 조합함으로써 다양한 시각적 변화를 구현할 수 있습니다.
테스트 시 의존성 주입(Dependency Injection)과 Mockito Spring 애플리케이션을 개발하다 보면, 테스트 코드에서 실제 빈(Bean)을 사용하지…
들어가며 스프링 기반 프로젝트에서 좋은 설계 구조와 테스트 전략은 소프트웨어 품질과 유지보수성에 직결됩니다. 최근 학습한…
들어가며 코드를 작성할 때 종종 "이 로직을 어떻게 단순하고 읽기 쉽게 표현할 수 있을까?" 고민하게…
HTTP 상태코드란 무엇인가? HTTP 상태코드(HTTP Status Code)는 서버가 클라이언트의 요청을 처리한 결과를 수치화된 코드로 나타내는…
HTTP란 무엇인가? HTTP(Hypertext Transfer Protocol)는 웹에서 데이터를 주고받기 위해 사용하는 응용 계층 프로토콜입니다. 우리가 브라우저에서…