kidsgao_1

Leejihye·2021년 7월 13일
0

학습한 내용

Index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="description" content="우리쌀 점ㅌ로 만든 키즈가오 웹사이트 소개">
	<meta name="keywords" content="키즈가오, 점토, 장난감">
	<meta name="author" content="키즈가오">
	<meta name="viewport" content="width=device-width", initial-scale=1.0>

	<title>키즈가오</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="css/animation.css">
	<link rel="stylesheet" type="text/css" href="css/mobile.css">
</head>
<body>

	<header id="intro">
		<div class="introWrap">
			<div class="logo"></div>
			<div class="lion"></div>
			<div class="rabbit"></div>
			<div class="bear"></div>
			<div class="monkey"></div>
		</div>

		<div class="cloudWrap">
			<div class="leftCloud"></div>
			<div class="rightCloud"></div>
			<div class="dragonfly"></div>
		</div>

	</header>

	<div id="farm1">
		<div class="leftRice1"></div>
		<div class="farmer"></div>
		<div class="rightRice1"></div>

		<div class="farmSpeechWrap">
			<img src="img/farm/farm1/farmspeech.png" align="우리쌀 점토">

			<p class="farmSpeech">
				식재료만 넣은 안전한<br>
				우리쌀 점토 키즈가오는<br>
				우리 쌀을 사용하여 만들어요.<br>
				화학물질을 사용하지 않고,<br>
				식재료를 사용해서 만든<br>
				안전한 제품이랍니다.
			</p>
		</div>
	</div>


	<div id="farm2">
		<div class="leftRice2"></div>
		<div class="scarecrow"></div>
		<div class="rightRice2"></div>
	</div>



	<div id="farm3">
		<div class="farm3Window"></div>
		<div class="machineWrap">
			<div class="machine1"></div>
			<div class="sawShadow"></div>
			<div class="saw1"></div>
			<div class="saw2"></div>
			<div class="machineBird"></div>
			<div class="timer"></div>
		</div>

		<img class="farm3Bubble" src="img/farm/farm3/farm3bubble.png" alt="기계를 통해서 쌀알이 딱딱한 껍질을 벗어냅니다">
	</div>
</body>
</html>

style.css

html, body{
	margin: 0;
	padding: 0;
}

body{
	overflow-x: hidden;
} 
/*가로 스크롤 생기는 것 방지*/

h1, h2, h3, h4, h5, h6, p{
	margin: 0;
	padding: 0;
}

button{
	border: none;
	background-color: transparent;
}

.clearfix{
	clear: both;
}

/*Intro*/
#intro {
	width: 100%;
	height: 1600px;
	background-image: url(../img/intro/intro_bg.png);

	/*padding-top: 100px;*/
}

#intro .introWrap {
	position: relative;

	width: 760px;
	height: 516px;
	/*background-color: yellow;*/

	left: 50%;
	margin-left: -380px;

	/*margin-top: 100px;*/
	top: 100px;
}

#intro .introWrap .logo{
	position: absolute;

	width: 760px;
	height: 516px;
	background-image: url(../img/intro/logo.png);

	z-index: 100;
}

#intro .introWrap .lion{
	position: absolute;

	width: 161px;
	height: 161px;
	background-image: url(../img/intro/lion.png);

	margin: 80px 0 0 30px;

}

#intro .introWrap .rabbit{
	position: absolute;

	width: 105px;
	height: 129px;
	background-image: url(../img/intro/rabbit.png);

	margin: 90px 0 0 580px;
}

#intro .introWrap .bear{
	position: absolute;

	width: 112px;
	height: 105px;
	background-image: url(../img/intro/bear.png);

	margin: 310px 0 0 560px;
	z-index: 200;
}

#intro .introWrap .monkey{
	position: absolute;

	width: 85px;
	height: 93px;
	background-image: url(../img/intro/monkey.png);

	margin: 310px 0 0 50px;
	z-index: 200;
}

#intro .cloudWrap {
	position: relative;

	width: 100%;
	height: 1050px;
	/*background-color: pink;*/
}

#intro .cloudWrap .leftCloud{
	position: absolute;

	width: 934px;
	height: 816px;
	background-image: url(../img/intro/cloud1.png);

	left: 0;
	z-index: 2;
}

#intro .cloudWrap .rightCloud{
	position: absolute;

	width: 843px;
	height: 858px;
	background-image: url(../img/intro/cloud2.png);

	right: 0;
}

#intro .cloudWrap .dragonfly{
	position: absolute;

	width: 366px;
	height: 228px;
	background-image: url(../img/intro/dragonfly.png);

	top: 800px;
}

/*fram1*/
#farm1{
	position: relative;

	width: 100%;
	height: 800px;
	background-image: url(../img/farm/farm1/far1_bg.png);
}

