20210713 CSS 키즈가오 실습
학습내용
/ 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;
}
/ Intro /
#intro {
width: 100%;
height: 1600px;
background-image: url(../img/intro/intro_bg.png);
/*padding-top: 100px;*/}
#intro .introWrap {
position: relative;
width: 760px;
height: 516px;
left: 50%;
margin-left: -380px;
/*margin-top: 100px;*/
top: 100px;}
#intro .introWrap .logo {
position: absolute;
width: 760px;
height: 516px;
background-image: url(../img/intro/logo.png);
z-index: 100;}
#intro .introWrap .lion {
position: absolute;
width: 161px;
height: 161px;
background-image: url(../img/intro/lion.png);
margin: 80px 0 0 30px;
z-index: 0; /*생략가능*/}
#intro .introWrap .rabbit {
position: absolute;
width: 105px;
height: 129px;
background-image: url(../img/intro/rabbit.png);
margin: 90px 0 0 580px;}
#intro .introWrap .bear {
position: absolute;
width: 112px;
height: 105px;
background-image: url(../img/intro/bear.png);
margin: 310px 0 0 560px;
z-index: 200;}
#intro .introWrap .monkey {
position: absolute;
width: 85px;
height: 93px;
background-image: url(../img/intro/monkey.png);
margin: 310px 0 0 50px;
z-index: 200;}
#intro .cloudWrap {
position: relative;
width: 100%;
height: 1050px;}
#intro .cloudWrap .leftCloud {
position: absolute;
width: 934px;
height: 816px;
background-image: url(../img/intro/cloud1.png);
left: 0;
z-index: 2;}
#intro .cloudWrap .rightCloud {
position: absolute;
width: 843px;
height: 858px;
background-image: url(../img/intro/cloud2.png);
right: 0; }
#intro .cloudWrap .dragonfly {
position: absolute;
width: 366px;
height: 228px;
background-image: url(../img/intro/dragonfly.png);
top: 800px;}
/ Farm1 /
#farm1 {
position: relative;
width: 100%;
height: 800px;
background-image: url(../img/farm/farm1/farm1_bg.png);}
#farm1 .leftRice1 {
position: absolute;
width: 390px;
height: 670px;
background-image: url(../img/farm/farm1/leftrice.png);
left: 0;}
#farm1 .rightRice1 {
position: absolute;
width: 335px;
height: 570px;
background-image: url(../img/farm/farm1/rightrice.png);
right: 0;
top: 100px;}
#farm1 .farmer {
position: absolute;
width: 747px;
height: 1078px;
background-image: url(../img/farm/farm1/farmer.png);
left: 50%;
margin-left: -310px;}
#farm1 .farmSpeechWrap {
position: relative;
top: 250px;
left: 150px;}
#farm1 .farmSpeechWrap .farmSpeech {
color: #895c2f;
font-size: 18px;
line-height: 27px;
}
/ Farm2 /
#farm2 {
position: relative;
width: 100%;
height: 850px;
background-image: url(../img/farm/farm2/farm2_bg.png);}
#farm2 .leftRice2 {
float: left;
width: 250px;
height: 850px;
background-image: url(../img/farm/farm2/leftrice2.png);}
#farm2 .rightRice2 {
float: right;
width: 236px;
height: 850px;
background-image: url(../img/farm/farm2/rightrice2.png);}
#farm2 .scarecrow {
position: absolute;
width: 103px;
height: 206px;
background-image: url(../img/farm/farm2/scarecrow.png);
margin: 200px 0 0 300px;}
/ Farm3 /
#farm3 {
position: relative;
width: 100%;
height: 850px;
background-image: url(../img/farm/farm3/farm3_bg.png);}
#farm3 .farm3Window {
position: absolute;
width: 247px;
height: 169px;
background-image: url(../img/farm/farm3/window.png);
margin: 100px 0 0 100px;}
#farm3 .machineWrap {
position: relative;
width: 600px;
height: 455px;
/* background-color: yellow; */
left: 50%;
margin-left: -285px;
top: 150px;}
#farm3 .machineWrap .machine1 {
position: absolute;
width: 586px;
height: 455px;
background-image: url(../img/farm/farm3/machine1.png);
z-index: 900;}
#farm3 .machineWrap .sawShadow {
position: absolute;
width: 95px;
height: 95px;
background-image: url(../img/farm/farm3/sawshadow.png);
margin: 145px 0 0 145px;}
#farm3 .machineWrap .saw1,
#farm3 .machineWrap .saw2 {
position: absolute;
width: 95px;
height: 95px;
background-image: url(../img/farm/farm3/saw.png);
}
#farm3 .machineWrap .saw1 {
margin: 140px 0 0 140px;
}
#farm3 .machineWrap .saw2 {
margin: 140px 0 0 350px;
}
#farm3 .machineWrap .timer {
position: absolute;
width: 103px;
height: 104px;
background-image: url(../img/farm/farm3/second.png);
margin: 125px 0 0 45px;
z-index: 999;}
#farm3 .machineWrap .machineBird {
position: absolute;
width: 44px;
height: 49px;
background-image: url(../img/farm/farm3/machinebird.png);
margin: 220px 0 0 20px;
z-index: 999;}
#farm3 .farm3Bubble {
position: absolute;
top: 350px;
right: 80px;}
어려웠던 점 및 학습소감
이때까지는 세분화 된 내용을 부분 부분 배웠다면 오늘은 그것들을 모두 모아서 비록 강사님의 인솔 하에 카피를 해 보긴 했지만 직접 홈페이지를 만들어보는 실습을 해보았습니다. 이전에 학습했던 부분이 나오자 반갑기도 했고, 마치 처음보는 듯한 내용이 등장하기도 했었습니다. 결과물이 바로 눈에 보이다 보니 평소보다 오늘 강의가 좀 더 길었음에도 불구하고 힘은 들었지만 다소 흥미가 느껴졌었던 수업이었습니다. 아직 javascript를 배우지 않은 탓에 적용해 보지 못한 부분들도 하루 빨리 배워서 비록 카피하는 것이라도 직접 한번 결과물을 빨리 도출해보고 싶다는 생각이 들었습니다.
개선해야할 점
아직 코드를 보고서 이것이 무슨 뜻을 의미하는가를 다 알고 써 내려가기 보단 강사님을 그저 따라서 해보고 결과를 도출해내는 정도인데 좀 더 태그의 의미라던지 작성된 코드를 보고 이해할 수 있는 능력을 길러야 할 것 같고, 처음 배우는 느낌이 들었던 부분은 더 보충해나가야 할 부분인 것 같습니다.
