속성을 서서히 변화시키는 속성

CSS

1 transition
2 transition-property
3 transition-timing-function
4 transition-duration
5 transition-delay

transition

transition은 속성을 서서히 변화시키는 속성입니다.
transition-property, transition-duration, transition-timing-function, transition-delay 속성을 한 번에 정합니다.
IE는 버전 10부터 지원합니다.

문법

transition: property timing-function duration delay | initial | inherit

property : transition을 적용시킬 속성을 정합니다. transition-property를 참고하세요.
timing-function : transition의 진행 속도를 정합니다. transition-timing-function를 참고하세요.
duration : transition의 총 시간을 정합니다. transition-duration을 참고하세요.
delay : transition의 시작을 연기합니다. transition-delay를 참고하세요.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

예제

체크박스에 체크하면 원이 큰 사각형으로 바뀌고, 배경색도 변합니다.
체크박스의 체크를 해제하면 원래 모양으로 돌아옵니다.

<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>CSS</title>
		<style>
			.jb {
				box-sizing: border-box;
				width: 64px;
				height: 64px;
				margin: 10px 0px;
				background-color: orange;
				border-radius: 100%;
				transition: all ease 2s 0s;
			}
			input:checked ~ .jb {
				width: 100%;
				height: 200px;
				border-radius: 0;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<input type="checkbox">
		<div class="jb"></div>
	</body>
</html>

transition-property

transition-property로 transition이 적용될 속성을 정합니다.
IE는 버전 10부터 지원합니다.

문법

transition-property: none | all | property | initial | inherit

none : 모든 속성에 적용하지 않습니다.
all : 모든 속성에 적용합니다.
property : 속성을 정합니다. 여러 개의 속성을 지정할 경우 쉼표로 구분합니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

예제

체크박스에 체크하면 width, border-radius, background-color의 속성 값이 바뀝니다.
첫 번째 박스는 모든 속성에 애니메이션 효과가 적용됩니다.
두 번째 박스는 width와 background-color에만 애니메이션 효과가 적용됩니다. border-radius는 체크하자마자 적용됩니다.

<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>CSS</title>
		<style>
			body {
				font-family: Consolas, monospace;
			}
			.jb {
				box-sizing: border-box;
				width: 64px;
				height: 64px;
				margin: 10px 0px;
				background-color: orange;
				transition-duration: 4s;
			}
			input:checked ~ .jb {
				width: 100%;
				border-radius: 20px;
				background-color: red;
			}
			.jb1 {
				transition-property: all;
			}
			.jb2 {
				transition-property: width, background-color;
			}
		</style>
	</head>
	<body>
		<input type="checkbox">
		<p>transition-property: all</p>
		<div class="jb jb1"></div>
		<p>transition-property: width, background-color</p>
		<div class="jb jb2"></div>
	</body>
</html>

transition-timing-function

transition-timing-function으로 transition의 진행 속도를 조절할 수 있습니다.
IE는 버전 10부터 지원합니다.

문법

transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps( n, start|end ) | cubic-bezier( n, n, n, n ) | initial | inherit;

기본값은 ease입니다.
ease : cubic-bezier( 0.25, 0.1, 0.25, 1 )과 같습니다.
linear : cubic-bezier( 0, 0, 1, 1 )과 같습니다.
ease-in : cubic-bezier( 0.42, 0, 1, 1 )과 같습니다.
ease-out : cubic-bezier( 0, 0, 0.58, 1 )과 같습니다.
ease-in-out : cubic-bezier( 0.42, 0, 0.58, 1 )과 같습니다.
step-start : steps( 1, start )와 같습니다.
step-end : steps( 1, end )와 같습니다.
steps( n, start|end ) : n단계로 나누어서 변화시킵니다. start 또는 end를 입력하지 않음녀 end로 처리합니다.
cubic-bezier( n, n, n, n ) : n에는 0부터 1까지의 수를 넣습니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

예제 1

ease, linear, ease-in, ease-out, ease-in-out, step-start, step-end를 비교하는 예제입니다.
체크박스에 체크하면 애니메이션이 시작되고, 체크를 해제하면 원래대로 돌아옵니다.

<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>CSS</title>
		<style>
			.jb {
				box-sizing: border-box;
				width: 16px;
				height: 16px;
				margin: 10px 0px;
				background-color: orange;
				transition-property: all;
				transition-duration: 4s;
			}
			input:checked ~ .jb {
				width: 100%;
			}
			.jb1 {
				transition-timing-function: ease;
			}
			.jb2 {
				transition-timing-function: linear;
			}
			.jb3 {
				transition-timing-function: ease-in;
			}
			.jb4 {
				transition-timing-function: ease-out;
			}
			.jb5 {
				transition-timing-function: ease-in-out;
			}
			.jb6 {
				transition-timing-function: step-start;
			}
			.jb7 {
				transition-timing-function: step-end;
			}
		</style>
	</head>
	<body>
		<input type="checkbox">
		<p>ease</p>
		<div class="jb jb1"></div>
		<p>linear</p>
		<div class="jb jb2"></div>
		<p>ease-in</p>
		<div class="jb jb3"></div>
		<p>ease-out</p>
		<div class="jb jb4"></div>
		<p>ease-in-out</p>
		<div class="jb jb5"></div>
		<p>step-start</p>
		<div class="jb jb6"></div>
		<p>step-end</p>
		<div class="jb jb7"></div>
	</body>
</html>

예제 2

steps( n, start|end )를 이용하여 4단계로 나누어 변화시키는 예제입니다.
start로 설정한 경우 각 단계를 시작할 때, end로 설정한 경우 각 단계가 끝날 때 변화시킵니다.

<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>CSS</title>
		<style>
			.jb {
				box-sizing: boerder-box;
				width: 16px;
				height: 16px;
				margin: 10px 0px;
				background-color: orange;
				transition-property: all;
				transition-duration: 4s;
			}
			input:checked ~ .jb {
				width: 100%;
			}
			.jb1 {
				transition-timing-function: steps( 4 );
			}
			.jb2 {
				transition-timing-function: steps( 4, end );
			}
		</style>
	</head>
	<body>
		<input type="checkbox">
		<p>steps( 4, start )</p>
		<div class="jb jb1"></div>
		<p>steps( 4, end )</p>
		<div class="jb jb2"></div>
	</body>
</html>

cubic-bezier( n, n, n, n )

cubic-bezier( n, n, n, n )를 사용할 때 n에 들어갈 값은 http://cubic-bezier.com에서 찾을 수 있습니다.
점을 움직여서 원하는 커브를 만들고, 상단에 있는 수를 사용합니다.

transition-duration

transition-duration로 transition이 끝날 때까지 걸리는 시간을 정합니다.
IE는 버전 10부터 지원합니다.

문법

transition-duration: time| initial | inherit

기본값은 0s입니다.
시간 단위는 초(s) 또는 1/1000초(ms)를 사용합니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

예제

체크박스에 체크하면 박스가 커집니다.
첫 번째 박스는 다 커지는데 1초가 걸립니다.
두 번째 박스는 다 커지는데 0.4초가 걸립니다.

<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>CSS</title>
		<style>
			body {
				font-family: Consolas, monospace;
			}
			.jb {
				box-sizing: border-box;
				width: 64px;
				height: 64px;
				margin: 10px 0px;
				background-color: orange;
			}
			input:checked ~ .jb {
				width: 100%;
			}
			.jb1 {
				transition-duration: 1s;
			}
			.jb2 {
				transition-duration: 400ms;
			}
		</style>
	</head>
	<body>
		<input type="checkbox">
		<p>transition-duration: 1s;</p>
		<div class="jb jb1"></div>
		<p>transition-duration: 400ms;</p>
		<div class="jb jb2"></div>
	</body>
</html>

transition-delay

transition-delay로 transition이 시작하는 시간을 연기할 수 있습니다.
IE는 버전 10부터 지원합니다.

문법

transition-delay: time| initial | inherit

기본값은 0s입니다.
시간 단위는 초(s) 또는 1/1000초(ms)를 사용합니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

예제

체크박스에 체크하면 1초에 걸쳐 박스가 커집니다.
첫 번째 박스는 0.5초 대기 후 커집니다. 즉, 박스가 커지는데 1.5초가 걸립니다.
두 번째 박스는 1초 대기 후 커집니다. 즉, 박스가 커지는데 2초가 걸립니다.

<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>CSS</title>
		<style>
			body {
				font-family: Consolas, monospace;
			}
			.jb {
				box-sizing: border-box;
				width: 64px;
				height: 64px;
				margin: 10px 0px;
				background-color: orange;
				transition-duration: 1s;
			}
			input:checked ~ .jb {
				width: 100%;
			}
			.jb1 {
				transition-delay: 0.5s;
			}
			.jb2 {
				transition-delay: 1s;
			}
		</style>
	</head>
	<body>
		<input type="checkbox">
		<p>transition-delay: 0.5s;</p>
		<div class="jb jb1"></div>
		<p>transition-delay: 1s;</p>
		<div class="jb jb2"></div>
	</body>
</html>

CSS / display 속성으로 표 만들기 - table, table-row, table-cell

display 속성값 중 표와 관련된 값들 display 속성값으로 table, table-row, table-cell 등을 사용해서 요소를 표(table)처럼 표현할 수 있습니다. 표처럼 보이기 위해 사용할 수 있는 속성값들은 다음과 같습니다. table : <table> 요소처럼 표현합니다. table-caption : <caption> 요소처럼 표현합니다. table-column-group : <colgroup> 요소처럼 표현합니다. table-header-group : <thead> 요소처럼 표현합니다. table-footer-group : <tfoot> 요소처럼 표현합니다. table-row-group : <tbody> 요소처럼 표현합니다. table-cell ...

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 ...

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를 의미합니다. 예제 마우스를 올렸을 때 회전합니다. 회전하는 ...

CSS / Flex / order / 아이템의 순서 정하는 속성

Flex로 아이템을 배치할 때, 입력한 순서대로 출력됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; margin: 0px; ...

CSS / tab-size / 탭 크기 설정하는 속성

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> 웹브라우저에서는 다음처럼 출력합니다. 탭 크기가 ...

CSS / word-break / 줄바꿈을 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성

개요 word-break는 줄바꿈을 할 때 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성은 입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 3 문법 word-break: normal | break-all | keep-all | initial | inherit; normal : CJK 문자는 글자 기준으로, CJK 이외의 문자는 단어 기준으로 줄바꿈합니다. break-all : 글자 기준으로 줄바꿈합니다. keep-all : ...

CSS / backface-visibility / 요소의 뒷쪽에서 앞면이 보이게 할지 정하는 속성

backface-visibility backface-visibility는 요소의 뒷쪽에서 앞면이 보이게 할지 정하는 속성입니다. 기본값 : visible 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 backface-visibility: visible | hidden | initial | inherit visible : 보이게 합니다. 기본값입니다. hidden : 보이지 않게 합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 체크박스에 체크하면 박스가 180도 회전합니다. 첫 번째 박스는 앞면이 보이고, 두 번째 박스는 ...

CSS / Grid / grid-column-gap, grid-row-gap, grid-gap

그리드 아이템 사이의 간격을 정하는 속성은 grid-row-gap, grid-column-gap, grid-gap입니다. grid-column-gap은 열 사이의 간격, grid-row-gap은 행 사이의 간격, grid-gap은 행과 열의 간격을 동시에 정할 수 있는 축약형입니다. 아래는 아이템 사이에 간격이 없는 간단한 그리드입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CSS / 메모

크롬에서 input에 생기는 파란색 테두리 없애는 방법 input에 무언가를 입력하려고 커서를 위치시키면 다음처럼 테두리가 생깁니다. :focus 선택자를 이용해서 없앨 수 있습니다. input:focus { outline: none; } iOS에서 input에 생기는 그림자와 둥근 테두리 없애는 방법 iOS에서는 input이 둥근 테두리로 나오고 그림자 효과가 있습니다. 이를 없애는 방법은 다음과 같이 스타일링하는 것입니다. input { -webkit-appearance: none; border-radius: 0px; } 가변폭 ...

CSS / Flex / align-content

flex-wrap 속성의 값이 wrap인 경우, 아이템들의 가로폭의 합이 콘테이너의 가로폭을 넘어가면 아이템이 다음 줄로 내려갑니다. 이때 여러 줄이 되어버린 아이템들의 정렬을 어떻게 할지 정하는 속성이 align-content입니다. 기본값은 stretch로, 높이를 꽉 채웁니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CODING FACTORY