2021.07.15 kidsgao-3

정혜리·2021년 7월 15일
CSShtml개발일지코린이프론트엔드
0

Practice-copy_websites

목록 보기
3/15

Day14,
화,수 2일에 걸쳐 웹사이트 'kidsgao'를 따라 만들어봤다. 오늘도 마지막으로 kidsgao 웹사이트 만들기를 해봤다.

오늘 무엇을 배웠지?

Kidsgao 사이트 따라 만들어보기3

Kidsgao : http://sisikiller.dothome.co.kr/

Night 2 페이지

html

  1. new file-save(index0715.html), save(style0715.css, animation0715.css, mobile0715.css) (css파일은 편의상 css 폴더를 만들어 그안에 저장)
  2. 기본 설정 + html, css 파일을 연동, 미디어쿼리를 사용할 수 있도록 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 태그 입력
<link>
<!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/style0715.css">
	<link rel="stylesheet" type="text/css" href="css/animation0715.css">
	<link rel="stylesheet" type="text/css" href="css/mobile0715.css">
</head>
<body>

</body>
</html>
  1. <div>태그로 night2 페이지 영역을 설정하고 id를 입력한다. <div> 태그로 들어갈 이미지의 영역을 설정하고 class를 설정한다. 
	<div id="night2">
		<div class="moon"></div>
		<img class="night2Bubble" src="../img/oneday/night2/night2bubble.png" alt="하루동안 숙성을 시키게 됩니다.">
		<div class="rightMoonTree"></div>
	</div>

CSS-Style

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

으로 웹브라우저의 경계에 주어진 기본값을 없애고, 각 영역의 경계에 주어진 기본값을 없앤다. 또, button 태그, 자식관계의 태그들의 기본값을 모두 없앤다.
2. night2 페이지 영역<div>태그인 #night2의 너비와 높이를 설정하고 이미지를 연결한다.

#night2 { position: relative; width: 100%; height: 800px;
	background-image: url(../../img/oneday/night2/night2_bg.png); }
  1. <div> 태그 .moon의 이미지를 연결하고 너비 높이를 설정한다. 
#night2 .moon { width: 135px; height: 135px;
	background-image: url(../../img/oneday/night2/moon.png); }
  1. .night2Bubble 이미지는 position: absolute로 설정하고 너비, 높이를 설정한다. margin으로 위치를 설정한다.
#night2 .night2Bubble { position: absolute; margin: 300px 0 0 80px; }
  1. .rightMoonTree 이미지를 연결하고 너비, 높이 등을 설정하고 position은 absolute로, right, bottom값으로 위치를 설정해 고정한다. 
#night2 .rightMoonTree { position: absolute; width: 243px;
	height: 588px; right: 0; bottom: 0;
	background-image: url(../../img/oneday/night2/moontree.png); }

CSS-Animation

  1. Night2 페이지에서 움직이는 이미지(달)에 애니메이션을 적용한다. 모든 애니메이션은 일정한 속도로 계속해서 반복적으로 효과가 적용되도록 설정한다.
#night2 .moon { animation: moveMoon 10s linear infinite; }
@keyframes moveMoon{
	from {margin-left: -135px}
	to {margin-left: 110%}
}

CSS-Mobile

  1. 미디어쿼리를 적용해 모바일 사이즈(최대 767px-> 768px부터는 pc버전 화면)의 화면에서는 다르게 적용되도록 설정한다.
@media (max-width: 767px) {
	#night2 { height: 620px; 
		background-image: url(../../img/mobile/oneday/night2/mobile_night2_bg.png); }
	#night2 .moon { width: 40px; height: 40px; 
		background-image: url(../../img/mobile/oneday/night2/mobile_moon.png); }
	#night2 .night2Bubble { width: 127px; left: 50%; margin: 300px 0 0 -67px; }
	#night2 .rightMoonTree { width: 70px; height: 173px;
		background-image: url(../../img/mobile/oneday/night2/mobile_moontree.png);
		top: 70px; bottom: initial; }
  1. #night2의 높이를 재설정하고 이미지를 연결한다.
  2. #night2에 속한<div> 태그들의 높이와 너비를 재설정하고 이미지를 연결한다. 또, margin 값이나 top, bottom 값을 줘 위치를 설정한다.(bottom: initial; 은 bottom: 0;과 같다)
  3. .night2Bubble 은 left:50%로 중앙에 위치하도록 한다.

