1.학습한 내용

앞서 2주간 학습하였던 HTML과 css의 기본내용으로 kidsgao라고 하는 강사님이 3달 학습후에 처음으로 외주를 받아서 만든 상업 홈페이지에 대한 실습을 하였다.
<url : http://sisikiller.dothome.co.kr/>

크게 제작된 부분들은 다음과 같다.

1. Intro 부분 (1시, 5시, 8시, 11시 방향에 동물들( 토끼, 곰, 원숭이, 사자) 4마리가 머리를 움직인다.

2. 구름 아래 부분 (좌우 구름이 걷히는 것은 java script의 활용이 필요하여 pass) 잠자리가 좌에서 우쪽으로 이동

3. 가운데 농부와 좌측 글씨 text 그리고 좌우 벼 그림의 배치 (fram1)

4. 허수아비와 좌우측 벼 그림 (farm2)

5. 탈곡기의 톱니 부분들의 회전 및 좌측 위편에 창문과 오른쪽 부분의 text 문구 (farm3)

• 6.위 5가지의 내용들을 mobile page로 변환하였을때의 속성들

크게 5가지에 대한 실습을 진행하였다.

(1) Intro 내용

css code ```
#intro .introWrap {
position: relative;

width: 760px;
height: 516px;
/*background-color: yellow;*/

left: 50%;
margin-left: -380px; 가운데로 정렬하는 값

/*margin-top: 100px;*/
top: 100px;

}

#intro .introWrap .logo {
position: absolute;

width: 760px;
height: 516px;
background-image: url(../image/intro/logo.png);
z-index: 100; '일종의 기준점이다.'

}

#intro .introWrap .lion {
position: absolute;

width: 161px;
height: 161px;
background-image: url(../image/intro/lion.png) ;

margin: 80px 0 0 30px;

}

#intro .introWrap .rabbit {
position: absolute;

width: 105px;
height: 129px;
background-image: url(../image/intro/rabbit.png);

margin: 90px 0 0 580px;

}

#intro .introWrap .bear {
position: absolute;

width: 112px;
height: 105px;
background-image: url(../image/intro/bear.png);

margin: 310px 0 0 560px;

z-index: 200;

}

#intro .introWrap .monkey {
position: absolute;

width: 85px;
height: 93px;
background-image: url(../image/intro/monkey.png);

margin:  310px 0 0 50px;

z-index: 200;


#intro .introWrap .lion,
#intro .introWrap .rabbit,
#intro .introWrap .bear,
#intro .introWrap .monkey,
#intro .cloudWrap .dragonfly {
	display: none; 모바일로 변환되었을때 사라지게 하는 속성값!
}

}

(2) 구름과 잠자리 이동
css code

#intro .cloudWrap {
position: relative;

width: 100%;
height: 1050px;
/*background-color: pink;*/

}

#intro .cloudWrap .leftCloud {
position: absolute;

width: 934px;
height: 816px;
background-image: url(../image/intro/cloud1.png);

left: 0;

z-index: 2;

}

#intro .cloudWrap .rightCloud {
position: absolute;

width: 843px;
height: 858px;
background-image: url(../image/intro/cloud2.png);

right: 0;

}

#intro .cloudWrap .dragonfly {
position: absolute;

width: 366px;
height: 228px;
background-image: url(../image/intro/dragonfly.png);
/*background-color: hotpink;*/

top: 800px;

}

주의할점 : body {
/overflow-x: hidden;/ 안하면 잠자리가 이동시에 가로 스크롤이 나타남

}
(3) 농부 파트

<p class="farmSpeech">
				식재료만 넣은 안전한<br>
				우리쌀 점토 키즈가오<br>
				우리 쌀을 사용하여 만들어요.<br>
				화학물질을 사용하지 않고,<br>
				식재료를 사용해서 만든<br>
				안전한 제품이랍니다.
				</p>

여기에서
은 enter와 같은 역할을 하는 줄바꿈 태그이다.
(4) 허수아비와 벼그림 (정적인 화면)
#farm2 .leftRice2 {

float: left;
width: 250px;
height: 850px;
background-image: url(../image/farm/farm2/leftrice2.png);

}

#farm2 .rightRice2 {
float: right;
width: 236px;
height: 850px;
background-image: url(../image/farm/farm2/rightrice2.png);
}

(5) 기계가 돌아가는 부분 (farm3)
`#farm3 .machineWrap .machine1 {
position: absolute;
width: 586px;
height: 455px;
background-image: url(../image/farm/farm3/machine1.png);

z-index: 900;` 기계는 새와 타이머 부분을 제외하고 가장 나와있어야해서 900으로 지정함. 새와 타이머는 999로 설정

모바일 버전으로 바꿀때 큰 톱니바퀴들은 사라져야 하므로 display; none;이라는 값을 넣어준다.

2. 실습

깃허브 소스코드:
HTML
https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/9

style.css (위치& 병합)
https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/10

animation.css (애니메이션)
https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/11

mobile.css (미디어쿼리)
https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/12

3. 어려웠던 내용 & 해결방법

실습이라서 그런지 코드 내용도 길고 해서 타이핑을 칠때 오탈자가 생기는데, 이것 때문에 계속 오류가 났다. 개발자 도구로 오류를 찾을수는 있는데, 아직까지 개발자 도구를 보는것이 불편한데, 빨리 적응을 하여야 할것 같고, sublime text에서도 crtl + F가 먹히는것을 찾았는데, 이 방법으로 해결을 하여야 할 것 같다.
추가적으로 3차원 position 속성에 대해서 완벽한 이해를 하지 못하였는데, 실습 페이지상에서 엄청나게 적용이 되는것을 보니 예전에 했던 것을 복습하는 것이 해결할수 있는 방법인 것 같다.

4.소감

특히 farm3의 기계 톱니가 돌아가는 부분이 의외로 3차원 position과 rotate로 설정할수 있다는 것이 신기하였다.

강의가 길고 예전에 배웠던 부분이 기억이 안나고 새롭게 배우는것에 대해서 A to Z 전부 정리가 안되는 상황인데, 좀더 빨리 시작하고 늦게 끝내는 방식과 주말을 반납해서라도 따라 가야 할 것 같다.