#farm1 .leftRice1 {
	position: absolute;

	width: 390px;
	height: 679px;
	background-image: url(../img/farm/farm1/leftrice.png);

	left: 0;
}

#farm1 .rightRice1 {
	position: absolute;

	width: 335px;
	height: 570px;
	background-image: url(../img/farm/farm1/rightrice.png);

	right: 0;
	top: 100px;
}

#farm1	.farmer {
	position: absolute;

	width: 747px;
	height: 1078px;
	background-image: url(../img/farm/farm1/farmer.png);

	left: 50%;
	margin-left: -310px;
}

#farm1 .farmSpeechWrap {
	position: relative;

	top: 250px;
	left: 150px;
}

#farm1 .farmSpeechWrap .farmSpeech {
	color: #895c2f;
	font-size: 18px;
	line-height: 27px;
}

/*farm2*/
#farm2 {
	position: relative;

	width: 100%;
	height: 850px;
	background-image: url(../img/farm/farm2/farm2_bg.png);
}

#farm2 .leftRice2{
	float: left;

	width: 250px;
	height: 850px;
	background-image: url(../img/farm/farm2/leftrice2.png);
}

#farm2 .rightRice2{
	float: right;

	width: 236px;
	height: 850px;
	background-image: url(../img/farm/farm2/rightrice2.png);
}

#farm2 .scarecrow{
	position: absolute;

	width: 103px;
	height: 206px;
	background-image: url(../img/farm/farm2/scarecrow.png);

	margin: 200px 0 0 300px;
}

/*farm3*/
#farm3 {
	position: relative;
	width: 100%;
	height: 850px;
	background-image: url(../img/farm/farm3/farm3_bg.png);
}

#farm3 .farm3Window{
	position: absolute;
	width: 247px;
	height: 169px;
	background-image: url(../img/farm/farm3/window.png);

	margin: 100px 0 0 100px;
}

#farm3 .machineWrap{
	position: relative;
	width: 600px;
	height: 455px;
	/*background-color: yellow;*/

	left: 50%;
	margin-left: -285px;
	top: 150px;
}

#farm3 .machineWrap .machine1{
	position: absolute;
	width: 586px;
	height: 455px;
	background-image: url(../img/farm/farm3/machine1.png);

	z-index: 900;
}

#farm3 .machineWrap .sawShadow{
	position: absolute;
	width: 95px;
	height: 95px;
	background-image: url(../img/farm/farm3/sawShadow.png);


	margin: 145px 0 0 145px;
}

#farm3 .machineWrap .saw1,
#farm3 .machineWrap .saw2{
	position: absolute;
	width: 95px;
	height: 95px;
	background-image: url(../img/farm/farm3/saw.png);
}

#farm3 .machineWrap .saw1{
	margin: 140px 0 0 140px;
}

#farm3 .machineWrap .saw2{
	margin: 140px 0 0 350px;
}

#farm3 .machineWrap .timer{
	position: absolute;
	width: 103px;
	height: 104px;
	background-image: url(../img/farm/farm3/second.png);

	margin: 125px 0 0 45px;
	z-index: 999;
}

#farm3 .machineWrap .machineBird{
	position: absolute;
	width: 44px;
	height: 49px;
	background-image: url(../img/farm/farm3/machinebird.png);

	margin: 220px 0 0 20px;
	z-index: 999;
}

#farm3 .farm3Bubble{
	position: absolute;
	top: 350px;
	right: 80px;
}

animation.css

html, body{
	margin: 0;
	padding: 0;
}

body{
	overflow-x: hidden;
} 

h1, h2, h3, h4, h5, h6, p{
	margin: 0;
	padding: 0;
}

button{
	border: none;
	background-color: transparent;
}

.clearfix{
	clear: both;
}

/*Intro*/
#intro {
	width: 100%;
	height: 1600px;
	background-image: url(../img/intro/intro_bg.png);

	/*padding-top: 100px;*/
}

#intro .introWrap {
	position: relative;

	width: 760px;
	height: 516px;
	/*background-color: yellow;*/

	left: 50%;
	margin-left: -380px;

	/*margin-top: 100px;*/
	top: 100px;
}

#intro .introWrap .logo{
	position: absolute;

	width: 760px;
	height: 516px;
	background-image: url(../img/intro/logo.png);

	z-index: 100;
}

#intro .introWrap .lion{
	position: absolute;

	width: 161px;
	height: 161px;
	background-image: url(../img/intro/lion.png);

	margin: 80px 0 0 30px;

}

#intro .introWrap .rabbit{
	position: absolute;

	width: 105px;
	height: 129px;
	background-image: url(../img/intro/rabbit.png);

	margin: 90px 0 0 580px;
}