Kitchen 페이지

(morning페이지는 night2와 비슷해서 생략)

html

(night2, morning html에 이어서)
1. <div> 태그로 kitchen 페이지 영역을 설정하고 id를 설정한다.
2. 삽입할 이미지 각각의 영역을 <div>태그로 설정하고 class를 설정한다.
3. <img>태그로 이미지를 연결하고 alt=""로 설명을 입력한다.

	<div id="kitchen">
		<div class="leftPan"></div>
			<div class="rightPot"></div>
			<div class="steamWrap">
			<div class="steam"></div>
			<div class="bubble1"></div>
		</div>
		<img src="../img/kitchen/kitchenbubble.png" class="kitchenBubble" alt="숙성을 시킨 반죽을 잘 익혀주면">
	</div>

CSS-Style

(forest1,2,3의 css에 이어서)
1. <div>태그인 #kitchen의 너비와 높이를 설정하고 이미지를 연결한다. 이때 position을 relative로 설정해 자식태그들과 영향을 받을수 있도록 한다.

#kitchen { position: relative; width: 100%; height: 800px;
	background-image: url(../../img/kitchen/kitchen_bg.png); }
  1. <div> 태그 .leftPan, .rightPot의 position을 absolute로 설정하고 너비와 높이를 설정한다. 위치를 left:0;, right:0;으로 설정해서 (float:left, float:right와 동일한 결과를 만듦->실제로 수업에서는 float로 위치를 설정함) 순서대로 좌->우 정렬되도록 설정한다.
#kitchen .leftPan { position: absolute; left: 0;
	width: 253px; height: 384px;
	background-image: url(../../img/kitchen/pan.png); }

#kitchen .rightPot { position: absolute; right: 0;
	width: 243px; height: 132px;
	background-image: url(../../img/kitchen/pot.png); }
  1. .steamWrap은 속한 태그와 높이의 영향을 받도록 position을 relative로 설정한다. left, margin-left로 중앙배열한다. .steamWrap에 속한 각 태그들은 position:absolute로 위치를 고정하고 높이와 너비를 설정해주고 이미지를 연결한다. 앞, 뒤 로 배열을 해야하는 경우 z-index로 설정한다.
#kitchen .steamWrap { position: relative; width: 483px; height: 457px;
	left: 50%; margin-left: -240px; top: 300px; }
#kitchen .steamWrap .steam { position: absolute; width: 479px;
	height: 457px;	z-index: 100;
	background-image: url(../../img/kitchen/steam.png); }
#kitchen .steamWrap .bubble1 { position: absolute; width: 55px;
	height: 56px; margin-top: 230px;
	background-image: url(../../img/kitchen/bubble.png); }
  1. .kitchenBubble에 대해 설정한 위치를 absolute로 고정한다.
#kitchen .kitchenBubble { position: absolute; top: 400; right: 0; }

CSS-Animation

  1. #science 페이지에서 움직이는 이미지(스팀기에서 올라오는 bubble1)에 애니메이션을 적용한다. 모든 애니메이션은 일정한 속도로 계속해서 반복적으로 효과가 적용되도록 설정한다. ->포물선으로 움직이는 효과는 'stylie(https://jeremyckahn.github.io/stylie/)'에서 만들어서 붙여넣음.
