728x90
CSS 수평 수직 정렬 Transform - translate
CSS 를 사용하다보면, 좌우,상하 가운데 정렬을 해야할 일이 많다.
가운데 정렬할수 있는 방법에는 다양한 방법이 있지만,
transform 속성 또한 상당히 많이 사용이 되고 있다.
CSS Selector {
transform : translate(좌우, 상하);
}
샘플예제
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CSS Translate</title>
<style>
.container {
width : 400px;
height: 400px;
background : orange;
}
.container > .box {
width : 200px;
height: 200px;
background : royalblue;
}
</style>
</head>
<body>
<section class="container">
<div class="box"></div>
</section>
</body>
</html>
출력 결과
코드 수정
.container > .box {
width : 200px;
height: 200px;
background : royalblue;
/*하단의 코드 추가*/
transform : translate(100%,100%);
}
출력 결과
728x90
'프론트엔드 > CSS' 카테고리의 다른 글
| [CSS] Transition 애니메니션 효과 property duration timing-function (0) | 2021.03.05 |
|---|---|
| [CSS] Background 속성 (0) | 2021.03.04 |
| [CSS] box-sizing border-box content-box (0) | 2021.03.04 |
| [CSS] BEM (Block Element Modifier) 표기법 (0) | 2021.03.04 |
| [CSS] Transform 속성 span 태그에 적용하기 (0) | 2021.02.22 |
댓글