본문 바로가기
CS Study/HTML

6. 동적 변화 만들기

Ryannn 2022. 4. 8. 12:28

1. 애니메이션(@keyframes animation) 기능

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>애니메이션 기능</title>
	<style>
		@keyframes animation{
			0% {font-size : 500%;}
			100%{font-size : 100%;
				margin-left : 500px;}
		}
		h1{
			animation-name : animation;
			animation-duration: 5s;
			animation-iteration-count : infinite;
		}
	</style>
		
</head>
<body>
	<h1>꽝!</h1>
	<hr>
	꽝! 글자가 3초동안 500%에서 시작하여 100%로 바뀌는 애니메이션입니다. 무한 반복합니다.

</body>
</html>

2. font-size 전환(transition)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>전환</title>
	<style>
		span:hover{
			font-size : 500%;
		}
		span{
			transition : font-size 5s;
		}

	</style>
</head>
<body>
	<h1>font-size에 대한 전환</h1>
	<hr>
	<span>꽝!</span>글자에 마우스를 올려보세요.

</body>
</html>

3. 다양한 변환(transform)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>다양한 변환 사례</title>
	<style>
		div{
			display : inline-block;
			background : olivedrab;
			color : white;
			padding : 5px;
		}
		div#rotate{
			transform : rotate(20deg);
		}
		div#skew{
			transform : skew(0,-20deg);
		}
		div#translate{
			transform : translateY(100px);
		}
		div#scale{
			transform : scale(3,1);
		}
		div#rotate:hover{
			transform : rotate(80deg);
		}
		div#skew:hover{
			transform : skew(0,-60deg);
		}
		div#translate:hover{
			transform : translate(50px,100px);
		}
		div#scale:hover{
			transform : scale(4,2);
		}
		div#scale:active{
			transform : scale(1,5);
		}
	</style>
</head>
<body>
	<h2>다양한 Transform</h2>
	아래는 회전(rotate), 기울임(skew), 이동(translate), 확대/축소(scale)가 적용된 사례이다. 또한 마우스를 올리면 추가적 변환이 일어난다.
	<hr>
	<div id = "rotate">rotate(20deg)</div>
	<div id = "skew">skew(0,-20deg)</div>
	<div id = "translate">translateY(100px)</div>
	<div id = "scale">scale(3,1)</div>

</body>
</html>

4. CSS 고급 활용

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>컴퓨터 기술 소개</title>
	<style>
		@import url("openchallenge5.css");
	</style>

</head>
<body>
	<header>
		<h1>스마트폰</h1>
		<p class = "explain">스마트폰은 컴퓨터를 결합한 무선 휴대전화기이다. PC에서 실행되는 운영체제보다 작게 만든 모바일 운영체제를 탑재하여 인터넷 검색, 전자우편, 간단한 문서 편집, 카메라, 오디오
		및 비디오 재생 등 PC의 기능을 거의 모두 갖추고 있다.</p>
		<audio src="example1.mp3" controls></audio>
	</header>
	<br>
	<nav>
		<h3>목차</h3>
		<ul>
			<li><a href="#history" style="text-decoration: none">역사</a></li>
			<li><a href="#android" style="text-decoration: none">안드로이드폰</a></li>
			<li><a href="#iphone" style="text-decoration: none">아이폰</a></li>
			<li><a href="#sample" style="text-decoration: none">샘플</a></li>
		</ul>
	</nav>
	<section>
		<article>
			<h3><p id="history">역사</p></h3>
			<p>최초의 스마트폰은 IBM 사이먼이다. IBM사가 1992년에 설계하여 그 해에 미국 네바다 주의 라스베이거스에서 열린 컴댁스에서 컨셉 제품으로 전시되었다. 1993년에 대중에게 공개되었고 벨사우스에게 팔렸다.</p>
		</article>
		<br>
		<article>
			<h3><p id="android">안드로이드</p></h3>
			<p>Android는 리눅스 커널을 기반으로 Google에서 제작하고 있는 스마트폰과 같은 플랫폼의 모바일 운영 체제와 미들웨어 및 중요 애플리케이션이 포함된 소프트웨어 집합이다. Google은 새로운 운영 체제의 버전 공개와 동시에 소스를 공개하고 있다. 이렇게 공개된 소스를 AOSP라고 한다.</p>
		</article>
		<br>
		<article>
			<h3><a href ="https://ko.wikipedia.org/wiki/%EC%95%84%EC%9D%B4%ED%8F%B0" target="_blank" style="text-decoration: none"><p id="iphone">아이폰</p></a></h3>
			<p>Apple이 2007년 1월 MacWorld에서 최초로 공개한 iOS로 구동되는 스마트폰이다. 2021년 9월 기준 누적판매량 20억 대를 돌파한 것으로 추정되고, 2021년 1월 기준으로 활성 아이폰 사용자수가 10억 명 이상이다.</p>
		</article>
		<br>
		<article>
			<h3><p id="sample">샘플</p></h3>
			<table>
				<caption>스마트폰 샘플</caption>
				<tbody>
					<tr>
						<td><img src="1.jpg" width="300" height="300"></td><td><img src="2.jpg"width="300" height="300"></td><td><img src="3.jpg"width="300" height="300"></td>
					</tr>
				</tbody>
			</table>
		</article>
	</section>
	<footer>
		<a href ="survery5.html" target = "_blank" style="text-decoration: none"><p>설문조사</p></a><br>
		Copyright 2022 by cjw
	</footer>