#kitchen .steamWrap .bubble1 {
  animation-name: Bubble;
  animation-duration: 1000ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  transform-origin: 0 0;
}
@keyframes Bubble {
  0% {transform:translate(0px, 0px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
  100% {transform:translate(-107px, -185px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
}

CSS-Mobile

(night2, morning의 css에 이어서)

#kitchen { height: 400px; background-image: url(../../img/mobile/kitchen/mobile_kitchen_bg.png); }
#kitchen .leftPan { width: 52px; height: 78px;
	background-image: url(../../img/mobile/kitchen/mobile_pan.png); 	}
#kitchen .rightPot { width: 73px; height: 38px;
	background-image: url(../../img/mobile/kitchen/mobile_pot.png); }
#kitchen .steamWrap { width: 300px; height: 300px; margin-left: -150px;
	top: 0; }
#kitchen .steamWrap .steam { width: 222px; height: 184px;
	background-image: url(../../img/mobile/kitchen/mobile_steam.png);
	left: 50%; top: 100px; margin: 0 0 0 -140px; }
#kitchen .steamWrap .bubble1 { display: none; }
#kitchen .kitchenBubble { width: 143px; left: 50%; margin: -320px 0 0 -70px; }
  1. <div>태그인 #kitchen의 높이를 재설정하고 이미지를 연결한다.
  2. .leftPan, .rightPan의 너비와 높이를 설정하고 이미지를 연결한다.
  3. .steamWrap의 너비와 높이를 재설정하고 margin, top으로 위치를 재설정한다.
  4. .steam의 너비와 높이 등을 설정한다. left와 margin 으로 태그들의 위치를 설정하고 이미지를 연결한다. pc에서는 애니메이션 효과가 있었던 .bubble1은 보이지 않으므로 display로 없앤다.
  5. .KitchenBubble의 너비,높이와 위치 등 을 설정한다.

Color2 페이지

(color1은 중복되는 부분이 많고 간단해서 생략)

html

(kitchen, color1의 html에 이어서)
1. <div> 태그로 color2 페이지 영역을 설정하고 id를 설정한다.
2. 삽입할 이미지 각각의 영역을 <div>태그로 설정하고 class를 설정한다. <p>태그로 글을 입력하고 class를 설정한다.

<div id="color2">
	<div class="horse"></div>
	<div class="color2Wrap">
		<img class="color2Bubble" src="../img/color/color2/color2bubble.png" alt="색상을 선택해 보세요">
		<div class="btn-wrap">
			<button type="button" class="red"></button>
			<button type="button" class="yellow"></button>
			<button type="button" class="blue"></button>
		</div>
		<p class="color2Comment">
			아이가 원하는 색상을 직접 만들어 색감을 스스로 발달시킵니다.<br>
			색이 잘 섞이므로 누구나 쉽게 다양한 색을 만들 수 있습니다.
		</p>
	</div>
</div>

CSS-Style

(kitchen, color1의 css에 이어서)
1. <div>태그인 #color2의 너비와 높이를 설정하고 이미지를 연결한다. 

#color2 { position: relative; width: 100%; height: 800px;
	background-image: url(../../img/color/color2/color2_bg.png); }
  1. <div> 태그 .horse의 position을 absolute로 설정하고 margin, right:0;으로 위치(float:right와 같은 결과를 나타냄)를 고정한다. 이미지를 연결하고 너비와 높이를 설정한다. .color2Wrap은 자식태그가 여러개 있는 영역으로 position을 relative로 설정하고 너비를 설정하고 top, margin-left값으로 위치를 설정한다.
#color2 .horse { position: absolute; right: 0; width: 188px;
	height: 241px; margin: 100px 100px 0 0;
	background-image: url(../../img/color/color2/horse.png); }
#color2 .color2Wrap { position: relative; width: 500px;
	top: 430px; margin-left: 50px; }
  1. .color2Wrap의 자식태그들인 .red, .blue, .red의 사이즈를 설정하고 이미지를 각각 연결한다.
#color2 .color2Wrap .btn-wrap .red, #color2 .color2Wrap .btn-wrap .yellow,
#color2 .color2Wrap .btn-wrap .blue { width: 59px; height: 82px; }
#color2 .color2Wrap .btn-wrap .red {
	background-image: url(../../img/color/color2/btn/btn_red.png); }
