Dev log - 13, 키즈가오 카피캣 실습 #2

박강산·2021년 7월 14일
0

대구AI스쿨 - 개발일지

목록 보기
13/44

학습한 내용

키즈가오 실습 기본 세팅

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>

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

키즈가오 실습 1편 - forest 1

  • top, left, rigth, bottom 은 자기가 주도적으로 움직임 (마진 병합 현상 X)

HTML 문서

<body>
	<div id="forest1">
		<div class="leftTree"></div>

		<div class="treeWrap">
			<div class="rightTree"></div>
			<div class="rabbit1"></div>
			<div class="rabbit2"></div>
		</div>
	</div>
</body>

CSS 문서 1 (style.css)

/* forest1 */
#forest1 {
	width: 100%;
	height: 1050px;
	background-image: url(../img/forest/forest1/forest1_bg.png);
}

#forest1 .leftTree {
	position: absolute;

	width: 445px;
	height: 1200px;
	background-image: url(../img/forest/forest1/lefttree.png);

	left: 0;
}

#forest1 .treeWrap {
	float: right;
	position: relative;

	width: 304px;
	height: 572px;

	top: 100px;
}

#forest1 .treeWrap .rightTree {
	position: absolute;

	width: 304px;
	height: 572px;
	background-image: url(../img/forest/forest1/righttree.png);

	z-index: 10;
}

#forest1 .treeWrap .rabbit1 {
	position: absolute;

	width: 82px;
	height: 103px;
	background-image: url(../img/forest/forest1/rabbit1.png);

	margin: 435px 0 0 107px;
}

#forest1 .treeWrap .rabbit2 {
	position: absolute;

	width: 56px;
	height: 75px;
	background-image: url(../img/forest/forest1/rabbit2.png);

	margin: 435px 0 0 200px;
}

CSS 문서 2 (animation.css)

/* forest1 */
#forest1 .treeWrap .rabbit1 {
	animation: spinRabbitOne 1000ms linear infinite alternate;
}

@keyframes spinRabbitOne {
	from { transform: rotate(0deg);  }
	to { transform: rotate(10deg);  }
}

#forest1 .treeWrap .rabbit2 {
	animation: spinRabbitTwo 1000ms linear infinite alternate;
}

@keyframes spinRabbitTwo {
	from { transform: rotate(10deg);  }
	to { transform: rotate(0deg);  }
}

CSS 문서 3 (mobile.css)

@media (max-width: 767px) {
	/* forest1 */
	#forest1 {
		position: relative;

		height: 400px;
		background-image: url(../img/mobile/forest/forest1/mobile_forest1_bg.png);
	}

	#forest1 .leftTree {
		width: 79px;
		height: 187px;
		background-image: url(../img/mobile/forest/forest1/mobile_lefttree.png);
	}

	#forest1 .treeWrap {
		width: 68px;
		height: 129px;

		top: 200px;
	}

	#forest1 .treeWrap .rabbit1,
	#forest1 .treeWrap .rabbit2 {
		display: none;
	}

	#forest1 .treeWrap .rightTree {
		width: 68px;
		height: 129px;
		background-image: url(../img/mobile/forest/forest1/mobile_righttree.png);
	}
}

키즈가오 실습 1편 - forest 2

  • 이미지 경로를 잘못 설정했을 때는, alt 값이 이미지가 나오는 자리에 대신해서 표시
  • 같은 z-index 값을 가질 때에는, 나중에 작성된 영역이 위로 배치됨
  • CSS를 작성할 때는, HTML 문서에서 작성한 순서대로 배치 작업을 해야함

HTML 문서

<body>
	<div id="forest2">
		<div class="frog"></div>

		<div class="machineWrap2">
			<div class="machineBottom"></div>
			<div class="machineLeft"></div>
			<div class="machineRight"></div>
		</div>

		<img class="forestBubble" src="img/forest/forest2/forestbubble.png" alt="기계를 통해서 쌀을 고운 가루로 만든답니다.">

		<div class="forest2Tree"></div>
	</div>
