210714_[13]_대구 AI스쿨_일반과정_웹 프로그래밍_실습_1_kidsgao

홍연수·2021년 7월 14일

CSS html media queries 기초과정 대구AI스쿨 웹프로그래밍 홈페이지 실습

1.학습한 내용

어제 학습했던 내용에서 추가적으로 학습을 진행하였다.
제작 과정은 동일하게 페이지별로 style.css
학습진행 순서는 어제와 동일하다.

1. HTML 작성

2. style.css (위치& 병합)

3. animation.css (애니메이션)

4. mobile.css (미디어쿼리)

각각 4가지의 process를 5가지의 구간으로 나누어서 진행하였다.

(1) forest1 : 토끼들이 나무 뒤쪽으로 배치

원 size
축소 size

(2) forest2 : 기계

원 size
축소 size

(3) forest3 : 오른쪽 새 2마리 (움직임)

원 size
축소 size

(4) Science : 2병 (움직임)

완성본에서는 쌀이 항아리를 통과하는 애니메이션이 들어가서 3차원 postition의 특수한 배열이 들어간다.
원 size
축소 size

(5) Night1 : 부엉이 그림과 별3개 size up&down (scale을 이용한 animation)

원 size
축소 size
축소 size에서 별의 움직임은 X

<학습한 내용>

forest2

#forest2 .machineWrap2 {
	position: relative;

	width: 400px;
	height: 400px;
	/*background-color: yellow;*/

	left: 50%;
	margin-left: -200px;
	top: 180px;
}


#forest2 .machineWrap2 .machineBottom {
	position: absolute;

	width: 374px;
	height: 162px;
	background-image: url(../image/forest/forest2/machinebottom.png);

	margin-top: 220px;

	z-index: 200;
} 

/* z-index 같은조건이면 나중에 기입한것이 위쪽에 배치가 된다. */

forest3

position에서 top과 left를 사용하는 순간 좌표의 기준은 브라우저 왼쪽 상단으로 바뀐다.
그런데 글을 감싸고 있는 부모가 3차원적인 특징을 가지면 부모 기준으로 좌표 기준이 바귄다.

science

funnelback

funnelfront

따로 funnelback과 funnelfront 작업을 진행한 이유?
향후 쌀알이 통과하는것을 표현하기위해 다로 만들어 놓음

#science .scienceWrap .scienceCenterWrap .funnelBack {
	position: absolute;

	width: 488px;
	height: 438px;
	background-image: url(../image/science/funnelback.png);
}

#science .scienceWrap .scienceCenterWrap .funnelFront {
	position: relative;

	width: 485px;
	height: 390px;
	background-image: url(../image/science/funnelfront.png);

	margin-top: 48px;
}

funnelback은 absolute를 지정하였는데 3차원의 특징을 나타내고,
funnelfront는 relative를 지정하여 2,3차원의 특징을 다 가지게 되는데, 굳이 z-index를 사용하지도 않아도 이미지가 겹쳐지며, 형제관계에서는 다음 순서에 나온것이 z축이 높아져서 funnel front가 우리눈을 기준으로 앞쪽에 위치하게 된다.

night1

@keyframes pulseStar {
	from {  transform: scale(1); }
	to { transform: scale(0.8); }
}

마지막 학습인 별을 나타내는 부분에서는 animation 자체가 회전한는 것이 아니라 별이 커졌다 작아졌다를 표현하는데, transform에서 scale을 적용하면, 위의 code와 같이 원본 배율(1)에서 80%의 size로 줄어드는(0.8)로 만들어 밤하늘에 반짝이는 별을 표현 할 수 있다.