#color2 .color2Wrap .btn-wrap .yellow {
	background-image: url(../../img/color/color2/btn/btn_yellow.png); }
#color2 .color2Wrap .btn-wrap .blue {
	background-image: url(../../img/color/color2/btn/btn_blue.png); }
  1. .color2Comment 의 글자색을 설정한다.
#color2 .color2Wrap .color2Comment { color: #8e7757; }

CSS-Mobile

(kitchen, color1의 css에 이어서)

#color2 { height: 400px; background-image: url(../../img/mobile/color/color2/mobile_color2_bg.png); }

#color2 .horse { display: none; }

#color2 .color2Wrap { width: 320px; height: 200px; top: 0; left: 50%;
	margin-left: -160px; text-align: center; }

#color2 .color2Wrap .color2Bubble { width: 128px; }

#color2 .color2Wrap .btn-wrap { width: 300px; height: 60px; margin-bottom: 0; }

#color2 .color2Wrap .btn-wrap .red, #color2 .color2Wrap .btn-wrap .yellow,
#color2 .color2Wrap .btn-wrap .blue { width: 40px; height: 56px; }

#color2 .color2Wrap .btn-wrap .red { background-image: url(../../img/mobile/color/color2/btn/mobile_btn_red.png); }
#color2 .color2Wrap .btn-wrap .yellow { background-image: url(../../img/mobile/color/color2/btn/mobile_btn_yellow.png); margin: 0 20px 0 20px;}
#color2 .color2Wrap .btn-wrap .blue { background-image: url(../../img/mobile/color/color2/btn/mobile_btn_blue.png);}

#color2 .color2Wrap .color2Comment { color: #8e7577; line-height: 15px;
	font-size: 10px; }
  1. <div>태그인 #color2의 높이를 재설정하고 이미지를 연결한다.
  2. .horse는 이미 #color2에 속해있는 이미지로 재설정했기 때문에 모바일버전에서는 나타나지 않도록 display:none;으로 설정한다.
  3. .color2Wrap의 너비와 높이를 재설정하고 left:50%로 중앙에 배열한다. 또 안의 태그들이 중앙배열 되도록 text-align: center;을 적용한다. 또, .color2Wrap 안 태그들의 너비와 높이를 재설정한다.
  4. .btn-wrap에 속한 <div> 태그들(.red, .yellow, .blue)의 높이와 너비를 재설정하고 이미지를 연결한다.
  5. .color2Comment의 글자색, 줄간격, 글자크기 등을 재설정한다.

무엇이 어려웠지?


오른쪽에 있는 그림이 왼쪽의 그림과 동일한 일직선 상에 있는 것이 아니라 자꾸 밑으로 내려갔다. display: inline-Block; 도 해보고 .leftpan을 position: absolute; left:0;, .rightpot을 position: absolute; right:0;으로도 바꿔보고 개발자도구에 이것저것 빼보고 다시 넣어봐도 여전히 .leftpan 아래줄에 .rightpot이 위치해 있었다.

어떻게 해결했지?


▼

이렇게 순서를 바꾸니깐 원하는 대로 되더라...
<div>태그는 block 속성이 있기 때문에 서랍장 순서대로 된다는걸 잊고 있었다.

그래서?

3일간에 걸쳐서 어렴풋이 kidsgao사이트를 따라해봤다. 언제끝나나 하고 지루해 했던 적도 있고 똑같이 했는데 왜 안되나 골머리를 앓았던 적도 있고 이제는 루틴으로 입력하는 설정값을 선생님이 말씀하시기도 전에 적고 있었던 적도 있었다. 역시 직접해보면서 많이 느는 것 같다.

sublime3를 이용해 오늘 만들어본 파일
https://github.com/hyeriJUNG/Daegu_AI_School/tree/main/0715

profile
정혜리
.
이전 포스트

2021.07.14 kidsgao-2

다음 포스트

2021.07.16 덴마크쇼핑몰

0개의 댓글