</body>

CSS 문서 1 (style.css)

/* forest2 */
#forest2 {
	width: 100%;
	height: 750px;
	background-image: url(../img/forest/forest2/forest2_bg.png);
}

#forest2 .frog {
	position: absolute;

	width: 153px;
	height: 257px;
	background-image: url(../img/forest/forest2/frog.png);

	margin: 50px 0 0 100px;
}

#forest2 .machineWrap2 {
	position: relative;

	width: 400px;
	height: 400px;

	left: 50%;
	margin-left: -200px;
	top: 180px;
}

#forest2 .machineWrap2 .machineBottom {
	position: absolute;

	width: 374px;
	height: 162px;
	background-image: url(../img/forest/forest2/machinebottom.png);

	margin-top: 220px;

	z-index: 200;
}

#forest2 .machineWrap2 .machineLeft {
	position: absolute;

	width: 123px;
	height: 228px;
	background-image: url(../img/forest/forest2/machineleft.png);

	margin-top: 30px;

	z-index: 200;
}

#forest2 .machineWrap2 .machineRight {
	position: absolute;

	width: 123px;
	height: 248px;
	background-image: url(../img/forest/forest2/machineright.png);

	margin: 10px 0 0 260px;

	z-index: 200;
}

#forest2 .forestBubble {
	position: relative;

	float: right;

	top: -100px;
	margin-right: 100px;
}

#forest2 .forest2Tree {
	float: left;
	position: relative;

	width: 304px;
	height: 282px;
	background-image: url(../img/forest/forest2/forest2tree.png);

	top: 50px;
}

CSS 문서 2 (animation.css)

/* forest2 */
#forest2 .machineWrap2 .machineLeft {
	animation: moveLeft 1s linear infinite alternate;
}

@keyframes moveLeft {
	from {left: 30px;}
	to {left: 0}
}

#forest2 .machineWrap2 .machineRight {
	animation: moveRight 1s linear infinite alternate;
}

@keyframes moveRight {
	from {left: -30px;}
	to {left: 0}
}

CSS 문서 3 (mobile.css)

@media (max-width: 767px) {
	/* forest2 */
	#forest2 {
		position: relative;

		height: 400px;
		background-image: url(../img/mobile/forest/forest2/mobile_forest2_bg.png);
	}

	#forest2 .frog {
		width: 34px;
		height: 57px;
		background-image: url(../img/mobile/forest/forest2/mobile_frog.png);

		margin: 0 0 0 20px;
	}

	#forest2 .machineWrap2 {
		width: 200px;
		height: 110px;

		top: 70px;
		margin-left: -97px;
	}

	#forest2 .machineWrap2 .machineBottom {
		width: 141px;
		height: 60px;
		background-image: url(../img/mobile/forest/forest2/mobile_machinebottom.png);

		left: 50%;
		margin: 50px 0 0 -70.5px;
	}

	#forest2 .machineWrap2 .machineLeft {
		width: 46px;
		height: 85px;
		background-image: url(../img/mobile/forest/forest2/mobile_machineleft.png);

		margin: 0 0 0 20px;
	}

	#forest2 .machineWrap2 .machineRight {
		width: 46px;
		height: 93px;
		background-image: url(../img/mobile/forest/forest2/mobile_machineright.png);

		margin: -10px 0 0 130px;
	}

	#forest2 .forestBubble {
		position: absolute;

		width: 161px;

		top: 290px;
		left: 50%;
		margin-left: -83px;
	}


	#forest2 .forest2Tree {
		float: right;

		width: 69px;
		height: 76px;
		background-image: url(../img/mobile/forest/forest2/mobile_forest2tree.png);

		top: 130px;
		margin-right: 20px;
	}
}

