DAY 12 - 키즈 가오 실습 1편

SUN·2021년 7월 13일

학습 내용

1. 사전 준비하기

이미지와 완성파일 준비
style.css/animation.css/mobile.css 파일만들고 연결

메타 태그 정의

<meta charset="utf-8">


<meta name="description" contnet="우리쌀 점토로 만든 키즈가오 웹사이트 소개">
- 웹 페이지의 설명을 정의

<meta name="keywords" contnet="키즈가오, 점토, 장난감">
- 검색엔진을 위한 키워드를 설정

<meta name="author" contnet="송태민">
- 문서의 저자를 소개

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

style.css

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

body {
overflow-x: hidden; }

-x축외곽으로 나오는 것들은 히든처리를 한다.(가로 스크롤 방지)

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

button {
border: none;
background-color: transparent; }
-버튼 태그에 들어가있는 기본설정을 초기화해준다. (transparent : 투명하게)

.clearfix {
clear: both;}
- float를 통해 좌우 배치를 할 때 clear:both를 사용

2. Intro 만들기

인트로의 범위는 구름과 잠자리가 움직이는 곳까지

HTML

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

style.CSS

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

#intro .introWrap {
position: relative;
   - left를 사용하여 중앙정렬을 하기 위해 / 그리고 자식 태그에서 absolute를 
   사용할 시 부모태그를 기준으로 하기 때문에 relative 사용

width: 760px;
height: 516px;


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

top: 100px; 
- 만약 어느 정도 진행이 되고 어느 한 부분을 움직일 때 relative일 때 
top을 주면 다른 구조에 영향을 주지 않고 움직일 수 있다.}

#intro .introWrap .logo {
position: absolute; 
-여러 캐릭터들이 겹치는 것으로 보아 z축이 존재 즉 3차원

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

z-index: 100; 
-기준점 설정/ 로고를 기준으로 앞으로 와야할 것 뒤로 가야할 것을 zindex으로 결정}

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

#intro .cloudWrap .leftCloud {
position: absolute;

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

left: 0; - float를 사용하여 좌우로 배치하면 브라우저 크기에 따라 
내용이 깨지기 때문에 left와 right를 사용하여 좌우로 배치
z-index: 2;}

#intro .cloudWrap .rightCloud {
position: absolute;

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

right: 0; - 위 left 참조}


#intro .cloudWrap .dragonfly {
position: absolute;

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

top: 800px;}

-각각 요소 이미지들은 공간의 크기과 이미지의 크기를 맞게 설정

animation.css

#intro .introWrap .lion {
animation: spinlion 1500ms linear infinite alternate;}
- 이름, 1.5초, 평범한 속도, 무한 반복, 왕복


@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: spinmonkey 800ms 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%;}}
    
- 잠자리 이미지 크기인 -366을 주어 왼쪽 화면 밖에서 부터 시작하도록 설정하고 
100%를 주어 브라우저 크기가 커져도 오른쪽 밖으로 나갈 수 있도록 설정

mobile.css

@media (max-width: 767px) {

#intro {
	height: 1150px;
	background-image: url(../img/mobile/intro/mobile_intro_bg.png);}
- 준비된 이미지 크기에 맞춤

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

	top: 230px; - 위쪽 공백 설정

	margin-left: -94.5px;} 
    -미디어 쿼리 바깥 쪽 스타일에 이미 left: 50%;가 설정이 되어 있음
    나머지는 pc형태와 똑같이 설정

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

3. Farm1(농부파트) 만들기

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>
			안전한 제품이랍니다.<br>
		</p>
      </div>
</div>

-br을 통해 줄바꿈

style.css

#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;}
- 글자의 위치와 색 조정 (맨 마지막 3차원이라서 가장 위에 배치됨)

mobile.css

앞서 했던 모바일 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;}
  -오른쪽 사진 넣기, 왼쪽 사진과 같은 라인 맞추기 위해 top 20

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

		margin-left: -69px;}
  - 마진 레프트로 중앙정렬/left 50%같은 경우는 변하는 값이 아니기 때문에 적용이 되어있음

	#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;}
    - 글자 설정

4. Farm2 만들기

HTML

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

style.css

#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;}
- 위치 설정(top ,left도 가능)

mobile.css

#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;}
    - 허수아비는 모바일 화면에서 안보이게 하기

5. Farm3 만들기

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"
	alt="기계를 통해서 쌀알이 딱딱한 껍질을 벗어 냅니다.">
   
</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;}
- 기계의 z축 설정


#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;}
- HTML에 있던 버블 위치 설정

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 {
	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);}
    - 이미지 모바일용으로 다시 삽입

#farm3 .machineWrap {
	width: 200px;
	height: 150px;

	top: 120px;
	margin-left: -96px;}
    -위치 재설정

#farm3 .machineWrap .machine1 {
	width: 190px;
	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;}
    - 버블 항목의 크기를 줄이고 위치를 재설정

학습 중 어려웠던 점

양이 일단 방대하여 어디에 어떻게 적용하는 지 파악이 힘들었다.
그리고 오탈자 때문에 결과물이 바르게 나오지 않는 점이 많아 힘들었다.

해결방안

집중하여 오탈자를 줄이고 짧게 끊어 복습하기

학습 소감

실제로 이용할 수 있는 결과물을 따라가면 만들다보니 이러한 작업이 쉬운 일이 아님을 깨달았다.

SUN

안녕하세요!

이전 포스트

Day 11 - 미디어 쿼리 실습

다음 포스트

DAY 12 - 키즈 가오 실습 1편

학습 내용

1. 사전 준비하기

style.css

2. Intro 만들기

HTML

style.CSS

animation.css

mobile.css

3. Farm1(농부파트) 만들기

HTML

style.css

mobile.css

4. Farm2 만들기

HTML

style.css

mobile.css

5. Farm3 만들기

HTML

style.css

animation.css

mobile.css

학습 중 어려웠던 점

해결방안

학습 소감

Day 11 - 미디어 쿼리 실습

Day 13 - 키즈가오 실습 2

0개의 댓글

관련 채용 정보