Devlog 7월 15일 kidsgao 사이트 실습-3

김우성·2021년 7월 15일

CSS html

Dev

목록 보기

13/15

1. 학습내용

키즈가오 사이트 실습 -3

night2 설계도면

<div id="night2">
	<div class="moon"></div>
	<img class="night2Bubble" src="img/oneday/night2/night2bubble.png"
			alt="하루동안 숙성을 시키게 됩니다." 
	>
	<div class="rightMoonTree"></div>
</div>

night2 css

#night2 {
	position: relative;

	width: 100%;
	height: 800px;
	background-image: url(../img/oneday/night2/night2_bg.png);
}

#night2 .moon {
	width: 135px;
	height: 135px;
	background-image: url(../img/oneday/night2/moon.png);
}

#night2 .night2Bubble {
	position: absolute;

	margin: 300px 0 0 80px;
}

#night2 .rightMoonTree {
	position: absolute;

	width: 243px;
	height: 588px;
	background-image: url(../img/oneday/night2/moontree.png);

	right: 0;
	bottom: 0;
}

night2 animation

달이 position이 static 상태라 잠자리에서 적용한 left속성사용 불가 그래서 margin-left 사용

#night2 .moon {
	animation: moveMoon linear 10s infinite;
}

@keyframes moveMoon {
	from {
		margin-left: -135px;
	}
	to {
		margin-left: 110%;
	}
}

night2 모바일

initial 초기상태

처음에 bottom 0을 주었지만 모바일에선 초기값을 주고싶을 때 사용(미디어쿼리 바깥쪽에서 작성한 코드를 모바일버전에서는 적용하지 않겠다)

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

morning 설계도면

<div id="morning">
		
	<div class="sun"></div>
	<div class="leftPine"></div>
	<div class="rightPine"></div>

</div>

morning css

id를 사용한 큰공간을 만들때 어떤 포지션을 사용해야될지 고민될때는 그냥 relative로 감싸기 - 일종의 안전장치를 만들어두는 것

#morning {
	position: relative;

	width: 100%;
	height: 800px;
	background-image: url(../img/oneday/morning/morning_bg.png);
}

#morning .sun {
	width: 131px;
	height: 131px;
	background-image: url(../img/oneday/morning/sun.png);
}

#morning .leftPine {
	position: absolute;

	width: 231px;
	height: 329px;
	background-image: url(../img/oneday/morning/leftpine.png);

	top: 270px;
}

#morning .rightPine {
	position: absolute;

	width: 294px;
	height: 609px;
	background-image: url(../img/oneday/morning/rightpine.png);

	right: 0;
	bottom: 0;
}

morning animation

해와 달이 동시에 시작하면 안되기 때문에 delay를 줌

해와 달의 애니메이션 시작 시 delay가 있다보니 원래 위치에서 애니메이션 시작 위치로 갑자기 이동하는 것이 부자연스러웠다. 그래서 fillmode : backwards를 사용했다.

#morning .sun {
    animation: moveSun linear 10s 1500ms infinite backwards;

#morning .sun {
	animation: moveSun linear 10s 1500ms infinite;
}

@keyframes moveSun {
	from {
		margin-left: -131px;
	}
	to {
		margin-left: 110%;
	}
}

morning 모바일

@media (max-width: 767px) {

	#morning {
		height: 720px;
		background-image: url(../img/mobile/oneday/morning/mobile_morning_bg.png);
	}

	#morning .sun {
		width: 33px;
		height: 32px;
		background-image: url(../img/mobile/oneday/morning/mobile_sun.png);
	}

	#morning .leftPine {
		width: 48px;
		height: 81px;
		background-image: url(../img/mobile/oneday/morning/mobile_leftpine.png);
	}

	#morning .rightPine {
		width: 77px;
		height: 149px;
		background-image: url(../img/mobile/oneday/morning/mobile_rightpine.png);

		top: 220px;
	}
    
}

kitchen 설계도면

<div id="kitchen">
		
	<div class="leftPan"></div>
	<div class="rightPot"></div>

	<div class="steamWrap">
		<div class="steam"></div>
		<div class="bubble1"></div>
	</div>

	<img class="kitchenBubble" src="img/kitchen/kitchenbubble.png"
   			 alt="숙성을 시킨 반죽을 잘 익혀주면"
   	>

</div>

kitchen css

레이어겹침현상 발생 - clear 사용

clear 같은 경우는 새로 공간을 만들어줘서 넣는 경우가 많음

<div id="kitchen">
    <div class="leftPan"></div>
    <div class="rightPot"></div>
    <div class="clearfix"></div>
    <div class="steamWrap">
    </div>
</div>

#kitchen .rightPot {
	float: right;
}

#kitchen .clearfix {
	clear: both;
}

#kitchen {
	position: relative;

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

#kitchen .leftPan {
	float: left;

	width: 253px;
	height: 384px;
	background-image: url(../img/kitchen/pan.png);
}

