2021.07.15 kidsgao-3
Day14,
화,수 2일에 걸쳐 웹사이트 'kidsgao'를 따라 만들어봤다. 오늘도 마지막으로 kidsgao 웹사이트 만들기를 해봤다.
오늘 무엇을 배웠지?
Kidsgao 사이트 따라 만들어보기3
Kidsgao : http://sisikiller.dothome.co.kr/
Night 2 페이지
html
- new file-save(index0715.html), save(style0715.css, animation0715.css, mobile0715.css) (css파일은 편의상 css 폴더를 만들어 그안에 저장)
- 기본 설정 + html, css 파일을 연동, 미디어쿼리를 사용할 수 있도록
<meta name="viewport" content="width=device-width, initial-scale=1.0">
태그 입력
<link>
<!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, initial-scale=1.0">
<title>키즈가오</title>
<link rel="stylesheet" type="text/css" href="css/style0715.css">
<link rel="stylesheet" type="text/css" href="css/animation0715.css">
<link rel="stylesheet" type="text/css" href="css/mobile0715.css">
</head>
<body>
</body>
</html>
<div>
태그로 night2 페이지 영역을 설정하고 id를 입력한다.<div>
태그로 들어갈 이미지의 영역을 설정하고 class를 설정한다.
<div id="night2">
<div class="moon"></div>
<img class="night2Bubble" src="../img/oneday/night2/night2bubble.png" alt="하루동안 숙성을 시키게 됩니다.">
<div class="rightMoonTree"></div>
</div>
CSS-Style
- Default 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; }
으로 웹브라우저의 경계에 주어진 기본값을 없애고, 각 영역의 경계에 주어진 기본값을 없앤다. 또, button 태그, 자식관계의 태그들의 기본값을 모두 없앤다.
2. night2 페이지 영역<div>
태그인 #night2의 너비와 높이를 설정하고 이미지를 연결한다.
#night2 { position: relative; width: 100%; height: 800px;
background-image: url(../../img/oneday/night2/night2_bg.png); }
<div>
태그 .moon의 이미지를 연결하고 너비 높이를 설정한다.
#night2 .moon { width: 135px; height: 135px;
background-image: url(../../img/oneday/night2/moon.png); }
- .night2Bubble 이미지는 position: absolute로 설정하고 너비, 높이를 설정한다. margin으로 위치를 설정한다.
#night2 .night2Bubble { position: absolute; margin: 300px 0 0 80px; }
- .rightMoonTree 이미지를 연결하고 너비, 높이 등을 설정하고 position은 absolute로, right, bottom값으로 위치를 설정해 고정한다.
#night2 .rightMoonTree { position: absolute; width: 243px;
height: 588px; right: 0; bottom: 0;
background-image: url(../../img/oneday/night2/moontree.png); }
CSS-Animation
- Night2 페이지에서 움직이는 이미지(달)에 애니메이션을 적용한다. 모든 애니메이션은 일정한 속도로 계속해서 반복적으로 효과가 적용되도록 설정한다.
#night2 .moon { animation: moveMoon 10s linear infinite; }
@keyframes moveMoon{
from {margin-left: -135px}
to {margin-left: 110%}
}
CSS-Mobile
- 미디어쿼리를 적용해 모바일 사이즈(최대 767px-> 768px부터는 pc버전 화면)의 화면에서는 다르게 적용되도록 설정한다.
@media (max-width: 767px) {
#night2 { height: 620px;
background-image: url(../../img/mobile/oneday/night2/mobile_night2_bg.png); }
#night2 .moon { width: 40px; height: 40px;
background-image: url(../../img/mobile/oneday/night2/mobile_moon.png); }
#night2 .night2Bubble { width: 127px; left: 50%; margin: 300px 0 0 -67px; }
#night2 .rightMoonTree { width: 70px; height: 173px;
background-image: url(../../img/mobile/oneday/night2/mobile_moontree.png);
top: 70px; bottom: initial; }
- #night2의 높이를 재설정하고 이미지를 연결한다.
- #night2에 속한
<div>
태그들의 높이와 너비를 재설정하고 이미지를 연결한다. 또, margin 값이나 top, bottom 값을 줘 위치를 설정한다.(bottom: initial; 은 bottom: 0;과 같다) - .night2Bubble 은 left:50%로 중앙에 위치하도록 한다.
Kitchen 페이지
(morning페이지는 night2와 비슷해서 생략)
html
(night2, morning html에 이어서)
1. <div>
태그로 kitchen 페이지 영역을 설정하고 id를 설정한다.
2. 삽입할 이미지 각각의 영역을 <div>
태그로 설정하고 class를 설정한다.
3. <img>
태그로 이미지를 연결하고 alt=""로 설명을 입력한다.
<div id="kitchen">
<div class="leftPan"></div>
<div class="rightPot"></div>
<div class="steamWrap">
<div class="steam"></div>
<div class="bubble1"></div>
</div>
<img src="../img/kitchen/kitchenbubble.png" class="kitchenBubble" alt="숙성을 시킨 반죽을 잘 익혀주면">
</div>
CSS-Style
(forest1,2,3의 css에 이어서)
1. <div>
태그인 #kitchen의 너비와 높이를 설정하고 이미지를 연결한다. 이때 position을 relative로 설정해 자식태그들과 영향을 받을수 있도록 한다.
#kitchen { position: relative; width: 100%; height: 800px;
background-image: url(../../img/kitchen/kitchen_bg.png); }
<div>
태그 .leftPan, .rightPot의 position을 absolute로 설정하고 너비와 높이를 설정한다. 위치를 left:0;, right:0;으로 설정해서 (float:left, float:right와 동일한 결과를 만듦->실제로 수업에서는 float로 위치를 설정함) 순서대로 좌->우 정렬되도록 설정한다.
#kitchen .leftPan { position: absolute; left: 0;
width: 253px; height: 384px;
background-image: url(../../img/kitchen/pan.png); }
#kitchen .rightPot { position: absolute; right: 0;
width: 243px; height: 132px;
background-image: url(../../img/kitchen/pot.png); }
- .steamWrap은 속한 태그와 높이의 영향을 받도록 position을 relative로 설정한다. left, margin-left로 중앙배열한다. .steamWrap에 속한 각 태그들은 position:absolute로 위치를 고정하고 높이와 너비를 설정해주고 이미지를 연결한다. 앞, 뒤 로 배열을 해야하는 경우 z-index로 설정한다.
#kitchen .steamWrap { position: relative; width: 483px; height: 457px;
left: 50%; margin-left: -240px; top: 300px; }
#kitchen .steamWrap .steam { position: absolute; width: 479px;
height: 457px; z-index: 100;
background-image: url(../../img/kitchen/steam.png); }
#kitchen .steamWrap .bubble1 { position: absolute; width: 55px;
height: 56px; margin-top: 230px;
background-image: url(../../img/kitchen/bubble.png); }
- .kitchenBubble에 대해 설정한 위치를 absolute로 고정한다.
#kitchen .kitchenBubble { position: absolute; top: 400; right: 0; }
CSS-Animation
- #science 페이지에서 움직이는 이미지(스팀기에서 올라오는 bubble1)에 애니메이션을 적용한다. 모든 애니메이션은 일정한 속도로 계속해서 반복적으로 효과가 적용되도록 설정한다. ->포물선으로 움직이는 효과는 'stylie(https://jeremyckahn.github.io/stylie/)'에서 만들어서 붙여넣음.
#kitchen .steamWrap .bubble1 {
animation-name: Bubble;
animation-duration: 1000ms;
animation-delay: 0ms;
animation-fill-mode: forwards;
animation-timing-function: linear;
animation-iteration-count: infinite;
transform-origin: 0 0;
}
@keyframes Bubble {
0% {transform:translate(0px, 0px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
100% {transform:translate(-107px, -185px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
}
CSS-Mobile
(night2, morning의 css에 이어서)
#kitchen { height: 400px; background-image: url(../../img/mobile/kitchen/mobile_kitchen_bg.png); }
#kitchen .leftPan { width: 52px; height: 78px;
background-image: url(../../img/mobile/kitchen/mobile_pan.png); }
#kitchen .rightPot { width: 73px; height: 38px;
background-image: url(../../img/mobile/kitchen/mobile_pot.png); }
#kitchen .steamWrap { width: 300px; height: 300px; margin-left: -150px;
top: 0; }
#kitchen .steamWrap .steam { width: 222px; height: 184px;
background-image: url(../../img/mobile/kitchen/mobile_steam.png);
left: 50%; top: 100px; margin: 0 0 0 -140px; }
#kitchen .steamWrap .bubble1 { display: none; }
#kitchen .kitchenBubble { width: 143px; left: 50%; margin: -320px 0 0 -70px; }
<div>
태그인 #kitchen의 높이를 재설정하고 이미지를 연결한다.- .leftPan, .rightPan의 너비와 높이를 설정하고 이미지를 연결한다.
- .steamWrap의 너비와 높이를 재설정하고 margin, top으로 위치를 재설정한다.
- .steam의 너비와 높이 등을 설정한다. left와 margin 으로 태그들의 위치를 설정하고 이미지를 연결한다. pc에서는 애니메이션 효과가 있었던 .bubble1은 보이지 않으므로 display로 없앤다.
- .KitchenBubble의 너비,높이와 위치 등 을 설정한다.
Color2 페이지
(color1은 중복되는 부분이 많고 간단해서 생략)
html
(kitchen, color1의 html에 이어서)
1. <div>
태그로 color2 페이지 영역을 설정하고 id를 설정한다.
2. 삽입할 이미지 각각의 영역을 <div>
태그로 설정하고 class를 설정한다. <p>
태그로 글을 입력하고 class를 설정한다.
<div id="color2">
<div class="horse"></div>
<div class="color2Wrap">
<img class="color2Bubble" src="../img/color/color2/color2bubble.png" alt="색상을 선택해 보세요">
<div class="btn-wrap">
<button type="button" class="red"></button>
<button type="button" class="yellow"></button>
<button type="button" class="blue"></button>
</div>
<p class="color2Comment">
아이가 원하는 색상을 직접 만들어 색감을 스스로 발달시킵니다.<br>
색이 잘 섞이므로 누구나 쉽게 다양한 색을 만들 수 있습니다.
</p>
</div>
</div>
CSS-Style
(kitchen, color1의 css에 이어서)
1. <div>
태그인 #color2의 너비와 높이를 설정하고 이미지를 연결한다.
#color2 { position: relative; width: 100%; height: 800px;
background-image: url(../../img/color/color2/color2_bg.png); }
<div>
태그 .horse의 position을 absolute로 설정하고 margin, right:0;으로 위치(float:right와 같은 결과를 나타냄)를 고정한다. 이미지를 연결하고 너비와 높이를 설정한다. .color2Wrap은 자식태그가 여러개 있는 영역으로 position을 relative로 설정하고 너비를 설정하고 top, margin-left값으로 위치를 설정한다.
#color2 .horse { position: absolute; right: 0; width: 188px;
height: 241px; margin: 100px 100px 0 0;
background-image: url(../../img/color/color2/horse.png); }
#color2 .color2Wrap { position: relative; width: 500px;
top: 430px; margin-left: 50px; }
- .color2Wrap의 자식태그들인 .red, .blue, .red의 사이즈를 설정하고 이미지를 각각 연결한다.
#color2 .color2Wrap .btn-wrap .red, #color2 .color2Wrap .btn-wrap .yellow,
#color2 .color2Wrap .btn-wrap .blue { width: 59px; height: 82px; }
#color2 .color2Wrap .btn-wrap .red {
background-image: url(../../img/color/color2/btn/btn_red.png); }
#color2 .color2Wrap .btn-wrap .yellow {
background-image: url(../../img/color/color2/btn/btn_yellow.png); }
#color2 .color2Wrap .btn-wrap .blue {
background-image: url(../../img/color/color2/btn/btn_blue.png); }
- .color2Comment 의 글자색을 설정한다.
#color2 .color2Wrap .color2Comment { color: #8e7757; }
CSS-Mobile
(kitchen, color1의 css에 이어서)
#color2 { height: 400px; background-image: url(../../img/mobile/color/color2/mobile_color2_bg.png); }
#color2 .horse { display: none; }
#color2 .color2Wrap { width: 320px; height: 200px; top: 0; left: 50%;
margin-left: -160px; text-align: center; }
#color2 .color2Wrap .color2Bubble { width: 128px; }
#color2 .color2Wrap .btn-wrap { width: 300px; height: 60px; margin-bottom: 0; }
#color2 .color2Wrap .btn-wrap .red, #color2 .color2Wrap .btn-wrap .yellow,
#color2 .color2Wrap .btn-wrap .blue { width: 40px; height: 56px; }
#color2 .color2Wrap .btn-wrap .red { background-image: url(../../img/mobile/color/color2/btn/mobile_btn_red.png); }
#color2 .color2Wrap .btn-wrap .yellow { background-image: url(../../img/mobile/color/color2/btn/mobile_btn_yellow.png); margin: 0 20px 0 20px;}
#color2 .color2Wrap .btn-wrap .blue { background-image: url(../../img/mobile/color/color2/btn/mobile_btn_blue.png);}
#color2 .color2Wrap .color2Comment { color: #8e7577; line-height: 15px;
font-size: 10px; }
<div>
태그인 #color2의 높이를 재설정하고 이미지를 연결한다.- .horse는 이미 #color2에 속해있는 이미지로 재설정했기 때문에 모바일버전에서는 나타나지 않도록 display:none;으로 설정한다.
- .color2Wrap의 너비와 높이를 재설정하고 left:50%로 중앙에 배열한다. 또 안의 태그들이 중앙배열 되도록 text-align: center;을 적용한다. 또, .color2Wrap 안 태그들의 너비와 높이를 재설정한다.
- .btn-wrap에 속한
<div>
태그들(.red, .yellow, .blue)의 높이와 너비를 재설정하고 이미지를 연결한다. - .color2Comment의 글자색, 줄간격, 글자크기 등을 재설정한다.
무엇이 어려웠지?
오른쪽에 있는 그림이 왼쪽의 그림과 동일한 일직선 상에 있는 것이 아니라 자꾸 밑으로 내려갔다. display: inline-Block; 도 해보고 .leftpan을 position: absolute; left:0;, .rightpot을 position: absolute; right:0;으로도 바꿔보고 개발자도구에 이것저것 빼보고 다시 넣어봐도 여전히 .leftpan 아래줄에 .rightpot이 위치해 있었다.
어떻게 해결했지?
▼
이렇게 순서를 바꾸니깐 원하는 대로 되더라...
<div>
태그는 block 속성이 있기 때문에 서랍장 순서대로 된다는걸 잊고 있었다.
그래서?
3일간에 걸쳐서 어렴풋이 kidsgao사이트를 따라해봤다. 언제끝나나 하고 지루해 했던 적도 있고 똑같이 했는데 왜 안되나 골머리를 앓았던 적도 있고 이제는 루틴으로 입력하는 설정값을 선생님이 말씀하시기도 전에 적고 있었던 적도 있었다. 역시 직접해보면서 많이 느는 것 같다.
sublime3를 이용해 오늘 만들어본 파일
https://github.com/hyeriJUNG/Daegu_AI_School/tree/main/0715
Author And Source
이 문제에 관하여(2021.07.15 kidsgao-3), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hyeri_jung14/2021.07.15-kidsgao-3저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)