7월 13일 (키즈가오)

학습내용

강사님이 첫 외주를 받은 키즈가오 웹사이트를 만드는 실습을 했다.
오늘 실습 코딩은 너무 길어서 github에 올리도록 하겠다.

가장 먼저 했던 작업은

<meta charset="utf-8">
	<meta name="description" content="우리쌀 점토로 만든 키즈가오 웹사이트 소개">
	<meta name="keywords" content="키즈가오, 점토, 장난감">
	<meta name="김로나" content="키즈가오" >

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>키즈가오</title>

	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="css/animation.css">
	<link rel="stylesheet" type="text/css" href="css/mobile.css">
    

html에 css파일을 연동시켜주고 css파일에

html, body {
	margin: 0;
	padding: 0;
}
/*현재 브라우저의 x축을 벗어나는 영역의 오브젝트는 전부 hidden, 하지 않으면 가로스크롤이 생김 , dragonfly 애니메이션 적용 시 */
body {
	overflow-x: hidden ;
}

h1,h2,h3,h4,h5,h6,p {
	margin: ;
	padding: 0;
}
/*태생적으로 버튼태그에는 테두리와 배경색(회색)이 있으므로 투명으로 변경해줌*/
button {
	border: none;
	background-color: transparent;
}

.clearfix {
	clear: both;
}

default값으로 지정을 해주었다.
그 다음으로는 header(logo), farm1, farm2, farm3 순으로 작업을 했다.

header작업을 다 끝냈는데 logo를 100px 내리고 싶을 때
3가지 방법이 있는데

• .introWrap > margin-top >부모까지 딸려내려가서 안됨(마진병합)
• #intro > padding-top > 모든 컨텐츠들이 틀어짐
• .introWrap > top > 자기 자신이 주체가 되어 움직이고 아래에 어떤 요소가 배치되어 있더라도 그 요소의 최초 위치는 변함이 없음.
  겹치게 되고 틀어짐현상 없음. 둘 다 3차원인 경우 나중에 작성된 요소의 z-index가 더 높다 (position이 relative로 되어있음)

position : relative; -> top, right, bottom, left 사용 가능, 부모가 3차원(relative)이면 자식이 absolute일 때 부모가 좌표기준점

position이 3차원이여야 z-index 사용 가능, 레이어가 있다

background-image의 크기를 공간에 딱 맞춰서 배치 (repeat를 하려는 속성이 있어서 no-repeat를 해주어야하는데 그런 번거로움 덜기 위해)

float를 적용할 때 부모보다 자식값이 더 크면 레이어가 틀어짐, 그럴 때는 position을 3차원으로 주고 top, right, bottom, left값을 주면됨

position을 3차원으로 했으면 애니메이션 적용 시 @keyframes에서 top, right, bottom, left값 적용 가능

@keyframes flyDraronfly {
	from {left: -366px;}
	to {left:100%;} (화면밖으로 사라지는 효과 주기 위해) 
}

❗실무팁❗
이미미 작업할 때 이미지의 크기는 5로 끝나거나 짝수로 떨어지는 크기로 제작을 해야 사이트 제작 시 레이아웃 배치에 수월하다.

부모가 3차원이면 레이어가 겹치지만 relative를 줬지만 나중에 작성된 3차원이라 가장 위에 배치가 됨

@keyframes rotateLeftSaw {
	from {transform: rotate(0deg);	}
	to { transform: rotate(360deg); }
} -> 시계 방향
@keyframes rotateRightSaw {
	from {transform: rotate(360deg);	}
	to { transform: rotate(0deg); }
} -> 시계 반대방향

mobile버전으로도 만들었다.
@media (max-width: 767px)
-> 766이하 사이즈에서는 밑의 코드로 실행시켜라 라는 뜻

코딩
html
animation.css
css
mobile

어려웠던 점

내용이 많아서 그렇지 어려웠던 점은 없었다.
평소에는 개발일지에 코드까지 다 기록해놓지만
오늘은 양이 너무 방대해서 어떻게 해야할지 모르겠다.
복습하는데도 상당한 시간이 걸릴듯..
나는 오히려 설계도면을 그리는게 가장 어려운듯하다.
생각해보면 엄청 단순한것 같은데 또 어떻게 보면 헷갈린다.

해결방법

복습밖에 없지 뭐..
설계도면 연습을 더 해야겠다. 설계도면이 제대로 되야 css를 적용을 하고 레이아웃을 적용을 하지ㅠㅠ

학습소감

position을 많이 사용했지만 내가 알고있는 선에서 진행이 되었기에 무리없이 실습을 마쳤다. 약간 뿌듯해서 신나게 수업 들었는데 너무 길어서 또 늘어져버렸다. 복습하려면 하루를 통째로 날려야할듯하다.