07.13 키즈가오 웹사이트 실습

키즈가오 웹사이트 실습✍️

실습 코드 깃허브 링크

키즈가오 CSS introWrap에 대한 설명

#intro .introWrap { 
       *position: relative;
	width: 760px;
	height: 516px; 
	left: 50%;
	margin-left: -380px; 
       *top: 100px; 
}

Position (relative) & 위치조정(top : 100px)

포지션을 어떤것을 써야하는 것에 대한 당위성 있어야함.
위치를 조정하는 3차원적인 특징을 써야하기 때문에 relative(2,3차원)
부모-relative,자식-absolute를 사용했다면 자식의 위치기준은 부모가 된다.

intro의 위치를 아래로 내리는 방법은 세가지가 있다. (후수정할 때)

1.margin-top은 마진병합현상이 일어남 (X)
2.padding-top은 아래에 미리 만들어 놓은 레이아웃이 틀어질 수 있음
(의도하지않은 공백이 추가 됨)(X)
3.레이아웃이 틀어지지 않는 top을 입력하면 된다. (O)
relative이기때문에 자기 자신이 주체가 되어서 이동한다 (top,left,right,bottom)
아래에 어떠한 요소가 배치해 있더라도 영향주지않고 이동(겹치는 상태)
레이아웃 틀어지지 않는다.

두 개의 요소가 모두 3차원일 경우 나중에 작성된 z축이 더 높다.

.leftCloud와 .rightCloud에 대한 설명

#intro .cloudWrap .leftCloud { 
        *position: absolute; 
	*width: 934px;
	*height: 816px;
	background-image: url(img/intro/cloud1.png);
	left: 0;
	z-index: 2;
}

absolute를 사용한 이유

float을 사용하면 좌우 배치는 가능하지만
이미지보다 레이아웃이 작아지면 이미지 배치가 틀어짐 > 3차원 배치로 해준다.

이미지의 크기는 5로 떨어지거나 짝수인 사이즈가 레이아웃잡기에 좋다.

키즈가오 모바일 버전

모바일버전 intro의 원본 백그라운드 이미지는 반쪽자리 이미지이다.
비어있는 배경의 repeat 디폴트값을 응용하여 배경을 꽉 채울 수 있다.

#intro {
        height: 1150px;
        /*화면크기보다 이미지가 작을때 repeat효과 이용하여 화면채우기*/
        background-image: url(img/mobile/intro/mobile_intro_bg.png);
        background-repeat: repeat; < 입력하지 않아도 기본값으로 설정되어있음
    }

css animation

키즈가오 사이트를 실습하면서 사용한 애니메이션은 rotate이다.
각도를 짧게 입력하여 좌우로 반복하여 움직이는 애니메이션, 0도부터 360도까지 설정하여 무한으로 돌아가는 애니메이션 두 가지를 해보았다.

#intro .introWrap .monkey { animation: spinMonkey 800ms linear infinite alternate; } 
애니메이션 이름과 시간 속도 무한반복 왕복등을 설정한다.

@keyframes spinMonkey {
	from { transform: rotate(20deg); } 
	to { transform: rotate(50deg); }
}

#farm3 .machineWrap .timer {
	animation: rotateTimer 10000ms linear infinite;
} 

@keyframes rotateTimer {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg);  }
    0도부터 360도까지 설정하면 무한대로 돌아가는 애니메이션을 구현할 수 있다.
}

학습 소감

강사님께서 position을 정할 때 그냥 정하는것이 아니라 당위성이 있어야 한다고 하셨다. 이유없이 그냥 입력하는 것이 아니라 이것이 왜 그런 이유를 갖는지 의미를 내가 직접 부여하여 코딩을 한다고 생각하니 코딩이 더욱 매력있게 느껴졌다. 오늘은 2차원과 3차원 속성을 모두 가진 relative에 대하여 자세히 설명을 듣고 웹사이트에 적용해보았다. 레이아웃을 어느 정도 입력하고 나서 나중에 수정을 할 때 종종 padding-top을 사용하곤했었다. padding을 사용하면 원하는 위치로 내려갈 수는 있지만 전체적인 레이아웃이 틀어지거나 원하지 않는 공백이 나타날 수 있어서 padding대신에 position에 relative값을 주고 top값을 입력하면 밑에 있는 레이아웃이 틀어지지않으면서 위치값을 지정할 수 있었다.
position 설명 참고 사이트

애니메이션이나 미디어쿼리 기본css 등 여러 가지를 파일로 나누어서 작성해보았는데, 이렇게 분류해서 작성하니 다시 수정할 때도 쉽게 찾을 수 있고 관리할 때도 매우 좋을것 같았다.
오늘 수업하면서 아쉬운 점은 전체적인 코딩을 할 때, 클래스명이나 구조를 내가 직접 짠 것이 아니라서 집중이 조금 되지않는 부분이었다. 그래도 강사님의 실무 노하우를 배우면서 논리적으로 코딩을 하는 연습에 도움이 많이 되는 것 같고 조금씩 성장해가는 느낌이 들어서 뿌듯했다.