CSS / 애니메이션 / transform / 회전, 확대, 축소, 비틀기 등 형태 변형하는 속성
CSS3의 transform 속성으로 요소를 회전하거나 확대/축소하거나 비트는 등 형태를 변형할 수 있습니다.
IE는 버전 10 이상부터 지원한다는 것에 주의합니다.
transform / rotate
- transform의 rotate로 요소를 회전시킬 수 있습니다.
문법
transform: rotate( angle ) transform: rotateX( angle ) transform: rotateY( angle )
- angle에는 각의 크기를 입력합니다.
- 단위는 deg, rad, grad, turn 등을 사용합니다.
- turn은 1회전, 즉 360deg를 의미합니다.
예제
- 마우스를 올렸을 때 회전합니다. 회전하는 과정을 보기 위해 transition 속성을 추가했습니다.
- 각이 양수인 경우 시계방향으로 회전합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
.jb {
width: 100px;
height: 100px;
margin: 60px auto;
background-color: orange;
transition: all ease 1s;
}
.jb:hover {
transform: rotate( 45deg );
}
</style>
</head>
<body>
<div class="jb"></div>
</body>
</html>
- 각이 음수면 반시계 방향으로 회전합니다.
.jb:hover {
transform: rotate( -45deg );
}
- 각이 크게 하여 빙글빙글 돌게 하는 효과를 줄 수 있습니다.
.jb:hover {
transform: rotate( 720deg );
}
- rotateX는 가로를 축으로 하여 회전합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
* {
box-sizing: border-box;
}
.jb-box {
width: 100px;
height: 100px;
margin: 50px auto;
padding: 20px;
background-color: orange;
transition: all 0.5s linear;
}
.jb-circle {
width: 100%;
height: 100%;
border: 10px solid #ffffff;
border-radius: 50%;
}
.jb-box:hover {
transform: rotateX( 180deg )
}
</style>
</head>
<body>
<div class="jb-box">
<div class="jb-circle"></div>
</div>
</body>
</html>
- rotateY는 세로를 축으로 하여 회전합니다.
.jb-box:hover {
transform: rotateY( 180deg )
}
transform / translate
- transform의 translate로 요소를 이동시킬 수 있습니다.
문법
transform: translateX( 50px )
오른쪽으로 50px 이동합니다. 길이 단위를 음수로 지정하면 왼쪽으로 이동합니다.
transform: translateY( 50px )
아래쪽으로 50px 이동합니다. 길이 단위를 음수로 지정하면 위쪽으로 이동합니다.
transform: translate( 50px, 50% )
오른쪽으로 50px, 아래쪽으로 50% 이동합니다.
예제
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
* {
box-sizing: border-box;
}
.jb-box {
width: 100px;
height: 100px;
margin: 50px auto;
padding: 20px;
background-color: orange;
transition: all 0.5s linear;
}
.jb-circle {
width: 100%;
height: 100%;
border: 10px solid #ffffff;
border-radius: 50%;
}
.jb-box:hover {
transform: translateX( 50px )
}
</style>
</head>
<body>
<div class="jb-box">
<div class="jb-circle"></div>
</div>
</body>
</html>
.jb-box:hover {
transform: translateX( -50px )
}
.jb-box:hover {
transform: translateY( -50px )
}
.jb-box:hover {
transform: translate( 50px, 50% )
}
transform / scale
- transform의 scale로 요소를 확대 또는 축소할 수 있습니다.
- 1보다 큰 수는 확대, 1보다 작은 수는 축소입니다.
문법
transform: scale( 2.0 );
가로와 세로 모두 2배 확대합니다.
transform: scale( 2.0, 1.5 );
가로로 2배, 세로로 1.5배 확대합니다.
transform: scaleX( 2.0 );
가로로 2배 확대합니다.
transform: scaleY( 1.5 );
세로로 1.5배 확대합니다.
예제
- 마우스를 올렸을 때 확대됩니다. 그 과정을 보기 위해 transition 속성을 추가했습니다.
- 마우스를 올리면 가로로 1.5배 확대합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
* {
box-sizing: border-box;
}
.jb-box {
width: 100px;
height: 100px;
margin: 50px auto;
padding: 20px;
background-color: orange;
transition: all 0.5s linear;
}
.jb-circle {
width: 100%;
height: 100%;
border: 10px solid #ffffff;
border-radius: 50%;
}
.jb-box:hover {
transform: scaleX( 1.5 )
}
</style>
</head>
<body>
<div class="jb-box">
<div class="jb-circle"></div>
</div>
</body>
</html>
- 세로로 1.5배 확대합니다.
.jb-box:hover {
transform: scaleY( 1.5 )
}
- 가로 세로 모두 1.5배 확대합니다.
.jb-box:hover {
transform: scale( 1.5 )
}
- 가로로 2.0배, 세로로 1.5배 확대합니다.
.jb-box:hover {
transform: scale( 2.0, 1.5 )
}
transform / skew
- transform의 skew로 요소를 비틀 수 있습니다.
문법
transform: skewX( 30deg );
가로 방향으로 30도 비틉니다.
transform: skewY( 30deg );
세로 방향으로 30도 비틉니다.
transform: skewX( 30deg, 60deg );
가로 방향으로 30도, 세로 방향으로 60도 비틉니다.
예제
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
* {
box-sizing: border-box;
}
.jb-box {
width: 100px;
height: 100px;
margin: 50px auto;
padding: 20px;
background-color: orange;
transition: all 0.5s linear;
}
.jb-circle {
width: 100%;
height: 100%;
border: 10px solid #ffffff;
border-radius: 50%;
}
.jb-box:hover {
transform: skewX( 30deg )
}
</style>
</head>
<body>
<div class="jb-box">
<div class="jb-circle"></div>
</div>
</body>
</html>
.jb-box:hover {
transform: skewY( 30deg )
}
.jb-box:hover {
transform: skew( 30deg, 60deg )
}
CSS의 border 속성으로 삼각형을 만들 수 있다. 여러 형태의 삼각형을 만들고, 그 삼각형을 회전하는 방법을 알아본다. 삼각형 만들기 기본 HTML 문서에 다음과 같이 내용이 없는 요소를 하나 만든다. <div class="triangle"></div> 가로와 세로의 크기를 0으로 만든다. 아래쪽, 왼쪽, 오른쪽에 테두리를 추가하면 사각형을 만들 수 있다. .triangle { width: 0px; height: 0px; border-bottom: 360px solid #666666; ...
배경과 내용의 투명도 CSS의 opacity 속성으로 요소의 투명도를 정할 수 있습니다. opacity 속성은 선택한 요소의 배경과 내용 모두를 투명하게 만듭니다. 간단한 예제는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div { ...
짧은 밑줄 만들기 밑줄은 보통 text-decoration이나 border 속성으로 만듭니다. 그런데 그렇게 만든 밑줄은 선택한 요소 전체에 적용됩니다. 즉, 요소가 길면 밑줄도 길게 만들어지고, 요소가 짧으면 밑줄도 짧게 만들어집니다. 요소보다 짧은 밑줄을 만드는 방법은 :after 선택자를 이용하는 것입니다. 요소 뒤에 선을 만들고 위치와 길이를 정해주면 됩니다. 예를 들어 h1 요소에 짧은 밑줄을 만들고 싶다면 다음과 ...
CSS / opacity / 요소를 투명하게 만드는 속성
개요 opacity로 요소의 투명도를 정할 수 있습니다. 기본값 : 1 상속 : No 애니메이션 : Yes 버전 : CSS Level 3 문법 opacity: number | initial | inherit number : 0.0부터 1.0까지의 수를 넣습니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 숫자가 작을수록 투명해집니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS Reference ...
표와 관련된 정렬 표와 관련된 정렬에는 표 정렬, 셀 안의 내용 가로 정렬, 셀 안의 내용 세로 정렬이 있습니다. 기본 모양은 표 : 왼쪽 정렬 제목 셀(th) 안의 내용 가로 정렬 : 가운데 정렬 내용 셀(td) 안의 내용 세로 정렬 : 왼쪽 정렬 셀 안의 내용 세로 정렬 : 가운데 정렬 입니다. <!doctype html> <html lang="ko"> <head> ...
CSS는 같은 속성을 여러 번 정의했을 때, 나중에 설정한 값이 적용된다. 만약 나중에 설정한 값이 적용되지 않게 하려면 속성값 뒤에 !important를 붙인다. property: value !important; 예를 들어 다음은 마지막에 설정한 color의 값이 blue이므로, red는 무시하고 문단의 글자색을 파란색으로 만든다. p { color: red; } p { color: blue; } 하지만 다음은 red에 !important가 있으므로 문단의 ...
Box Model HTML 요소는 박스(box)로 이루어져 있습니다. 박스 위에 박스를 얹거나 박스들을 배열하여 문서를 만들어 나갑니다. 예를 들어 다음과 같이 코드를 작성했다면 <body> <header> <h1>Lorem</h1> </header> </body> body 박스 위에 header 박스가 있고, header 박스 위에 h1 박스가 있는 것입니다. 박스의 구성 하나의 박스는 바깥 여백 영역, 테두리 영역, 안쪽 여백 영역, ...
HTML은 탭을 연속하여 여러 개 넣어도 하나의 공백으로 인식합니다. 하지만 pre 태그를 이용하면 입력된 그대로 출력할 수 있습니다. 기본적으로 하나의 탭을 8개의 공백으로 인식합니다. 예를 들어 아래처럼 코드를 만들면...(각 줄 앞에 있는 빈 칸은 모두 탭입니다.) <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> pre { font-family: Consolas, monospace; font-size: 24px; } </style> </head> <body> <pre> Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. </pre> </body> </html> 웹브라우저에서는 다음처럼 출력합니다. 탭 크기가 ...
개요 flex-wrap은 아이템들의 가로 크기 합이 콘테이너의 가로 크기를 넘어갈 때 어떻게 처리할지를 정한다. 문법 flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit nowrap : 기본값으로, 넘기지 않는다. wrap : 넘긴다. wrap-reverse : 역순으로 넘긴다. initial : 기본값으로 설정한다. inherit : 부모 요소의 속성값을 상속 받는다. 예제 - nowrap 기본값은 nowrap으로... <!doctype html> <html lang="ko"> <head> ...
개요 border는 다음의 속성을 포함하는 단축 속성으로, 테두리를 만든다. border-width border-style border-color 문법 border: border-width border-style border-color | initial | inherit border-width : 테두리의 두께를 정한다. 기본값은 medium이다. border-style : 테두리의 모양을 정한다. 기본값은 none이다. border-color : 테두리의 색을 정한다. 기본값은 선택한 요소의 색이다. initial : 기본값으로 설정한다. inherit : 부모 요소의 속성값을 상속받는다. border-width에는 다음의 값을 넣을 수 있다. medium | thick ...