#kitchen .rightPot {
	float: right;

	width: 243px;
	height: 132px;
	background-image: url(../img/kitchen/pot.png);
}

#kitchen .steamWrap {
	position: relative;

	width: 483px;
	height: 457px;

	left: 50%;
	margin-left: -275px;
	top: -100px;

	clear: both;
}

#kitchen .steamWrap .steam {
	position: absolute;

	width: 479px;
	height: 457px;
	background-image: url(../img/kitchen/steam.png);

	z-index: 100;
}

#kitchen .steamWrap .bubble1 {
	position: absolute;

	width: 55px;
	height: 56px;
	background-image: url(../img/kitchen/bubble.png);

	margin-top: 230px;
}

#kitchen .kitchenBubble {
	position: absolute;

	top: 400px;
	right: 0;
}

kitchen animation

포물선 그리는 애니메이션은 복잡해서 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(-99px, -198px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
}

kitchen 모바일

margin top에 -를 적용하는건 위쪽으로 끌어 올리겠다는 의미

@media (max-width: 767px) {

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

color1 설계도면

<div id="color1">
	<div class="penguin"></div>
	<img class="color1Bubble" src="img/color/color1/color1bubble.png"
			alt="말랑말랑 키즈가오 완성"
	>
</div>

color1 css

어떤 포지션을 사용해야할지 미정인 상태이면 relative로 감싸주기만 해도됨(안전장치)

top을 사용하게되면 다른영역에 영향을 주지않고 자기 자신만 이동 (침범 가능)

#color1 {
	position: relative;

	width: 100%;
	height: 750px;
	background-image: url(../img/color/color1/color1_bg.png);
}

#color1 .penguin {
	position: relative;

	width: 356px;
	height: 244px;
	background-image: url(../img/color/color1/penguin.png);

	top: 100px;
	left: 100px;
}

#color1 .color1Bubble {
	float: right;

	margin: 100px 200px 0 0;
}

color1 모바일

float의 기능을 적용하지않을때 initial 넣으면됨

@media (max-width: 767px) {

	#color1 {
		height: 500px;
		background-image: url(../img/mobile/color/color1/mobile_color1_bg.png);
	}

	#color1 .penguin {
		display: none;
	}

	#color1 .color1Bubble {
		position: relative;
		float: initial;

		width: 166px;
		height: 56px;

		left: 50%;			
		margin: 100px 0 0 -83px;
	}

}

color2 설계도면

버튼 - 최초 속성으로 border, background-color 가지고 있어 초기화 필요

버튼은 클릭시 서버에 데이터 보내는 역할x, type button 명시

서버에 데이터 보내는 역할이라면 type은 submit으로 변경

버튼은 inline-block요소라 x축 정렬

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

color2 css

color2wrap부분의 높이값이 없음 -> 자식영향 postion 안의 자식들이 전부다 static 상태라 자식 높이에 영향을 받음

#color2 {
	position: relative;
	width: 100%;
	height: 800px;
	background-image: url(../img/color/color2/color2_bg.png);
}

#color2 .horse {
	float: right;
	width: 188px;
	height: 241px;
	background-image: url(../img/color/color2/horse.png);

	margin: 100px 100px 0 0;
}

#color2 .color2wrap {
	clear: both;
	position: relative;

	width: 500px;

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

#color2 .color2wrap .color2Bubble {
	margin-bottom: 30px;
}

#color2 .color2wrap .btn-wrap {
	margin-bottom: 20px;
}

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

#color2 .color2wrap .color2Comment {
	color: #8e7577;
}

color2 모바일

배경화면부분 반복효과 있음, no repeat 적용시 원래공간의 이미지가 나타나는데 공백이 엄청큼

반복효과를 이용하여 공백을 메꿔준것

@media (max-width: 767px) {

	#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-left: 20px;
		margin-right: 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;
	}
    
}

color3 설계도면

<div id="color3">
	<div class="flag"></div>
	<div class="book"></div>
	<img class="logo" src="img/color/color3/logo.png" alt="키즈가오 회사 로고">
	<div class="dice"></div>
</div>

color3 css

#color3 {
	position: relative;

	width: 100%;
	height: 800px;
	background-image: url(../img/color/color3/color3_bg.png);
}

#color3 .flag {
	position: relative;

	width: 1774px;
	height: 178px;
	background-image: url(../img/color/color3/flag.png);

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

#color3 .book {
	float: right;

	width: 417px;
	height: 178px;
	background-image: url(../img/color/color3/book.png);
}

#color3 .logo {
	position: absolute;

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

#color3 .dice {
	position: absolute;
	width: 239px;
	height: 200px;
	background-image: url(../img/color/color3/dice.png);

	left: 0;
	bottom: 0;
}

color3 모바일

