학습내용
강사님이 첫 외주를 받은 키즈가오 웹사이트를 만드는 실습을 했다.
오늘 실습 코딩은 너무 길어서 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이하 사이즈에서는 밑의 코드로 실행시켜라 라는 뜻
어려웠던 점
내용이 많아서 그렇지 어려웠던 점은 없었다.
평소에는 개발일지에 코드까지 다 기록해놓지만
오늘은 양이 너무 방대해서 어떻게 해야할지 모르겠다.
복습하는데도 상당한 시간이 걸릴듯..
나는 오히려 설계도면을 그리는게 가장 어려운듯하다.
생각해보면 엄청 단순한것 같은데 또 어떻게 보면 헷갈린다.
해결방법
복습밖에 없지 뭐..
설계도면 연습을 더 해야겠다. 설계도면이 제대로 되야 css를 적용을 하고 레이아웃을 적용을 하지ㅠㅠ
학습소감
position을 많이 사용했지만 내가 알고있는 선에서 진행이 되었기에 무리없이 실습을 마쳤다. 약간 뿌듯해서 신나게 수업 들었는데 너무 길어서 또 늘어져버렸다. 복습하려면 하루를 통째로 날려야할듯하다.
