21.07.13
길고양이한테 물려서 염증나고 붓고 난리나서 병원가서 항생제랑 파상풍 주사 맞고 털레털레 카페옴,.,.
아무것도 하기싫다,.,. 손가락 하나 붕대로 칭칭 감아도서 타자치기 핵불편,., 하,.,.
죽고싶다,.,. 고양이 새끼.,.,. 하.,,. 인생,.,.
이번주 왜캐 기냐,., 수업도 기네,.,(ㅈㄴ
여기는 압축파일 안넣어지나,.,.? 복붙하면 너무 길어질거같은데
<!DOCTYPE html>
<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, inital-scale=1.0">
<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">
</head>
<body>
<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>
<div id="farm1">
<div class="leftRice1"></div>
<div class="farmer"></div>
<div class="rightRice1"></div>
<div class="farmSpeechWrap">
<img src="img/farm/farm1/farmSpeech.png" align="우리쌀 점토">
<p class="farmSpeech">
식재료만 넣은 안전한<br>
우리쌀 점토 키즈가오는<br>
우리 쌀을 이용하여 만들어요.<br>
화학물질을 사용하지 않고,<br>
식재료를 사용해서 만든<br>
안전한 제품이랍니다.
</p>
</div>
</div>
<div id="farm2">
<div class="leftRice2"></div>
<div class="scarecrow"></div>
<div class="rightRice2"></div>
</div>
<div id="farm3">
<div class="farm3Window"></div>
<div class="machineWrap">
<div class="machine1"></div>
<div class="sawShadow"></div>
<div class="saw1"></div>
<div class="saw2"></div>
<div class="machineBird"></div>
<div class="timer"></div>
</div>
<img class="farm3Bubble" src="img/farm/farm3/farm3bubble.png" alt="기계를 통해서 쌀알이 딱딱한 껍질을 벗어 냅니다">
</div>
</body>
</html>
index : div태그로 웹페이지를 나눠주고 다양한 작업은 css에서 해주었음
실무팁 : 웹만들때 이미지는 배치작업시 일그러짐 방지를 위해서 짝수로 떨어지거나 5의 배수인게 좋음
다 비슷비슷한 내용에라 farm3부분만 가져와서 설명하겠음
style.css
화면에 보이는 이미지들의 배치작업임
position부분먼 신경써주면 계속 반복적이어서 초반에 확실히 알면 쉽다
/*Farm3*/
#farm3 {
position: relative;
width: 100%;
height: 850px;
background-image: url(../img/farm/farm3/farm3_bg.png);
}
#farm3 .farm3Window {
position: absolute;
width: 247px;
height: 169px;
background-image: url(../img/farm/farm3/window.png);
margin: 100px 0 0 100px;
}
#farm3 .machineWrap {
position: relative;
width: 600px;
height: 455px;
/*background-color: yellow;*/
left: 50%;
margin-left: -285px;
top: 150px;
}
#farm3 .machineWrap .machine1 {
position: absolute;
width: 586px;
height: 455px;
background-image: url(../img/farm/farm3/machine1.png);
z-index: 900;
}
#farm3 .machineWrap .sawShadow {
position: absolute;
width: 95px;
height: 95px;
background-image: url(../img/farm/farm3/sawshadow.png);
margin: 145px 0 0 145px;
}
#farm3 .machineWrap .saw1,
#farm3 .machineWrap .saw2 {
position: absolute;
width: 95px;
height: 95px;
background-image: url(../img/farm/farm3/saw.png);
}
#farm3 .machineWrap .saw1{
margin: 140px 0 0 140px;
}
#farm3 .machineWrap .saw2{
margin: 140px 0 0 350px;
}
#farm3 .machineWrap .timer{
position: absolute;
width: 103px;
height: 104px;
background-image: url(../img/farm/farm3/second.png);
margin: 125px 0 0 45px;
z-index: 999;
}
#farm3 .machineWrap .machineBird {
position: absolute;
width: 44px;
height: 49px;
background-image: url(../img/farm/farm3/machinebird.png);
margin: 220px 0 0 20px;
z-index: 999;
}
#farm3 .farm3Bubble {
position: absolute;
top: 350px;
right: 80px;
}animation.css
#farm3 .machineWrap .timer {
animation: rotateTimer 10000ms linear infinite;
}
@keyframes rotateTimer {
from{transform: rotate(0deg);}
to{ transform: rotate(360deg); }
}
#farm3 .machineWrap .saw1 {
animation: rotateLeftSaw 10000ms linear infinite;
}
@keyframes rotateLeftSaw {
from{transform: rotate(0deg);}
to{ transform: rotate(360deg); }
}
#farm3 .machineWrap .saw2 {
animation: rotateRightSaw 10000ms linear infinite;
}
@keyframes rotateRightSaw {
from{transform: rotate(360deg);}
to{ transform: rotate(0deg); }
}
animation은 변수 지정해서 keyfram사용하는거 까먹지 말기!
#farm3 {
height: 500px;
background-image: url(../img/mobile/farm/farm3/mobile_farm3_bg.png);
}
#farm3 .farm3Window {
width: 82px;
height: 56px;
background-image: url(../img/mobile/farm/farm3/mobile_window.png);
margin: 10px 0 0 10px;
}
#farm3 .machineWrap {
width: 200px;
height: 150px;
top: 120px;
margin-left: -96px;
}
#farm3 .machineWrap .machine1 {
width: 191px;
height: 149px;
background-image: url(../img/mobile/farm/farm3/mobile_machine1.png);
}
#farm3 .machineWrap .sawShadow,
#farm3 .machineWrap .timer,
#farm3 .machineWrap .machineBird {
display: none;
}
#farm3 .machineWrap .saw1,
#farm3 .machineWrap .saw2 {
width: 31px;
height: 31px;
background-image: url(../img/mobile/farm/farm3/mobile_saw.png);
}
#farm3 .machineWrap .saw1 {
margin: 50px 0 0 50px;
}
#farm3 .machineWrap .saw2 {
margin: 50px 0 0 115px
}
#farm3 .farm3Bubble {
position: absolute;
width: 152px;
left: 50%;
margin: 0 0 0 -70px;
}```mobile.css 모바일에서 보여지는 정도 (px가 작은 화면)
스타일과 애니메이션에서 상속받는 부분이 있으니 그 부분 유의하기