키즈가오 실습 1편 - forest 3

  • top, left 속성은 브라우저 기준이지만, 부모가 3차원 특징을 가질 때에는 부모 기준 (margin 은 상관 없음)

HTML 문서

<body>
	<div id="forest3">		
		<div class="forest3Wrap">
			<div class="forest3Tree"></div>
			<div class="smallBird"></div>
			<div class="bigBird"></div>
		</div>
	</div>
</body>

CSS 문서 1 (style.css)

/* forest3 */
#forest3 {
	width: 100%;
	height: 600px;
	background-image: url(../img/forest/forest3/forest3_bg.png);
}

#forest3 .forest3Wrap {
	float: right;
	position: relative;

	width: 354px;
	height: 440px;

	top: 100px;
}

#forest3 .forest3Wrap .forest3Tree {
	position: absolute;

	width: 354px;
	height: 440px;
	background-image: url(../img/forest/forest3/forest3tree.png);
}

#forest3 .forest3Wrap .smallBird {
	position: absolute;

	width: 40px;
	height: 35px;
	background-image: url(../img/forest/forest3/bird_sm.png);

	top: 120px;
	left: 125px;
}

#forest3 .forest3Wrap .bigBird {
	position: absolute;

	width: 83px;
	height: 80px;
	background-image: url(../img/forest/forest3/bird_big.png);

	margin: 280px 0 0 94px;
}

CSS 문서 2 (animation.css)

/* forest3 */
#forest3 .forest3Wrap .smallBird {
	animation: spinSmallBrid 1000ms linear infinite alternate;
}

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

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

#forest3 .forest3Wrap .bigBird {
	animation: spinBigBrid 1000ms linear infinite alternate;
}

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

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

CSS 문서 3 (mobile.css)

@media (max-width: 767px) {
	/* forest3 */
	#forest3 {
		height: 630px;
		background-image: url(../img/mobile/forest/forest3/mobile_forest3_bg.png);
	}

	#forest3 .forest3Wrap {
		width: 99px;
		height: 127px;

		top: 300px;
	}

	#forest3 .forest3Wrap .forest3Tree {
		width: 99px;
		height: 127px;
		background-image: url(../img/mobile/forest/forest3/mobile_forest3tree.png);
	}

	#forest3 .forest3Wrap .smallBird, 
	#forest3 .forest3Wrap .bigBird {
		display: none;
	}
}

키즈가오 실습 1편 - science

  • 정렬할 때 float: left 만 쓰는 이유는, 왼쪽에서부터 정렬이기 때문
  • 자식 레이아웃의 크기는, 부모 레이아웃 크기를 벗어나면 안 됨 (레이아웃 틀어짐 현상)
  • 자식이 float 속성일 때, 부모가 overflow: hidden 속성을 지니면, 부모는 자식에게 너비와 길이에 영향을 받음

HTML 문서

<body>
	<div id="science">
		<div class="scienceWrap">
			<div class="scienceLeftWrap">
				<div class="gly"></div>
				<img src="img/science/leftTitle.png" alt="자초, 어성초, 감초">
				<p> 자초 어성초 감초를 넣어서<br>
					피부진정 및 함염 효과가 있답니다.</p>
			</div>

			<div class="scienceCenterWrap">		
				<div class="purpleSteam"></div>
				<div class="funnelBack"></div>
				<div class="funnelFront"></div>
			</div>

			<div class="scienceRightWrap">		
				<div class="water"></div>
				<img src="img/science/rightTitle.png" alt="글리세린, 올리브유">
				<p> 빵의 표면을 촉촉하게 해주는<br>
					글리세린과 오메가-9 지방산이<br>
					풍부한 올리브유를 넣어서<br>
					보습 효과도 뛰어나답니다.</p>
			</div>
		</div>
	</div>
</body>

CSS 문서 1 (style.css)

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

	width: 100%;
	height: 800px;
	background-image: url(../img/science/science_bg.png);
}

#science .scienceWrap{
	position: relative;

	width: 1068px;
	height: 655px;

	margin: 0 auto;
}

