프론트엔드1-10. css transition(예제) / visibility와 display

transition-duration

CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공한다.
속성 변경이 즉시 영향을 미치게 하는 대신, 속성의 변화가 일정 기간에 걸쳐 일어나게 한다.
transition-duration( 숫자) : 전환효과가 일어나는 지속시간을 명시

예제1)

1.HTML 파일

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>duration</title>
	<link rel="stylesheet" href="newFile.css" type="text/css"></link>
</head>
<body>
	<input type="checkbox"/>click
	<div>
		<img src="../img/img2.jpg"/>
		<img src="../img/img3.jpg"/>
	</div>
</body>
</html>

2. CSS 파일

@charset "UTF-8";
	
div {width: 300px; height: 300px; border: 5px solid  red;}

div>img{width:100%;}

이미지가 div태그를 넘어갔다. (overflow!)

예제2) overflow로 다 보이게 하고 click했을 때 불투명하게 보이면서 천천히 없어지게 하기

2. CSS 파일(HTML파일은 동일함)

@charset "UTF-8";
 
/* overflow : scroll, auto, hidden*/	
div {
	width: 300px; height: 300px; border: 5px solid red;
	overflow:auto;  /*div 크기에 맞춰서 스크롤이 생김*/
	transition-duration:3s;
}

div>img{width:100%;}

/*checkbox가 하나이기 떄문에 [type=checkbox]는 생략 가능*/
/*동위선택자(+) checkbox 다음 객체인 div 선택*/
input[type=checkbox]:checked + div {
	height:0; /*없어지게 해야한다.*/
	opacity:0;  /*0: 투명, 1: 불투명, 1로 하게 되면 div의 테두리가 보인다.*/
}

checked가 될 때 div안에 있는 것들이 height가 0이되니까 위로 올라가면서 없어지고, 0이라서 아예 div의 테두리까지 없어진다.
check를 풀면 다시 생긴다.

opacity가 1이면 이렇게 된다.

Visibility

visible	박스가 보여진다.
hidden	박스가 보이지 않지만 공간을 확보하기 때문에 레이아웃에 영향을 미친다.

Display

block	박스가 보여진다.
none	박스가 보이지 않으면서 공간도 반납한다.(레이아웃에 영향을 미치지 않는다.)

visibility보다는 display를 더 많이 사용한다.

예제1) Visibility 사용

1. HTML 파일

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>duration</title>
	<link rel="stylesheet" href="newFile.css" type="text/css"></link>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
</body>
</html>

2. CSS 파일

@charset "UTF-8";
 
div {
	width:200px; height:200px; border:1px solid gray;
}

div:first-child{
	background:#FFEBB7;
	visibility:hidden;
}

div:nth-child(2) {
	background:#B4E8C0;
}

div:last-child{
	background:#C8E7ED;
}

만약 visibility:visible이면

예제2) Display 사용

1.CSS 파일(HTML 파일은 동일)

@charset "UTF-8";
 
div {
	width:200px; height:200px; border:1px solid gray;
}

div:first-child{
	background:#FFEBB7;
	visibility:visible;
}

div:nth-child(2) {
	background:#B4E8C0;
	display:none;
}

div:last-child{
	background:#C8E7ED;
}

두번째 div가 display:none이 되면서 사라지고 공간도 없어졌다.

만약 display:block이면?

저작자표시

'멀티캠퍼스 풀스택 과정 > 프론트엔드' 카테고리의 다른 글

프론트엔드2-2. 반응형 웹(미디어쿼리)과 meta 태그 (0)	2022.02.07
프론트엔드2-1. div로 layout / Semantic 태그로 layout (0)	2022.02.07
프론트엔드1-9. margin과 padding (0)	2022.02.07
프론트엔드1-8. CSS border속성 (0)	2022.02.05
프론트엔드1-7. CSS 외부 스타일 시트 적용하기(Link와 @import) (0)	2022.02.05