#intro .introWrap .bear{
	position: absolute;

	width: 112px;
	height: 105px;
	background-image: url(../img/intro/bear.png);

	margin: 310px 0 0 560px;
	z-index: 200;
}

#intro .introWrap .monkey{
	position: absolute;

	width: 85px;
	height: 93px;
	background-image: url(../img/intro/monkey.png);

	margin: 310px 0 0 50px;
	z-index: 200;
}

#intro .cloudWrap {
	position: relative;

	width: 100%;
	height: 1050px;
	/*background-color: pink;*/
}

#intro .cloudWrap .leftCloud{
	position: absolute;

	width: 934px;
	height: 816px;
	background-image: url(../img/intro/cloud1.png);

	left: 0;
	z-index: 2;
}

#intro .cloudWrap .rightCloud{
	position: absolute;

	width: 843px;
	height: 858px;
	background-image: url(../img/intro/cloud2.png);

	right: 0;
}

#intro .cloudWrap .dragonfly{
	position: absolute;

	width: 366px;
	height: 228px;
	background-image: url(../img/intro/dragonfly.png);

	top: 800px;
}

/*fram1*/
#farm1{
	position: relative;

	width: 100%;
	height: 800px;
	background-image: url(../img/farm/farm1/far1_bg.png);
}

#farm1 .leftRice1 {
	position: absolute;

	width: 390px;
	height: 679px;
	background-image: url(../img/farm/farm1/leftrice.png);

	left: 0;
}

#farm1 .rightRice1 {
	position: absolute;

	width: 335px;
	height: 570px;
	background-image: url(../img/farm/farm1/rightrice.png);

	right: 0;
	top: 100px;
}

#farm1	.farmer {
	position: absolute;

	width: 747px;
	height: 1078px;
	background-image: url(../img/farm/farm1/farmer.png);

	left: 50%;
	margin-left: -310px;
}

#farm1 .farmSpeechWrap {
	position: relative;

	top: 250px;
	left: 150px;
}

#farm1 .farmSpeechWrap .farmSpeech {
	color: #895c2f;
	font-size: 18px;
	line-height: 27px;
}

/*farm2*/
#farm2 {
	position: relative;

	width: 100%;
	height: 850px;
	background-image: url(../img/farm/farm2/farm2_bg.png);
}

#farm2 .leftRice2{
	float: left;

	width: 250px;
	height: 850px;
	background-image: url(../img/farm/farm2/leftrice2.png);
}

#farm2 .rightRice2{
	float: right;

	width: 236px;
	height: 850px;
	background-image: url(../img/farm/farm2/rightrice2.png);
}

#farm2 .scarecrow{
	position: absolute;

	width: 103px;
	height: 206px;
	background-image: url(../img/farm/farm2/scarecrow.png);

	margin: 200px 0 0 300px;
}

/*farm3*/
#farm3 {
	position: relative;
	width: 100%;
	height: 850px;
	background-image: url(../img/farm/farm3/farm3_bg.png);
}

#farm3 .farm3Window{
	position: absolute;
	width: 247px;
	height: 169px;
	background-image: url(../img/farm/farm3/window.png);

	margin: 100px 0 0 100px;
}

#farm3 .machineWrap{
	position: relative;
	width: 600px;
	height: 455px;
	/*background-color: yellow;*/

	left: 50%;
	margin-left: -285px;
	top: 150px;
}

#farm3 .machineWrap .machine1{
	position: absolute;
	width: 586px;
	height: 455px;
	background-image: url(../img/farm/farm3/machine1.png);

	z-index: 900;
}

#farm3 .machineWrap .sawShadow{
	position: absolute;
	width: 95px;
	height: 95px;
	background-image: url(../img/farm/farm3/sawShadow.png);


	margin: 145px 0 0 145px;
}

#farm3 .machineWrap .saw1,
#farm3 .machineWrap .saw2{
	position: absolute;
	width: 95px;
	height: 95px;
	background-image: url(../img/farm/farm3/saw.png);
}

#farm3 .machineWrap .saw1{
	margin: 140px 0 0 140px;
}

#farm3 .machineWrap .saw2{
	margin: 140px 0 0 350px;
}

#farm3 .machineWrap .timer{
	position: absolute;
	width: 103px;
	height: 104px;
	background-image: url(../img/farm/farm3/second.png);

	margin: 125px 0 0 45px;
	z-index: 999;
}

#farm3 .machineWrap .machineBird{
	position: absolute;
	width: 44px;
	height: 49px;
	background-image: url(../img/farm/farm3/machinebird.png);

	margin: 220px 0 0 20px;
	z-index: 999;
}

#farm3 .farm3Bubble{
	position: absolute;
	top: 350px;
	right: 80px;
}

mobile.css