#science .scienceWrap .scienceLeftWrap {
	float: left;
	width: 288px;
	height: 100%;
}

#science .scienceWrap .scienceLeftWrap .gly {
	width: 230px;
	height: 192px;
	background-image: url(../img/science/gly.png);

	margin: 0 0 130px 55px;
}

#science .scienceWrap .scienceLeftWrap p,
#science .scienceWrap .scienceRightWrap p {
	color: #8e7577;
	font-size: 18px;
	line-height: 26px;

	padding-top: 10px;
}

#science .scienceWrap .scienceCenterWrap {
	position: relative;
	float: left;
	width: 488px;
	height: 100%;
}

#science .scienceWrap .scienceCenterWrap .purpleSteam {
	position: relative;

	width: 241px;
	height: 216px;
	background-image: url(../img/science/grape.png);

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

#science .scienceWrap .scienceCenterWrap .funnelBack {
	position: absolute;

	width: 488px;
	height: 438px;
	background-image: url(../img/science/funnelback.png);
}

#science .scienceWrap .scienceCenterWrap .funnelFront {
	position: relative;

	width: 485px;
	height: 390px;
	background-image: url(../img/science/funnelfront.png);

	margin-top: 48px;
}

#science .scienceWrap .scienceRightWrap {
	float: left;
	width: 292px;
	height: 100%;
}

#science .scienceWrap .scienceRightWrap .water {
	width: 204px;
	height: 191px;
	background-image: url(../img/science/water.png);

	margin-bottom: 130px;
}

CSS 문서 2 (animation.css)

/* science */
#science .scienceWrap .gly {
	animation: spinGly 1500ms linear infinite alternate;
}

@keyframes spinGly {
	from { transform: rotate(0deg); }
	to { transform: rotate(50deg); }
}

#science .scienceWrap .water {
	animation: spinWater 1500ms linear infinite alternate;
}

@keyframes spinWater {
	from { transform: rotate(0deg); }
	to { transform: rotate(-50deg); }
}

CSS 문서 3 (mobile.css)

@media (max-width: 767px) {
	/* science */
	#science {
		height: 580px;
		background-image: url(../img/mobile/science/mobile_science_bg.png);
	}

	#science .scienceWrap {
		overflow: hidden;
		width: 360px;
		height: auto;

		top: 180px;
	}

	#science .scienceWrap .scienceLeftWrap {
		width: 100px;
	}

	#science .scienceWrap .scienceLeftWrap .gly {
		width: 76px;
		height: 63px;
		background-image: url(../img/mobile/science/mobile_gly.png);

		margin: 0 0 10px 0;
	}

	#science .scienceWrap .scienceLeftWrap img,
	#science .scienceWrap .scienceRightWrap img {
		height: 15px;
	}

	#science .scienceWrap .scienceLeftWrap p,
	#science .scienceWrap .scienceRightWrap p {
		display: none;
	}

	#science .scienceWrap .scienceCenterWrap {
		width: 160px;
		height: 222px;
	}

	#science .scienceWrap .scienceCenterWrap .purpleSteam {
		width: 80px;
		height: 71px;
		background-image: url(../img/mobile/science/mobile_grape.png);

		margin-left: -40px;
	}

	#science .scienceWrap .scienceCenterWrap .funnelBack {
		width: 173px;
		height: 151px;
		background-image: url(../img/mobile/science/mobile_hopperback.png);
	}

	#science .scienceWrap .scienceCenterWrap .funnelFront {
		width: 160px;
		height: 122px;
		background-image: url(../img/mobile/science/mobile_hopperfront.png);

		left: 50%;
		margin: 20px 0 0 -80px;
	}

	#science .scienceWrap .scienceRightWrap {
		width: 100px;
	}

	#science .scienceWrap .scienceRightWrap .water {
		width: 67px;
		height: 63px;
		background-image: url(../img/mobile/science/mobile_water.png);

		margin-bottom: 10px;
		margin-left: 32px;
	}
}

