kidsgao3
학습한 내용
index.html
<div id="night2">
<div class="moon"></div>
<img class="night2Bubble" src="img/oneday/night2/night2bubble.png" alt="하루동안 숙성을 시키게 됩니다."></div>
<div class="rightMoonTree"></div>
</div>
<div id="morning">
<div class="sun"></div>
<div class="leftPine"></div>
<div class="rightPine"></div>
</div>
<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>
<div id="color1">
<div class="penguin"></div>
<img class="color1Bubble" src="img/color/color1/color1bubble.png" alt="말랑말랑 키즈가오 완성!">
</div>
<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>
<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
#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);
background-color: yellow;
right: 0;
bottom: 0;
}
#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;
}
#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;
}
#color1{
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;
}
#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 .red,
#color2 .color2wrap .btn-wrap .yellow,
#color2 .color2wrap .btn-wrap .blue {
width: 59px;
height: 82px;
}
#color2 .color2wrap .btn-wrap {
margin-bottom: 20px;
}
#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;
}
#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;
}
animation
#night2 .moon{
animation: moveMoon linear 10s infinite;
}
@keyframes moveMoon{
from{
margin-left: -135px;
}
to{
margin-left: 110%;
}
}
#morning .sun{
animation: moveSun linear 10s 1500ms infinite;
}
@keyframes moveSun{
from{
margin-left: -131px;
}
to{
margin-left: 110%;
}
}
#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(-126px, -118px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
}
mobile.css
#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{
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);
top: 270px;
}
#morning .rightPine {
width: 77px;
height: 149px;
background-image: url(../img/mobile/oneday/morning/mobile_rightpine.png);
top: 220px;
}
#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;
/*background-color: yellow;*/
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{
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 {
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-left: 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{
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);
}
#color3 .logo{
width: 225px;
margin-top: 178px;
margin-left: -112.5px;
}
#color3 .dice{
width: 62px;
height: 52px;
background-image: url(../img/mobile/color/color3/mobile_dice.png);
}
학습내용 중 어려웠던 점
margin 값을 배치할 때마다 노가다식으로 숫자넣고 수정하면서 해야하는지 궁금했는데, 마침 질의응답에 관련 질문이 있었다!!
해결방법
노가다식으로 해야할 때도 있고, 보통은 디자이너가 css margin값을 얼마나 해야하는지 알려준다고 하신다.
학습소감
하나의 사이트를 만드는 과정을 따라하기만 했는데도 정말 쉽지 않다는 생각이 들었다. 많은 변수와 여러가지 어려움 속에서 나 혼자 작성해낼 수 있을까라는 생각이 들었지만 처음부터 쉬운 것은 없으니 열심히 공부하자라는 생각이 들었다.
Author And Source
이 문제에 관하여(kidsgao3), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jihye0914/kidsgao3저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)