@media (max-width: 767px) {
	#intro {
		height: 1150px;
		background-image: url(../img/mobile/intro/mobile_intro_bg.png);

	}

	#intro .introWrap{
		width: 189px;
		height: 129px;

		margin-left: -94.5px;
		/*background-color: yellow;*/

		top: 230px;
	}

	#intro .introWrap .logo{
		width: 189px;
		height: 129px;
		background-image: url(../img/mobile/intro/mobile_logo.png);
	}

	#intro .introWrap .lion,
	#intro .introWrap .rabbit,
	#intro .introWrap .bear,
	#intro .introWrap .monkey,
	#intro .cloudWrap .dragonfly{
		display: none;
	}

	#intro .cloudWrap {
		height: 350px;
		top: 280px;
	}
	#intro .cloudWrap .leftCloud{
		width: 267px;
		height: 314px;
		background-image: url(../img/mobile/intro/mobile_cloud1.png);
	}
	#intro .cloudWrap .rightCloud{
		width: 237px;
		height: 309px;
		background-image: url(../img/mobile/intro/mobile_cloud2.png);
	}
	
/*farm1*/

	#farm1 {
		height: 450px;
		background-image: url(../img/mobile/farm/farm1/mobile_farm1_bg.png);
			}

	#farm1 .leftRice1{
		width: 86px;
		height: 150px;
		background-image: url(../img/mobile/farm/farm1/mobile_leftrice.png);
	}

	#farm1 .rightRice1{
		width: 95px;
		height: 170px;
		background-image: url(../img/mobile/farm/farm1/mobile_rightrice.png);

		top: -20px;
	}

	#farm1 .farmer{
		width: 160px;
		height: 250px;
		background-image: url(../img/mobile/farm/farm1/mobile_farmer.png);

		margin-left: -69px;
	}

	#farm1 .farmSpeechWrap {
		position: relative;

		top: 250px;
		left: 150px;
	}

	#farm1 .farmSpeechWrap {
		width: 300px;

		text-align: center;

		left: 50%;
		margin-left: -150px;
	}

	#farm1 .farmSpeechWrap img {
		width: 79px;

	}

	#farm1 .farmSpeechWrap .farmSpeech {
		line-height: 20px;
		font-size: 12px;
	}

	#farm2{
		height: 440px;
		background-image: url(../img/mobile/farm/farm2/mobile_farm2_bg.png);
	}
	#farm2 .leftRice2{
		width: 57px;
		height: 201px;
		background-image: url(../img/mobile/farm/farm2/mobile_leftrice2.png);
	}
	#farm2 .rightRice2{
		width: 54px;
		height: 202px;
		background-image: url(../img/mobile/farm/farm2/mobile_rightrice2.png);
	}

	#farm2 .scarecrow{
		display: none;
	}


	#farm3{
		height: 500px;
		background-image: url(../img/mobile/farm/farm3/mobile_farm3_bg.png);
	}

	#farm3 .farm3Window {
		width: 82px;
		height: 56px;
		background-image: url(../img/mobile/farm/farm3/mobile_window.png);

		margin: 10px 0 0 10px;
	}
	#farm3 .machineWrap {
		width: 200px;
		height: 150px;
		top: 120px;
		margin-left: -96px;
	}

	#farm3 .machineWrap .machine1 {
		width: 191px;
		height: 149px;
		background-image: url(../img/mobile/farm/farm3/mobile_machine1.png);
	}

	#farm3 .machineWrap .sawShadow {
		display: none;
	}	

	#farm3 .machineWrap .saw1,
	#farm3 .machineWrap .saw2{
		width: 31px;
		height: 31px;
		background-image: url(../img/mobile/farm/farm3/mobile_saw.png);
	}

	#farm3 .machineWrap .saw1{
		margin: 50px 0 0 50px;
	}

	#farm3 .machineWrap .saw2{
		margin: 50px 0 0 115px;
	}
	#farm3 .farm3Bubble{
		position: absolute;
		width: 152px;
		left: 50%;
		margin: 0 0 0 -70px;
	}
}

학습내용 중 어려웠던 점

실습을 해보니 쉽지 않다.. 단어하나 틀리면 아예 안되어서 찾아야 하는 점이 아쉽다. 물론 찾는 것이 엄청 어렵지는 않지만 다른 언어 프로그램처럼 작동이 안되는 이유(이 이름은 언급이 된 적없다 등)가 나왔으면 어땠을까 싶다.

해결 방법

다행히 찾는 게 어렵지 않다.

학습소감

직접 실습 해보니 쉽지 않다는 생각이 들었다. 직접 어떤 홈페이지를 만들면서 연습해봐야 할 것 같다.

profile
Leejihye
hello
이전 포스트

적응형, 반응형 실습

다음 포스트

kidsgao_2

0개의 댓글