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 / 마우스로 텍스트 드래그했을 때 배경색, 글자색 바꾸기
웹브라우저에서 텍스트를 마우스로 드래그하면 선택된 글자는 파란색 배경에 흰색을 바뀝니다. 이 색은 CSS로 바꿀 수 있습니다. 사용하는 선택자는 가상 요소 ::selection입니다. 다음은 텍스트를 선택했을 때 배경은 검은색으로, 글자는 노란색으로 만드는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ::selection { background-color: black; color: yellow; } </style> </head> <body> <h1>Lorem ipsum dolor sit amet</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. ...
CSS / border-style / 테두리 모양 정하는 속성
개요 border-style은 테두리(border)의 모양을 정하는 속성으로, 다음 속성의 단축 속성이다. border-top-style border-right-style border-bottom-style border-left-style 문법 border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit initial : 기본값으로 설정한다. 기본값은 none이다. inherit : 부모 요소의 속성값을 상속받는다. 속성값은 한 개에서 네 개까지 정할 수 있다. 다음은 모든 ...
align-items로 교차축(cross axis) 아이템 정렬을 정합니다. 예를 들어 flex-direction의 값이 row인 경우 수직 정렬을 정합니다. 아래는 flex-direction: row일 때의 예제입니다. 기본값은 stretch로, 콘테이너의 높이에 맞게 늘립니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { ...
CSS / font-size / 글자 크기 정하는 속성
개요 font-size는 글자 크기를 정하는 속성입니다. 기본값 : medium 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1 문법 font-size: medium | xx-small | x-small | small | large | x-large | xx-large | smaller | larger | length | initial | inherit medium : 웹브라우저에서 정한 기본 글자크기입니다. xx-small, x-small, small, large, x-large, xx-large : medium에 ...
CSS / list-style-image / 목록의 마커로 이미지 사용하기
개요 list-style-image로 이미지를 ul, ol 등의 목록의 마커(marker)로 사용할 수 있습니다. 기본값 : none 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 list-style-image: none | url | initial | inherit none : 이미지가 없습니다. url : 사용할 이미지의 URL을 입력합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 이미지는 원본 크기 그대로 나옵니다. 따라서 글자 크기에 ...
CSS는 같은 속성을 여러 번 정의했을 때, 나중에 설정한 값이 적용된다. 만약 나중에 설정한 값이 적용되지 않게 하려면 속성값 뒤에 !important를 붙인다. property: value !important; 예를 들어 다음은 마지막에 설정한 color의 값이 blue이므로, red는 무시하고 문단의 글자색을 파란색으로 만든다. p { color: red; } p { color: blue; } 하지만 다음은 red에 !important가 있으므로 문단의 ...
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은 아이템들의 가로 크기 합이 콘테이너의 가로 크기를 넘어갈 때 어떻게 처리할지를 정합니다. 기본값은 nowrap로... <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> * { box-sizing: border-box; ...
CSS / 선택자(Selector) / 가상 요소와 가상 클래스 순서
가상 요소(Pseudo-elements)를 이용하면 특정 요소 앞에 문자열이나 이미지를 넣을 수 있습니다. HTML을 변경하지 않고 요소를 추가할 수 있는 유용한 선택자입니다. 다음은 가상 요소를 이용하여 Hello라는 문자열을 추가한 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> h1:before ...
CSS / padding - 안쪽 여백, margin - 바깥 여백
여백에는 안쪽 여백과 바깥 여백이 있다. 안쪽 여백은 padding 속성으로, 바깥 여백은 margin 속성으로 정한다. 여백을 정하면 요소의 크기가 바뀔 수 있다. 어떤 기준으로 크기를 정할 지는 box-sizing 속성으로 정한다. 속성값 부여하기 padding과 margin 속성에 값을 부여하는 방법은 다음과 같다. padding: xx yy zz ww; margin: xx yy zz ww; xx는 위, yy는 오른쪽, zz는 아래, ww는 ...