키즈가오 실습 1편 - night 1

  • 먼저 나온 형제가 3차원 속성이면 레이아웃이 겹치는 현상을 이용해서, margin 값을 설정하면 y축 정렬 가능

HTML 문서

<body>
	<div id="night1">
		<div class="owl"></div>

		<div class="starWrap">
			<div class="star1"></div>
			<div class="star2"></div>
			<div class="star3"></div>
		</div>
	</div>
</body>

CSS 문서 1 (style.css)

/* night1 */
#night1 {
	width: 100%;
	height: 700px;
	background-image: url(../img/oneday/night1/night1_bg.png);
}

#night1 .owl {
	position: absolute;

	width: 334px;
	height: 571px;
	background-image: url(../img/oneday/night1/owl.png);

	margin-top: 50px;
}

#night1 .starWrap {
	position: relative;

	width: 750px;
	height: 400px;

	top: 150px;
	margin-left: 600px;
}

#night1 .starWrap .star1,
#night1 .starWrap .star2,
#night1 .starWrap .star3 {
	position: absolute;

	width: 53px;
	height: 50px;
	background-image: url(../img/oneday/night1/star1.png);
}

#night1 .starWrap .star1 {
	margin-top: 350px;
}

#night1 .starWrap .star2 {
	margin-left: 650px;
}

#night1 .starWrap .star3 {
	margin: 250px 0 0 500px;
}

CSS 문서 2 (animation.css)

/* night1 */
#night1 .starWrap .star1,
#night1 .starWrap .star2,
#night1 .starWrap .star3 {
	animation: pulseStar 1s linear infinite alternate;
}

@keyframes pulseStar {
	from { transform: scale(1); }
	to { transform: scale(0.8); }
}

CSS 문서 3 (mobile.css)

@media (max-width: 767px) {
	/* night1 */
	#night1 {
		position: relative;
        
		height: 500px;
		background-image: url(../img/mobile/oneday/night1/mobile_night1_bg.png);
	}

	#night1 .owl {
		width: 88px;
		height: 151px;
		background-image: url(../img/mobile/oneday/night1/mobile_owl.png);

		margin-top: 0;
	}

	#night1 .starWrap {
		position: absolute;

		width: 308px;
		height: 157px;
		background-image: url(../img/mobile/oneday/night1/mobile_star.png);

		top: 300px;
		margin-left: 50px;
	}

	#night1 .starWrap .star1,
	#night1 .starWrap .star2,
	#night1 .starWrap .star3 {
		display: none;
	}
}

학습한 내용 중 어려웠던 점 또는 해결못한 것들

  • 3차원 속성 레이아웃 겹침 현상 복습 필요
  • 전체적으로 복습 필요

해결방법

  • 강의 복습을 통해 margin 값이나 다른 값을 주지 않는 이상 레이아웃끼리 겹침 현상이 일어나는데, 오늘 학습에서는 이 현상을 이용해서 좌우 배치를 했음을 복습하였음

학습 소감

  • 오늘도 어제와 같이 기존 웹사이트를 이용, 실습을 진행하였음. 솔직히 아직까지는 직접 어떤 태그와 속성을 넣어 배치를 해야하는지 제대로 생각이 떠오르지는 않는 것 같음. 그렇기 때문에 복습은 물론이고, 계속해서 여러 속성과 명령어를 이용, 직접 사용하는 습관을 들이면서 점차 익숙해지는 과정을 더욱 겪어야겠음.
profile
박강산
안녕하세요. 맡은 업무를 확실하게 수행하는 웹 개발자가 되기 위하여 끊임없이 학습에 정진하겠습니다.
이전 포스트

Dev log - 12, 키즈가오 카피캣 실습 #1

다음 포스트

Dev log - 14, 키즈가오 카피캣 실습 #3

0개의 댓글