210713 개발일지

JANE Jeong·2021년 7월 13일

대구AI스쿨 실습 웹프로그래밍

대구 AI 스쿨

목록 보기

12/51

📌 학습한 내용

KidsGao 실습

원페이지 사이트
Parallax : 웹사이트에서 스크롤에 따라 이벤트가 발생

`<head>` 작업

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

초기화 작업

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

.clearfix {
	clear: both;
}

<button>은 기본적으로 테투리(border)와 backgroud-color을 가지고 있음 (transparent - 투명)

'Intro' PC.ver

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

/* Intro */
#intro {
	width: 100%; /* width 값은 항상 100% */
	height: 1600px; /* height 값은 해당 이미지의 높이값 */
	background-image: url(../img/intro/intro_bg.png);
    
	/* padding-top: 100px; -> intro와 introWrap 사이에 공백 만들기*/ 
}

#intro .introWrap {
	position: relative;    /* -> 중앙정렬을 하기 위해  */

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

	left: 50%;
	margin-left: -380px;  /* 중앙정렬 */
    
    /* margin-top: 100px; */
    top: 100px
}

#intro .introWrap .logo {

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

	z-index: 100;  /* 기준점 (100보다 작으면 뒷쪽에, 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;
}

기본적으로 z-index는 0
공간의 크기는 이미지의 크기와 동일하게
(기본적으로 background-image는 repeat 효과를 가진다. 따라서 공간이 이미지 보다 크면, 한 공간에서 이미지가 반복된다. 👉 단, 배경이미지는 다르게 처리)

<introWrap 부분을 아래로 내리는 방법>

#intro .introWrap에 margin-top: 100px; X
-> 부자지간 마진 병합현상 발생 (intro 영역이 전체적으로 내려오게 됨)
#intro에 padding-top: 100px' 적용 -> intro와 introWrap사이의 공백 만들기 X
-> intro의 hetght 값이 1600px이 아닌 1700px이 됨, 공백으로 인해 다른 컨텐츠들이 아래로 밀리게 됨 -> 틀어진 레이아웃에 대한 배치작업을 다시해야 함.
#intro .introWrap에 top: 100px; 적용 O
-> 3차원 요소에 top을 사용하면, 자기 자신이 주체가 되어서 이동, 아래쪽에 어떤 요소의 레이아웃이 배치되어 있더라도 해당 요소의 최초위치는 변함이 없다. + 나중에 작업한 작업이 우선순위를 가짐
=> 함께 내려가는 현상 없이, introWrap 부분이 cloudWrap 뒤쪽으로 배치됨

<#intro .introWrap에서 position: relative;를 사용한 이유>

중앙정렬
left: 50px;을 사용하려면 3차원 포지션 영역에서만 가능
자식이 3차원 속성값을 가졌을 때, 부모가 순수 3차원 속성값을 가진다면, 좌표의 기준점이 부모를 기준으로 형성된다. (margin이 아닌 top, left, right, bottom속성을 썼을 때)

/* Cloud */
#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;  /* rightCloud를 leftCloud보다 앞쪽에 배치 */ 
}

#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;  /* cloudWrap 박스를 기준으로 / 부모에 position: realtive;가 없으면 브라우저가 기준이 된다 */
}

<div>는 block요소의 성격을 가지고 있으므로, 두 이미지의 height 값이 <div>보다 훨씬 크기 때문에 y축으로 이미지가 정렬된다.
#intro .cloudWrap .leftCloud와 #intro .cloudWrap .rightCloud에 float: right;, float: left;를 쓸 수 없는 이유
-> float을 사용한 width 값의 합이 브라우저의 크기보다 클 경우 레이어가 틀어지게 된다.
실무 tip
직접 디자인 작업을 하는 경우, 이미지의 크기는 5로 끝나거나 2의 배수로 끝나게 작업하는게 일반적

'Intro' Animation

