2021.07.13 키즈가오

dogyeomyeo4444·2021년 7월 13일
대구AI스쿨
0

오늘의 강의 내용

키즈가오 사이트 만들기

* 상단 첫화면


pc버전 화면


mobile버전 화면

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

</body>
</html>

<!-- style.css언어 -->
/* Default 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);
}

#intro .introWrap {
	position: relative;

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

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

	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: 122px;
	 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;
}

상단 첫화면에 대한 소스코드

  • 스크롤에 따라서 어떤 이벤트가 발생하는 기능을 패럴랙스 라 한다.

  • overflow-x: hidden 브라우저 x축을 벗어나는 object를 않보이게

  • background-color: transparent 배경 컬러 투명하게

  • button은 기본값으로 테두리를 가지고 있다.

  • .clearfix { clear: both; } float을 사용시 일어나는 height 버그를 지워주는 속성

  • z-index 일종의 기준점 100으로 값을 주었을때 100보다 작으면 z축으로 뒤로 100보다 크면 앞으로

  • z-index사용하지 않은 position: absolute 영역이라면 z-index가 0이라 생각하면 된다

  • #intro .introWrap 에서 position: relative을 사용한 이유는 첫번째는 중앙정렬을 하기 위함이고,
    두번째는 부모의 position상태에 따라서 3차원적인 특징이 적용된 자식의 top, left, bottom, right 좌표기준점이 달라지는데 부모를 기준점으로 두기에 훨씬유리하다.

  • 어떤 공간안에 background-image를 사용할때 기본적으로 repeat효과를 가지고 있어 빈공간을 매울려고 하는 속성이 있어,
    image작업을 할때에는 image의 크기에 맞춰 공간을 설정하는것이 좋다. 단, 배경에 깔리는 image는 달리 설정한다.

  • 실무 tip : 만약 디자인 작업을 해야한다면, 이미지 사이즈를
    숫자 5나, 짝수 사이즈로 떨어지게 작업하는것이 일반적이다. 그이유는 5, 짝수 이외의 애매한 사이즈로 작업할시에 레이아웃 구조가 정확하게 배치가 되지않을수 있기 때문

* animation 부분


4가지동물이 움직이고 하단의 잠자리가 갈로질러 지나가는 모습

<!-- animation.css언어 -->
/* Intro */

#intro .introWrap .lion {
	animation: spinLion 1500ms linear infinite alternate;
}

@keyframes spinLion {
	from {
		transform: rotate(-10deg);
	}

	to {
		transform: rotate(10deg);
	}
}

#intro .introWrap .rabbit {
	animation: spinRabbit 1000ms linear infinite alternate;
}

@keyframes spinRabbit {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(5deg);
	}
}

#intro .introWrap .bear  {
	animation: spinBear 1000ms linear infinite alternate;
}

@keyframes spinBear {
	from {
		transform: rotate(10deg);
	}

	to {
		transform: rotate(-10deg);
	}
}

#intro .introWrap .monkey  {
	animation: spinBear 1000ms linear infinite alternate;
}

@keyframes spinMonkey {
	from {
		transform: rotate(20deg);
	}

	to {
		transform: rotate(50deg);
	}
}

#intro .cloudWrap .dragonfly {
	animation: flyDragonfly linear 7s infinite;
}

@keyframes flyDragonfly {
	from {
		left: -366px;
	}

	to {
		left: 100%;
	}

  • animation 좌표값은 앞선 position값의 영향을 받는다.

  • 화면 바깥으로 사라지는 기능은 %로 나타낸다

  • overflow-x: hidden 웹사이트작업시 기본값으로 넣어준다.가로스크롤 방지

* mobile부분


mobile버전 으로서 animation효과가 사라지고 image로 나온 모습

<!-- 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);
	}	

}

  • mobile부분은 기존에 주었던 동물과 잠자리의 animation효과가 없어지게하였다.

  • display 노출을 담담하는 역할도 수행

  • background-repeat: no-repeat 를 잘활용하여 불필요한 이미지 작업을 줄일수있다.

* 농부 부분


pc버전에서의 농부


mobile버전에서의 농부

<!-- html언어 -->
<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>

<!-- style.css언어 -->
/* Farm1 */
#farm1 {
	position: relative;

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

#farm1 .leftRice1 {
	position: absolute;

	width: 390px;
	height: 670px;
	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;
}

<!-- mobile.css언어 -->
/* 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 {
		width: 300px;

		text-align: center;

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

	#farm1 .farmSpeechWrap img {
		width: 79px;
	}

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

  • 그라데이션은 가급적 넣지않는것이 좋다. 작업하기 어렵다.

  • text-align 글자,inline 요소를 중앙정렬 시킬때 쓰는 속성. 글자,inline 요소에만 영향을 끼친다.

* 농부 하단 부분


pc버전에서의 농부 하단 부분


mobile버전에서의 하단 부분

<!-- html언어 -->
<div id="farm2">
		<div class="leftRice2"></div>
		<div class="scarecrow"></div>
		<div class="rightRice2"></div>
</div>

<!-- style.css언어 -->
/* 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;
}

<!-- mobile.css언어 -->
/* Farm2 */
	#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;
	}
}
  • float을 사용한이유는 두이미지가 만나기전에 mobile버전으로 변할꺼기 때문에 사용

* 농작물 기계 부분


pc버전에서의 농작물 기계 부분


mobile버전에서의 농작불 기계 부분

<!-- html언어 -->
<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" art="기계를 통해서 쌀알이 딱딱한 껍질을 벗어 냅니다.">

</div>

<!-- style.css언어 -->
/* 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언어 -->
#farm3 .machineWrap .timer {
	animation: rotateTimer 10000ms linear infinite;
}

@keyframes rotateTimer {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

#farm3 .machineWrap .saw1 {
	animation: rotateLeftSaw 10000ms linear infinite;
}

@keyframes rotateLeftSaw {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

#farm3 .machineWrap .saw2 {
	animation: rotateRightSaw 10000ms linear infinite;
}

@keyframes rotateRightSaw {
	from { transform: rotate(360deg); }
	to { transform: rotate(0deg); }
}

<!-- mobile.css언어 -->
/* Farm3 */
	#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,
	#farm3 .machineWrap .timer,
	#farm3 .machineWrap .machineBird {
		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
dogyeomyeo4444
i will be the best
이전 포스트

2021.07.12 미디어쿼리(2)

다음 포스트

2021.07.14 키즈가오(2)

0개의 댓글

관련 채용 정보