</body>
</html>
html, body{
	padding : 0px;
	margin : 0px;
	height : 100%;
	width : 100%;
}
header{
	display : inline-block;
	height : 25%;
	background : yellow;
}
header h1{
	text-align : center;
}
nav{
	display : inline-block;
	width : 20%;
	height : 110%;
	float : left;
	background : orange;
}
section{
	display : inline-block;
	width : 80%;
	height : 110%;
	float : right;
	background : skyblue;
}
footer {
	display : inline-block;
	width : 100%;
	height : 15%;
	background : violet;
}
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>소프트웨어 기술 선호에 관한 설문</title>
	<style>
		@import url("survey5.css");
	</style>
</head>
<body>
	<header>
		<h1>설문지</h1>
		소프트웨어 기술에 대한 의견을 듣습니다. 많은 참여 부탁드립니다.
	</header>
	<section>
		<form>
			<article>
				<p class = "question">학년</p>
				<label><input type="radio" name="grade" value="1">1학년 </label>
				<label><input type="radio" name="grade" value="2">2학년 </label>
				<label><input type="radio" name="grade" value="3">3학년 </label>
				<label><input type="radio" name="grade" value="4">4학년 </label>
			</article>
			<br>
			<article>
				<p class = "question">성별</p>
				<label><input type="radio" name="gender" value="1">남 </label>
				<label><input type="radio" name="gender" value="2">여 </label>
			</article>
			<br>
			<article>
				<p class = "question">관심 분야 </p>
				<select name ="field">
					<option value="1">모바일 소프트웨어</option>
					<option value="2">웹 프로그래밍</option>
					<option value="3">게임 개발</option>
				</select>
			</article>
			<br>
			<article>
				<p class = "question">진로</p>
				<label><input type = "checkbox" value="1">개발 </label>
				<label><input type = "checkbox" value="2">기획 </label>
				<label><input type = "checkbox" value="3">영업 </label>
				<label><input type = "checkbox" value="4">창업 </label>
			</article>
			<br>
			<article>
				<p class = "question">남기고 싶은 말</p>
				<textarea cols= 100 rows = 15 placeholder ="글을 남겨주세요"></textarea>
			</article>
		</form>
	</section>
	<br>
	<footer>
		<small>Copyright 2022 by cjw</small>
	</footer>
</body>
</html>
html, body{
	padding : 0px;
	margin : 0px;
	height : 100%;
	width : 100%;
}
header{
	display : inline-block;
	height : 20%;
	width : 100%;
	background : yellow;
}
header h1{
	text-align : center;
}
section{
	display : inline-block;
	width : 100%;
	height : 60%;
	background : pink;
}
p{
	display : inline-block;
}
footer{
	display : inline-block;
	background : violet;
	width : 100%;
	height : 10%;
}
저작자표시

'CS Study > HTML' 카테고리의 다른 글

4. 웹 폼  (0) 2022.04.07
3. 시맨틱 태그  (0) 2022.04.07
1. HTML 태그  (0) 2022.04.07

'CS Study/HTML' Related Articles

티스토리툴바