/* 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: spinMonkey 800ms linear infinite alternate;
}

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

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

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

@keyframes flyDragonfly {
	from {
		left: -366px; /* 화면밖에서부터 시작하기 위해 이미지의 width값 만큼 뺴줌 */
	}

	to {
		left: 100%;  
        /* 브라우저의 크기는 가변적 -> 고정값x, 항상 브라우저 밖으로 사라지는 모션을 취해야 함 -> 고정값이 크면 등장시간이 늦어지고 움직임이 더 빨라짐 */
	}
}

style.css에서 작성되어진 #intro .cloudWrap .dragonfly의 position: absolute;값 때문에 @keyframes { left }값 활용 가능

'Intro' Mobile.ver

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

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

		/* left: 50%; -> 이미 미디어 쿼리 바깥쪽에 속성을 상속받고 있음*/
		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_intro_bg.png의 width값보다 모바일 기기 브라우저의 width값이 큰 경우, background-repeat속성이 기본값으로 적용되어 공백을 자동으로 반복해서 매워줌.

'Farm1' PC.ver

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

<br> : enter와 같이 줄을 바꿔주는 태그

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

line-height : 글자간 위아래 간격 설정

'Farm1' Mobile.ver

@media (max-width: 767px) {
	/* 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요소를 중앙정렬 시킬 때 사용하는 속성 (에만 영향을 미칠 수 있음)
-> <img>는 기본적으로 inline-block의 속성을 갖고 있기 때문에 사용 가능

'Farm2' PC.ver

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

/* Farm2 */
#farm2 {
	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;
}

앞의 영역들과 동일하게 position: relative/absolute; 그리고 left, right를 사용해도 무방하나 'Farm2'영역은 leftRice2와 rightRice2가 만나기도 전에 모바일 버전으로 변경되기 때문에 float: left/right;를 사용해도 됨.

'Farm2' Mobile.ver

@media (max-width: 767px) {
	/* Farm2 */
	#farm2 {
		/* position: relative; ->PC 버전에서 미리 작성 */
		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' PC.ver

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

/* 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: 43px;
	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' Animation

#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' Mobile.ver

@media (max-width: 767px) {
	/* 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 -79px;
	}
}

📌 학습내용 중 어려웠던 점

z-index: 100; 속성 사용시, 101을 줘도 제대로 작동을 하지만 200를 넣어주는 이유는? (z-index 값의 기준은?)
class 이름에 오타
코드값이 잘못되어 오류가 났는데 검사 기능을 이용해도 찾을 수 없었다.

📌 해결방법

pc버전의 intro 영역을 만들고 바로 아래에 pc버전의 farm1을 만들었는데, 두 영역사이에 알 수 없는 공간이 생겨 결국 코드를 새로 작성했다.

📌 학습소감

아마 오늘까지의 수업 내용 중 가장 어려웠고, 시간 소모도 상당했다. intro부분에서 오류가 난 것 같은데, 크롬의 검사 기능을 이용해도 쉽게 찾을 수 없어 코드를 다시 작성해 공부하려고 한다. 그리고 앞으로 있을 실습에 대비해 이제부터는 코드를 git hub을 통해 올릴까 생각중이다. 🧐

JANE Jeong

늘 새로운 배움을 추구하는 개린이 🌱

이전 포스트

210712 개발일지

다음 포스트

210713 개발일지

대구 AI 스쿨

KidsGao 실습

`<head>` 작업

초기화 작업

'Intro' PC.ver

'Intro' Animation

'Intro' Mobile.ver

'Farm1' PC.ver

'Farm1' Mobile.ver

'Farm2' PC.ver

'Farm2' Mobile.ver

'Farm3' PC.ver

'Farm3' Animation

'Farm3' Mobile.ver

210712 개발일지

210714 개발일지

0개의 댓글

210713 개발일지

대구 AI 스쿨

KidsGao 실습

<head> 작업

초기화 작업

'Intro' PC.ver

'Intro' Animation

'Intro' Mobile.ver

'Farm1' PC.ver

'Farm1' Mobile.ver

'Farm2' PC.ver

'Farm2' Mobile.ver

'Farm3' PC.ver

'Farm3' Animation

'Farm3' Mobile.ver

210712 개발일지

210714 개발일지

0개의 댓글

`<head>` 작업