강의
1. Kidgao 홈페이지 따라하기
1. 기본(Default)
-
html
<head> <meta charset="utf-8"> <meta name="description" content="우리쌀 점토로 만든 키즈가오 웹사이트 소개"> <meta name="keywords" content="키즈가오, 점토, 장난감"> <meta name="author" 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"> -
CSS
html, body{ margin: 0; padding: 0;} body{ overflow-x: hidden;} h1,h2,h3,h4,h5,h6,p{ margin: 0; padding: 0;} button { border: none; background-color: transparent;} .clearfix { clear: both;}float속성때문에clear를 한개 만들어준다.background-color: transparent는 투명oveflow-x,hidden은 이미지가 x축 넘어갈때 스크롤생기는거 방지
2. 인트로
- html
<header id="intro"> <div class="introWrap"> <div class="logo"></div> <div class="lion"></div> <div class="rabbit"></div> <div class="bear"></div> <div class="monkey"></div> </div> <div class="cloudWrap"> <div class="leftCloud"></div> <div class="rightCloud"></div> <div class="dragonfly"></div> </div> </header> - CSS
#intro { width: 100%; height: 1600px; background-image: url(../img/intro/intro_bg.png); /*padding-top: 100px;*/}#intro .introWrap { position: relative; width: 760px; height: 516px; background-color: yellow; left: 50%; margin-left: -380px; /*margin-top: 100px;*/ top: 100px;}relative인 이유 중앙정렬을 하기위해서
left를 사용할려면 3차원이여야하는데,relative는 둘다있음
- 동물 CSS
#intro .introWrap .(동물) { position: absolute; width: #px; height: #px; background-image: url(../img/intro/이름.png); margin: 80px 0 0 30px; /*top: 80px;*/ /*left: 30px;*/}- 각각 동물에 맞춰서 작성
z-index로 우선순위도 생성할것background-image이미지를 집어넣을땐 이미지 크기값에 맞게width랑height를 설정하는게 좋음.repeat때문에
- 작성하는 코드량이 많으니 Git으로 대체
Git
- 구름 부분
float는 값을 초과하면 이상하게 레이아웃부셔지니까 안씀- 대신
position: absolute로left: 0;,right: 0;을 각각 줘서 정렬함 - 잠자리도
absolute로 하면 부모값에다가relative를 넣어 놓는게 조금더 안전 그러면 이제 그 부모위치 기준에서top: #%로 내려줌
- 실무팁
- 이미지 크기, 짝수 or 5로 떨어지는게 좋음, 애매하면 정확하게 배치가 안될수있음.
- Aninmation.css
- 동물 까딱거리는건
#intro .introWrap .동물 { animation: spin동물 시간ms linear infinite alternate;} @keyframes spin동물 { from { transform: rotate(각deg); } to { transform: rotate(각deg); }} - 을 기본틀로 함
- 동물 까딱거리는건
- 그다음 잠자리는
from { left: -366px; } to { left: 100%; }- 여기서
left이런값은 앞에 썼던position땜에 사용가능 - 이거땜에 기본값에서
overflow-x를 씀
- 여기서
- 모바일
- 원래있던 그림을 빼고 다른걸 대체해서 넣어야할때
#intro .introWrap .lion, #intro .introWrap .rabbit, #intro .introWrap .bear, #intro .introWrap .monkey, #intro .cloudWrap .dragonfly { display: none; } display:none;으로 원래 pc에있던걸 날릴수있다.
- 원래있던 그림을 빼고 다른걸 대체해서 넣어야할때
3. Farm 부분
- 위와 동일하게, 순서대로 사진과 글 이미지를 넣고
포지션잡고 위치잡고 애니메이션넣고 모바일용을 따로 작성해준다.
2. 어려웠던부분
- 이때까지 해온거를 활용해서 한다는 점,,이 아직까지 바로바로 떠오르고 생각나진않는다
3. 해결
- 복습하자
4. 소감
- 정말 깔삼하게 나오는게 신기하기도하고,,
- 먼가 조금 발전한 기분
