7월 14일 수
학습한 내용
키즈가오 포레스트~나이트1까지
HTML
<div class="treeWrap">
<div class="rightTree"></div>
<div class="rabbit1"></div>
<div class="rabbit2"></div>
</div>
</div> <img class="forestBubble" src="img/forest/forest2/forestbubble.png" alt="기계를 통해서 쌀을 고운 가루로 만든답니다.">
<div class="forest2Tree"></div>
</div></div> <div class="scienceLeftWrap">
<div class="gly"></div>
<img src="img/science/leftTitle.png" alt="자초, 어성초, 감초">
<p>
자초 어성초 감초를 넣어서<br>
피부진정 및 함염 효과가 있답니다.
</p>
</div>
<div class="scienceCenterWrap">
<div class="purpleSteam"></div>
<div class="funnelBack"></div>
<div class="funnelFront"></div>
</div>
<div class="scienceRightWrap">
<div class="water"></div>
<img src="img/science/rightTitle.png" alt="글리세린, 올리브유">
<p>
빵의 표면을 촉촉하게 해주는<br>
글리세린과 오메가-9 지방산이<br>
풍부한 올리브유를 넣어서<br>
보습 효과도 뛰어나답니다.
</p>
</div>
</div>
</div> <div class="owl"></div>
<div class="starWrap">
<div class="star1"></div>
<div class="star2"></div>
<div class="star3"></div>
</div>
</div>Style.css
#forest1 {
width: 100%;
height: 1050px;
background-image: url(../img/forest/forest1/forest1_bg.png);
}
#forest1 .leftTree {
position: absolute;
width: 445px;
height: 1200px;
background-image: url(../img/forest/forest1/lefttree.png);
left: 0;}
#forest1 .treeWrap {
float: right;
position: relative;
width: 304px;
height: 572px;
top: 100px;}
#forest1 .treeWrap .rightTree {
position: absolute;
width: 304px;
height: 572px;
background-image: url(../img/forest/forest1/righttree.png);
z-index: 10;}
#forest1 .treeWrap .rabbit1 {
position: absolute;
width: 82px;
height: 103px;
background-image: url(../img/forest/forest1/rabbit1.png);
margin: 435px 0 0 107px;}
#forest1 .treeWrap .rabbit2 {
position: absolute;
width: 56px;
height: 75px;
background-image: url(../img/forest/forest1/rabbit2.png);
margin: 435px 0 0 200px;}
#forest2 {
width: 100%;
height: 750px;
background-image: url(../img/forest/forest2/forest2_bg.png);
}
#forest2 .frog {
position: absolute;
width: 153px;
height: 257px;
background-image: url(../img/forest/forest2/frog.png);
margin: 50px 0 0 100px;}
#forest2 .machineWrap2 {
position: relative;
width: 400px;
height: 400px;
left: 50%;
margin-left: -200px;
top: 180px;}
#forest2 .machineWrap2 .machineBottom {
position: absolute;
width: 374px;
height: 162px;
background-image: url(../img/forest/forest2/machinebottom.png);
margin-top: 220px;
z-index: 200;}
#forest2 .machineWrap2 .machineLeft {
position: absolute;
width: 123px;
height: 228px;
background-image: url(../img/forest/forest2/machineleft.png);
margin-top: 30px;
z-index: 200;}
#forest2 .machineWrap2 .machineRight {
position: absolute;
width: 123px;
height: 248px;
background-image: url(../img/forest/forest2/machineright.png);
margin: 10px 0 0 260px;
z-index: 200;}
#forest2 .forestBubble {
position: relative;
float: right;
top: -100px;
margin-right: 100px;}
#forest2 .forest2Tree {
float: left;
position: relative;
width: 304px;
height: 282px;
background-image: url(../img/forest/forest2/forest2tree.png);
top: 50px;}
#forest3 {
width: 100%;
height: 600px;
background-image: url(../img/forest/forest3/forest3_bg.png);
}
#forest3 .forest3Wrap {
float: right;
position: relative;
width: 354px;
height: 440px;
top: 100px;}
#forest3 .forest3Wrap .forest3Tree {
position: absolute;
width: 354px;
height: 440px;
background-image: url(../img/forest/forest3/forest3tree.png);}
#forest3 .forest3Wrap .smallBird {
position: absolute;
width: 40px;
height: 35px;
background-image: url(../img/forest/forest3/bird_sm.png);
top: 120px;
left: 125px;}
#forest3 .forest3Wrap .bigBird {
position: absolute;
width: 83px;
height: 80px;
background-image: url(../img/forest/forest3/bird_big.png);
margin: 280px 0 0 94px;}
#science {
position: relative;
width: 100%;
height: 800px;
background-image: url(../img/science/science_bg.png);}
#science .scienceWrap{
position: relative;
width: 1068px;
height: 655px;
margin: 0 auto;}
#science .scienceWrap .scienceLeftWrap {
float: left;
width: 288px;
height: 100%;
}
#science .scienceWrap .scienceLeftWrap .gly {
width: 230px;
height: 192px;
background-image: url(../img/science/gly.png);
margin: 0 0 130px 55px;}
#science .scienceWrap .scienceLeftWrap p,
#science .scienceWrap .scienceRightWrap p {
color: #8e7577;
font-size: 18px;
line-height: 26px;
padding-top: 10px;}
#science .scienceWrap .scienceCenterWrap {
position: relative;
float: left;
width: 488px;
height: 100%;
}
#science .scienceWrap .scienceCenterWrap .purpleSteam {
position: relative;
width: 241px;
height: 216px;
background-image: url(../img/science/grape.png);
left: 50%;
margin-left: -120px;}
#science .scienceWrap .scienceCenterWrap .funnelBack {
position: absolute;
width: 488px;
height: 438px;
background-image: url(../img/science/funnelback.png);}
#science .scienceWrap .scienceCenterWrap .funnelFront {
position: relative;
width: 485px;
height: 390px;
background-image: url(../img/science/funnelfront.png);
margin-top: 48px;}
#science .scienceWrap .scienceRightWrap {
float: left;
width: 292px;
height: 100%;
}
#science .scienceWrap .scienceRightWrap .water {
width: 204px;
height: 191px;
background-image: url(../img/science/water.png);
margin-bottom: 130px;}
#night1 {
width: 100%;
height: 700px;
background-image: url(../img/oneday/night1/night1_bg.png);
}
#night1 .owl {
position: absolute;
width: 334px;
height: 571px;
background-image: url(../img/oneday/night1/owl.png);
margin-top: 50px;}
#night1 .starWrap {
position: relative;
width: 750px;
height: 400px;
top: 150px;
margin-left: 600px;}
#night1 .starWrap .star1,
#night1 .starWrap .star2,
#night1 .starWrap .star3 {
position: absolute;
width: 53px;
height: 50px;
background-image: url(../img/oneday/night1/star1.png);}
#night1 .starWrap .star1 {
margin-top: 350px;
}
#night1 .starWrap .star2 {
margin-left: 650px;
}
#night1 .starWrap .star3 {
margin: 250px 0 0 500px;
}
Animation.css
#forest1 .treeWrap .rabbit1 {
animation: spinRabbitOne 1000ms linear infinite alternate;
}
@keyframes spinRabbitOne {
from { transform: rotate(0deg); }
to { transform: rotate(10deg); }
}
#forest1 .treeWrap .rabbit2 {
animation: spinRabbitTwo 1000ms linear infinite alternate;
}
@keyframes spinRabbitTwo {
from { transform: rotate(10deg); }
to { transform: rotate(0deg); }
}
#forest2 .machineWrap2 .machineLeft {
animation: moveLeft 1s linear infinite alternate;
}
@keyframes moveLeft {
from {left: 30px;}
to {left: 0}
}
#forest2 .machineWrap2 .machineRight {
animation: moveRight 1s linear infinite alternate;
}
@keyframes moveRight {
from {left: -30px;}
to {left: 0}
}
#forest3 .forest3Wrap .smallBird {
animation: spinSmallBrid 1000ms linear infinite alternate;
}
@keyframes spinSmallBrid {
from {
transform: rotate(0deg);
}
to {
transform: rotate(10deg);
}}
#forest3 .forest3Wrap .bigBird {
animation: spinBigBrid 1000ms linear infinite alternate;
}
@keyframes spinBigBrid {
from {
transform: rotate(-10deg);
}
to {
transform: rotate(10deg);
}}
#science .scienceWrap .gly {
animation: spinGly 1500ms linear infinite alternate;
}
@keyframes spinGly {
from { transform: rotate(0deg); }
to { transform: rotate(50deg); }
}
#science .scienceWrap .water {
animation: spinWater 1500ms linear infinite alternate;
}
@keyframes spinWater {
from { transform: rotate(0deg); }
to { transform: rotate(-50deg); }
}
#night1 .starWrap .star1,
#night1 .starWrap .star2,
#night1 .starWrap .star3 {
animation: pulseStar 1s linear infinite alternate;
}
@keyframes pulseStar {
from { transform: scale(1); }
to { transform: scale(0.8); }
}
mobile.css
@media (max-width: 767px) {
#forest1 {
position: relative;
height: 400px;
background-image: url(../img/mobile/forest/forest1/mobile_forest1_bg.png);
}
#forest1 .leftTree {
width: 79px;
height: 187px;
background-image: url(../img/mobile/forest/forest1/mobile_lefttree.png);
}
#forest1 .treeWrap {
width: 68px;
height: 129px;
top: 200px;
}
#forest1 .treeWrap .rabbit1,
#forest1 .treeWrap .rabbit2 {
display: none;
}
#forest1 .treeWrap .rightTree {
width: 68px;
height: 129px;
background-image: url(../img/mobile/forest/forest1/mobile_righttree.png);
}
#forest2 {
position: relative;
height: 400px;
background-image: url(../img/mobile/forest/forest2/mobile_forest2_bg.png);
}
#forest2 .frog {
width: 34px;
height: 57px;
background-image: url(../img/mobile/forest/forest2/mobile_frog.png);
margin: 0 0 0 20px;
}
#forest2 .machineWrap2 {
width: 200px;
height: 110px;
top: 70px;
margin-left: -97px;
}
#forest2 .machineWrap2 .machineBottom {
width: 141px;
height: 60px;
background-image: url(../img/mobile/forest/forest2/mobile_machinebottom.png);
left: 50%;
margin: 50px 0 0 -70.5px;
}
#forest2 .machineWrap2 .machineLeft {
width: 46px;
height: 85px;
background-image: url(../img/mobile/forest/forest2/mobile_machineleft.png);
margin: 0 0 0 20px;
}
#forest2 .machineWrap2 .machineRight {
width: 46px;
height: 93px;
background-image: url(../img/mobile/forest/forest2/mobile_machineright.png);
margin: -10px 0 0 130px;
}
#forest2 .forestBubble {
position: absolute;
width: 161px;
top: 290px;
left: 50%;
margin-left: -83px;
}
#forest2 .forest2Tree {
float: right;
width: 69px;
height: 76px;
background-image: url(../img/mobile/forest/forest2/mobile_forest2tree.png);
top: 130px;
margin-right: 20px;
}
#forest3 {
height: 630px;
background-image: url(../img/mobile/forest/forest3/mobile_forest3_bg.png);
}
#forest3 .forest3Wrap {
width: 99px;
height: 127px;
top: 300px;
}
#forest3 .forest3Wrap .forest3Tree {
width: 99px;
height: 127px;
background-image: url(../img/mobile/forest/forest3/mobile_forest3tree.png);
}
#forest3 .forest3Wrap .smallBird,
#forest3 .forest3Wrap .bigBird {
display: none;
}
#science {
height: 580px;
background-image: url(../img/mobile/science/mobile_science_bg.png);
}
#science .scienceWrap {
overflow: hidden;
width: 360px;
height: auto;
top: 180px;
}
#science .scienceWrap .scienceLeftWrap {
width: 100px;
}
#science .scienceWrap .scienceLeftWrap .gly {
width: 76px;
height: 63px;
background-image: url(../img/mobile/science/mobile_gly.png);
margin: 0 0 10px 0;
}
#science .scienceWrap .scienceLeftWrap img,
#science .scienceWrap .scienceRightWrap img {
height: 15px;
}
#science .scienceWrap .scienceLeftWrap p,
#science .scienceWrap .scienceRightWrap p {
display: none;
}
#science .scienceWrap .scienceCenterWrap {
width: 160px;
height: 222px;
}
#science .scienceWrap .scienceCenterWrap .purpleSteam {
width: 80px;
height: 71px;
background-image: url(../img/mobile/science/mobile_grape.png);
margin-left: -40px;
}
#science .scienceWrap .scienceCenterWrap .funnelBack {
width: 173px;
height: 151px;
background-image: url(../img/mobile/science/mobile_hopperback.png);
}
#science .scienceWrap .scienceCenterWrap .funnelFront {
width: 160px;
height: 122px;
background-image: url(../img/mobile/science/mobile_hopperfront.png);
left: 50%;
margin: 20px 0 0 -80px;
}
#science .scienceWrap .scienceRightWrap {
width: 100px;
}
#science .scienceWrap .scienceRightWrap .water {
width: 67px;
height: 63px;
background-image: url(../img/mobile/science/mobile_water.png);
margin-bottom: 10px;
margin-left: 32px;
}
#night1 {
position: relative;
height: 500px;
background-image: url(../img/mobile/oneday/night1/mobile_night1_bg.png);
}
#night1 .owl {
width: 88px;
height: 151px;
background-image: url(../img/mobile/oneday/night1/mobile_owl.png);
margin-top: 0;
}
#night1 .starWrap {
position: absolute;
width: 308px;
height: 157px;
background-image: url(../img/mobile/oneday/night1/mobile_star.png);
top: 300px;
margin-left: 50px;
}
#night1 .starWrap .star1,
#night1 .starWrap .star2,
#night1 .starWrap .star3 {
display: none;
}}
학습한 내용 중 어려웠던 점 또는 해결못한 것들
또 일그러진다... 그런데 이번에는 강사님과 함께한 실수였다.
그외에도 img 태그안에 class를 넣으셨어야했는데 src를 넣으셔서 정정을 하셨는데 따라하면서
응? 이상한데라며 강사님의 실수를 알아내었다는게 공부가 되기는 되고 있구나 싶어서 만족스러웠다.
학습 소감
오늘 강의에서는 강사님도 실습을 진행하시면서 오탈자나 실수가 몇번 있으셨다. 실수인지도 모르고 그대로 따라하는 부분도 있었고 실수라는 것을 알아차리기만 하거나 알아차리고 수정을 하기도 했다. 이런 모습을 통해서 학습이 조금은 되고는 있구나라는 것을 느끼게 되서 자신감이 살짝 생겼다. 하지만 이렇게 실습을 따라가는 것만으로도 사실 벅차다. 처음에 html 강의를 진행한다고 할 때 동영상 강의로 한다고해서 실망감이 조금 있었다. 하지만 초급자에게는 오히려 동영상 강의로 각자의 속도에 맞추는 것이 일단 맞는 것 같다. 그래도 프론트엔드 수업 전에 2주간 파이썬과 인공지능 기초를 학습하면서 영어타이핑이 조금 연습되면서 타이핑에는 크게 지체되는 시간이 많이 줄었다.
강의시간으로만 4시간이지만 그래도 키즈가오라는 사이트를 거의60~80% 완성을 했다. 아직 사실 그저 타이핑을 따라하는 수준이지만 처음에 2차원이니 3차원이니 이론만 듣다가 실제 사이트를 따라만들어보면서 눈에 익기 시작했다. 처음에 개발자모드로 html을 살펴보면 마치 해커들이나 볼 것 같은 화면 처럼 어렵게만 느껴졌는데 이제는 그 구조를 파악할 수있고 개발자 도구를 통해 오류를 찾아내기도 한다. 그리고 이번에는 완성본 코드도 공유를 해주셨는데 강의를 따라하면서 똑같이 한 것 같은데 나만 오류가 생기는 경우가 매일 있다. 그럴때는 최후의 수단으로 완성본 코드 한 덩어리씩 내가 입력한 코드와 교체를 해보면서 어느 부분에서 문제가 있는지 찾고 있다. 모든 문제는 오타였지만 코드 구성을 볼 수 있다는 것이 이제 왕초보에서 초보단계로는 올라가지 않았나 싶다.
하지만 아직 너무나도 부족하다. 수업 자체에는 성실하게 임하고 있지만 사실 수업 후에도 개인적은 공부가 필요한데 아직 많이 부족하다. 좋은 기회를 갖게 되었고 내가 어떻게 하기에 많은 것이 달렸다. 뻔한 이야기이지만 열심히 해보자는 다짐으로 오늘 일지를 마친다.
