2021.06.03 (키즈가오 2편 실습)
학습한 내용
[night2]
- index.html부분
<div id="night2">
<div class="moon"></div>
<img class="night2Bubble" src="img/oneday/night2/night2bubble.png" alt="하루동안 숙성을 시키게 됩니다.">
<div class="rightMoonTree"></div>
</div>
- style.css부분
/* night2 */
#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;
}
- animation.css부분
#night2 .moon {
animation: moveMoon linear 10s infinite;
}
@keyframes moveMoon {
from{
margin-left: -135px;
}
to {
margin-left: 110%;
}
}
- mobile.css부분
/* night2 */
#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]
- index.html부분
<div id="morning">
<div class="sun"></div>
<div class="leftPine"></div>
<div class="rightPine"></div>
</div>
- style.css부분
/* morning */
#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;
}
- animation.css부분
#morning .sun {
animation: moveSun linear 10s 1500ms infinite;
}
@keyframes moveSun {
from {
margin-left: -131px;
}
to {
margin-left: 110%;
}
}
- mobile.css부분
/* morning */
#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]
- index.html부분
<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>
- style.css부분
/* kitchen */
#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;
/*background-color: yellow;*/
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;
}
- animation.css부분
#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(-100px, -237px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
}
- mobile.css부분
/* kitchen */
#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;
/*background-color: yellow;*/
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]
- index.html부분
<div id="color1">
<div class="penguin"></div>
<img class="color1Bubble" src="img/color/color1/color1bubble.png" alt="말랑말랑 키즈가오 완성">
</div>
- style.css부분
/* color1 */
#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;
}
- mobile.css부분
/* color1 */
#color1 {
height: 500px;
background-image: url(../img/mobile/color/color1/mobile_color1_bg.png);
}
#color1 .penguin {
display: none;
}
#color1 .color1Bubble {
position: relative;
float: initial; /* float기능을 끔 */
width: 166px;
height: 56px;
left: 50%;
margin: 100px 0 0 -83px;
}
[color2]
- index.html부분
<div id="color2">
<div class="horse"></div>
<div class="color2Wrap">
<img class="color2Bubble" src="img/color/color2/color2bubble.png" alt="색상을 선택해 보세요.">
</div>
<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>
- style.css부분
/* color2 */
#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;
/*background-color: yellow;*/
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;
}
- mobile.css부분
/* color2 */
#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]
- index.html부분
<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>
- style.css부분
/* color3 */
#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;
}
- mobile.css부분
/* color3 */
#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);
}
학습내용 중 어려웠던 점
kitchen부분에 steam나오는 부분이 어려웠던 부분입니다.
해결방법
그래도 애니메이션을 직접 만드는것이 아니라 참고 사이트에서 다양한 효과 형태와 시간 조절등을 다양하게 넣어보고 그것을 참고해서 수정하면서 만들수 있어서 해결하는데 도움이 되었습니다.
학습소감
kidsgao에 자바스크립트를 이용한 효과를 제외하고 pc와 mobile작업을 해밨는데 여러 배치작업, 애니메이션, 미디어쿼리등을 조합해 홈페이지를 만들어 보면서 다양하게 복습하는 시간이었습니다.
마지막에 말하신거처럼 가끔 클래스명이 통일성이 없는 경우가 보였는데 다음부턴 네이밍의 통일성을 맞추면서 작업을 해야겠다고 생각했습니다.
Author And Source
이 문제에 관하여(2021.06.03 (키즈가오 2편 실습)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@lstem12/2021.06.03-kidsgao-2-training저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)