키즈가오 실습 1

1) 학습한 내용
키즈가오 실습 - 1

• 상단 첫화면

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

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

/ 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가지동물이 움직이고 하단의 잠자리가 갈로질러 지나가는 모습

/ 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부분

@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 를 잘활용하여 불필요한 이미지 작업을 줄임

• 농부 부분

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

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

/ 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;
}

/ 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 요소에만 영향을 끼침

• 농부 하단 부분

/ 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;

}

/ 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버전으로 변할꺼기 때문에 사용

• 농작물 기계 부분

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

/ 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;

}

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

/ 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;
    1) 학습한 내용 

2) 학습내용 중 어려웠던 점
그냥 전체가 다 어려웠ㅇ는데요?????????
3) 해결 방법
아무리 복습을 한다해도 이걸 다 할 수 있을지는 모르겠네요..
4) 학습소감
분량이 점점 무슨 그 뭐야 어휘력이 부족해서 뭐라 표현을 못허ㅏ겠네요 네.. 분량이 많아져서 머릿속이 터질 거 같아서 진짜 미치;ㄹ거같아요

Author And Source

이 문제에 관하여(키즈가오 실습 1), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@bae_seonghyun613/키즈가오-실습-1

---

저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

깊은 복사(deep copy) (TIL 19일차)

회문질수---(질수의 발생)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다