@media (max-width: 767px) {
	#color3 {
		height: 430px;
		background-image: url(../img/mobile/color/color3/mobile_color3_bg.png);
	}

	#color3 .flag {
		width: 320px;
		height: 46px;
		background-image: url(../img/mobile/color/color3/mobile_flag.png);

		margin-left: -160px;
	}

	#color3 .book {
		width: 107px;
		height: 46px;
		background-image: url(../img/mobile/color/color3/mobile_book.png);

		margin-right: 20px;
	}

	#color3 .logo {
		width: 225px;

		margin-top: 100px;
		margin-left: -112.5px;
	}

	#color3 .dice {
		width: 62px;
		height: 52px;
		background-image: url(../img/mobile/color/color3/mobile_dice.png);
	}

}

끝으로 실습에 대한 평가

신입때 만든거라 불필요한 코드나 어색한 부분이 있음

정답지라 생각하지말고 참고로 생각

class 이름은 통일성 및 일정한 규칙으로 짓는게 중요!

처음부터 끝까지 규칙성가지고 다시 작업해보기

2. 학습 중 어려웠던 내용

position 부분이 많이 약하다는 걸 알았고 이해는 대충 하지만 내가 어떻게 이용해야 할지 아직 고민이 많음

3. 해결방법

역시 꾸준히 사용하는 방법과 저녁시간과 주말 시간을 이용해 이번에 실습해본 사이트를 내가 직접 만들어봐야겠다

4. 소감

확실히 마지막에 말씀하신 class명에 관한 부분은 생각을 하고 있었고 나만의 깔끔한 방식을 찾도록 해야겠다

김우성

매우 긍정적인 개발자

이전 포스트

Devlog 7월 14일 kidsgao 사이트 실습-2

다음 포스트

Devlog 7월 15일 kidsgao 사이트 실습-3

Dev

1. 학습내용

키즈가오 사이트 실습 -3

night2 설계도면

night2 css

night2 animation

달이 position이 static 상태라 잠자리에서 적용한 left속성사용 불가 그래서 margin-left 사용

night2 모바일

initial 초기상태

처음에 bottom 0을 주었지만 모바일에선 초기값을 주고싶을 때 사용(미디어쿼리 바깥쪽에서 작성한 코드를 모바일버전에서는 적용하지 않겠다)

morning 설계도면

morning css

id를 사용한 큰공간을 만들때 어떤 포지션을 사용해야될지 고민될때는 그냥 relative로 감싸기 - 일종의 안전장치를 만들어두는 것

morning animation

해와 달이 동시에 시작하면 안되기 때문에 delay를 줌

해와 달의 애니메이션 시작 시 delay가 있다보니 원래 위치에서 애니메이션 시작 위치로 갑자기 이동하는 것이 부자연스러웠다. 그래서 fillmode : backwards를 사용했다.

morning 모바일

kitchen 설계도면

kitchen css

레이어겹침현상 발생 - clear 사용

clear 같은 경우는 새로 공간을 만들어줘서 넣는 경우가 많음

kitchen animation

포물선 그리는 애니메이션은 복잡해서 stylie 사이트 이용

kitchen 모바일

margin top에 -를 적용하는건 위쪽으로 끌어 올리겠다는 의미

color1 설계도면

color1 css

어떤 포지션을 사용해야할지 미정인 상태이면 relative로 감싸주기만 해도됨(안전장치)

top을 사용하게되면 다른영역에 영향을 주지않고 자기 자신만 이동 (침범 가능)

color1 모바일

float의 기능을 적용하지않을때 initial 넣으면됨

color2 설계도면

버튼 - 최초 속성으로 border, background-color 가지고 있어 초기화 필요

버튼은 클릭시 서버에 데이터 보내는 역할x, type button 명시

서버에 데이터 보내는 역할이라면 type은 submit으로 변경

버튼은 inline-block요소라 x축 정렬

color2 css

color2wrap부분의 높이값이 없음 -> 자식영향 postion 안의 자식들이 전부다 static 상태라 자식 높이에 영향을 받음

color2 모바일

배경화면부분 반복효과 있음, no repeat 적용시 원래공간의 이미지가 나타나는데 공백이 엄청큼

반복효과를 이용하여 공백을 메꿔준것

color3 설계도면

color3 css

color3 모바일

끝으로 실습에 대한 평가

신입때 만든거라 불필요한 코드나 어색한 부분이 있음

정답지라 생각하지말고 참고로 생각

class 이름은 통일성 및 일정한 규칙으로 짓는게 중요!

처음부터 끝까지 규칙성가지고 다시 작업해보기

2. 학습 중 어려웠던 내용

position 부분이 많이 약하다는 걸 알았고 이해는 대충 하지만 내가 어떻게 이용해야 할지 아직 고민이 많음

3. 해결방법

역시 꾸준히 사용하는 방법과 저녁시간과 주말 시간을 이용해 이번에 실습해본 사이트를 내가 직접 만들어봐야겠다

4. 소감

확실히 마지막에 말씀하신 class명에 관한 부분은 생각을 하고 있었고 나만의 깔끔한 방식을 찾도록 해야겠다

Devlog 7월 14일 kidsgao 사이트 실습-2

Devlog 7월 16일 Helbak사이트 실습

0개의 댓글