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

박강산·2021년 7월 13일
0

대구AI스쿨 - 개발일지

목록 보기
12/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편 - intro

  • 가로 스크롤이 생기지 않게 하기 위해서는, overflow-x: hidden 속성 사용
  • 투명한 색상 설정 시에는 transparent 사용
  • 이미지 작업을 할 때에는, 사용하고자 하는 이미지의 크기에 맞춰서 공간을 설정하는 것이 좋음, 공간을 메꾸려는 속성을 가지기 때문 (반복을 없애도 공간은 남아있음)
  • 이미지의 크기는 숫자 5나 짝수로 끝나는 크기로 해야함 (레이아웃 배치가 틀어질 수 있음)
  • position 의 여러가지 속성이 왜 여기에 들어가는지에 대한 자문자답이 중요함
  • 여기서 relative 속성을 사용한 이유는 첫째로 left 속성을 사용하기 위해, 둘째로 자식의 좌표 기준점을 정확하게 설정하기 위함
  • 자식이 absolute 속성을 가질 때에는, 부모가 relative 속성을 가지는 것이 안전하게 레이아웃 작업이 가능함
  • 3차원 속성 레이아웃 위치를 조절할 때, margin 속성은 마진 병합 현상 문제, padding 속성은 레이아웃이 밀려나는 문제가 있음. 그렇기에 top 속성을 사용하면, 나머지 레이아웃은 그대로 설정한 레이아웃만 겹치는 형태로 위치가 이동됨
  • CSS 문서를 여러개를 사용할 때, 앞 문서에서 설정한 position 값 때문에 사용할 수 있는 속성을, 뒷 문서에서도 사용할 수 있음

HTML 문서

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

CSS 문서 1 (style.css)

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

	/*padding-top: 100px;*/
}

#intro .introWrap {
	position: relative;

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

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

	/*margin-top: 100px;*/
	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: 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;
	/*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;
}

CSS 문서 2 (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: 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%;
	}
}

CSS 문서 3 (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);
	}
    
}

키즈가오 실습 1편 - farm 1

  • 줄바꿈은 <br> 태그 사용

HTML 문서

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

CSS 문서 1 (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;
}

CSS 문서 2 (mobile.css)

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

키즈가오 실습 1편 - farm 2

  • 디자인을 적용했는데 표기가 되지 않는다면, 개발자 도구를 이용해서 클릭을 통해 확인
  • 여기서 float 을 사용한 이유는, 두 이미지가 만나기 전에 모바일 버전으로 변경되기 때문에 사용해도 무방

HTML 문서

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

CSS 문서 1 (style.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;
	}

CSS 문서 2 (mobile.css)

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

키즈가오 실습 1편 - farm 3

  • 이미지를 회전시킬 때에는, 그림자 이미지를 따로 설정

HTML 문서

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

CSS 문서 1 (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;
}

CSS 문서 2 (animation.css)

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

CSS 문서 3 (mobile.css)

@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 -70px;
	}

}

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

  • left, right 와 float 의 쓰임새 차이
  • 레이아웃 겹쳐짐 현상에 대해서 앞서 배웠던 내용을 바탕으로 복습 필요

해결방법

  • 강의 복습을 통해 left, right 와 float 은 모바일 버전의 width 값에 따라 쓰임새가 달라짐을 알았음. float 사용 시 width 값을 이미지가 만나는 지점까지 설정되어 있으면 레이아웃이 변형되므로, 이미지가 큰 경우에는 left, right 를 사용하여 레이아웃 설정

학습 소감

  • 오늘은 지금까지 실습과 달리 웹사이트와 정말 유사하게 만들어보는 실습을 진행하였음. 실제 웹사이트에서 쓰인 이미지 파일을 바탕으로 진행하다보니, 확실하게 내가 웹사이트를 만들고 있구나 하는 생각이 들었음.
    그런데 이미지의 위치를 설정하는 margin 값은 어떤 기준으로 설정하는지에 대해 궁금증이 생겼고, 멘토님과 질의응답을 통해 해당 의문점을 해결할 예정임
profile
박강산
안녕하세요. 맡은 업무를 확실하게 수행하는 웹 개발자가 되기 위하여 끊임없이 학습에 정진하겠습니다.
이전 포스트

Dev log - 11, 미디어쿼리 #2

다음 포스트

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

0개의 댓글