7월 15일 Velog
학습한 내용
Kids Gao 실습 3
http://sisikiller.dothome.co.kr/
10. Night - 2
달(moon)
말풍선(night2Bubble)
나무(rightMoonTree)
[html]
<div id="night2">
<div class="moon"></div>
<img class="night2Bubble" src="img/oneday/night2/night2bubble.png"
alt="하루동안 숙성을 시키게 됩니다.">
<div class="rightMoonTree"></div>
</div>[style.css]
#night2 {
position: relative;
width: 100%;
height: 800px;
background-image: url(../img/oneday/night2/night2_bg.png);
}
#night2 .moon {
width: 135px;
height: 135px;
background-image: url(../img/oneday/night2/moon.png);
}
#night2 .night2Bubble {
position: absolute;
margin: 300px 0 0 80px;
}
#night2 .rightMoonTree {
position: absolute;
width: 243px;
height: 588px;
background-image: url(../img/oneday/night2/moontree.png);
right: 0;
bottom: 0;
}[animation.css]
#night2 .moon {
animation: moveMoon linear 10s infinite;
}
@keyframes moveMoon {
from { margin-left: -135px; }
to { margin-left: 110%; }
}- moon의 포지션이 static 상태이기 때문에 left를 사용할 수 없다.
margin-left: -135px;: 최초 시작점(브라우저 왼쪽 끝)에서 moon의 width값만큼 왼쪽으로 더 밀쳐짐margin-left: 110%;: 브라우저 오른쪽 끝에서 화면의 10%만큼 오른쪽으로 더 밀쳐짐
[mobile.css]
#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;
}- img(night2Bubble) 태그는 width 값을 지정하면 height 값이 자동으로 결정된다.
bottom: initial;: 미디어쿼리 바깥의bottom: 0;을 적용하지 않는다.
11. Morning
해(sun)
왼쪽 나무(leftPine)
오른쪽 나무(rightPine)
[html]
<div id="morning">
<div class="sun"></div>
<div class="leftPine"></div>
<div class="rightPine"></div>
</div>[style.css]
#morning {
position: relative;
width: 100%;
height: 800px;
background-image: url(../img/oneday/morning/morning_bg.png);
}
#morning .sun {
width: 131px;
height: 131px;
background-image: url(../img/oneday/morning/sun.png);
}
#morning .leftPine {
position: absolute;
width: 231px;
height: 329px;
background-image: url(../img/oneday/morning/leftpine.png);
top: 270px;
}
#morning .rightPine {
position: absolute;
width: 294px;
height: 609px;
background-image: url(../img/oneday/morning/rightpine.png);
right: 0;
bottom: 0;
}top: 270px;: y축 방향으로 270px 만큼 아래로
[animation.css]
#morning .sun {
animation: moveSun linear 10s infinite 1500ms;
}
@keyframes moveSun {
from { margin-left: -131px; }
to { margin-left: 110%; }
}- animation : 먼저 나오는 숫자 = duration, 뒤에 나오는 숫자 = delay
[mobile.css]
#morning {
height: 720px;
background-image: url(../img/mobile/oneday/morning/mobile_morning_bg.png);
}
#morning .sun {
width: 33px;
height: 32px;
background-image: url(../img/mobile/oneday/morning/mobile_sun.png);
}
#morning .leftPine {
width: 48px;
height: 81px;
background-image: url(../img/mobile/oneday/morning/mobile_leftpine.png);
}
#morning .rightPine {
width: 77px;
height: 149px;
background-image: url(../img/mobile/oneday/morning/mobile_rightpine.png);
top: 220px;
}
12. Kitchen
왼쪽 주방용품(leftPan)
중간(steamWrap) : 기계(steam), 버블(bubble1)
오른쪽 냄비(rightPot)
말풍선(kitchenBubble)
[html]
<div id="kitchen">
<div class="leftPan"></div>
<div class="rightPot"></div>
<div class="steamWrap">
<div class="steam"></div>
<div class="bubble1"></div>
</div>
<img class="kitchenBubble" src="img/kitchen/kitchenbubble.png"
alt="숙성을 시킨 반죽을 잘 익혀주면">
</div>[style.css]
#kitchen {
position: relative;
width: 100%;
height: 800px;
background-image: url(../img/kitchen/kitchen_bg.png);
}
#kitchen .leftPan {
float: left;
width: 253px;
height: 384px;
background-image: url(../img/kitchen/pan.png);
}
#kitchen .rightPot {
float: right;
width: 243px;
height: 132px;
background-image: url(../img/kitchen/pot.png);
}
#kitchen .steamWrap {
position: relative;
width: 483px;
height: 457px;
left: 50%;
margin-left: -275px;
top: -100px;
clear: both;
}
#kitchen .steamWrap .steam {
position: absolute;
width: 479px;
height: 457px;
background-image: url(../img/kitchen/steam.png);
z-index: 100;
/*bubble1보다 위에 오기 위해서*/
}
#kitchen .steamWrap .bubble1 {
position: absolute;
width: 55px;
height: 56px;
background-image: url(../img/kitchen/bubble.png);
margin-top: 230px;
}
#kitchen .kitchenBubble {
position: absolute;
top: 400px;
right: 0;
}-
앞에 나오는 형제 태그에 순수 3차원 성질(float)이 부여되면 y축 정렬되어있던 형제 태그가 x축으로 같은 레이어에 위치하게 된다.
-
clear: both;: 앞의 형제 태그의 float 속성 때문에 같은 선상에 겹쳐지는 현상을 끄고 싶을 때 사용, 다음 선상에 위치
[animation.css]
#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(-117px, -188px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
}- 포물선 애니메이션 코드
: https://jeremyckahn.github.io/stylie/ 에서 작성
[mobile.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;
/*left: 50%; 상속 받아 중앙 정렬*/
top: 0;
}
#kitchen .steamWrap .steam {
width: 222px;
height: 184px;
background-image: url(../img/mobile/kitchen/mobile_steam.png);
left: 50%;
margin: 100px 0 0 -140px;
}
#kitchen .steamWrap .bubble1 {
display: none;
}
#kitchen .kitchenBubble {
width: 143px;
left: 50%;
margin: -320px 0 0 -70px;
}- 말풍선(kitchenBubble) 위치 변경, bubble1 사라짐
13. Color - 1
펭귄(penguin)
오른쪽 텍스트 이미지(color1Bubble)
[html]
<div id="color1">
<div class="penguin"></div>
<img class="color1Bubble" src="img/color/color1/color1bubble.png"
alt="말랑말랑 키즈가오 완성">
</div>[style.css]
#color1 {
position: relative;
width: 100%;
height: 750px;
background-image: url(../img/color/color1/color1_bg.png);
}
#color1 .penguin {
position : relative;
width: 356px;
height: 244px;
background-image: url(../img/color/color1/penguin.png);
top: 100px;
left: 100px;
}
#color1 .color1Bubble {
float: right;
margin: 100px 200px 0 0;
}
[mobile.css]
#color1 {
height: 500px;
background-image: url(../img/mobile/color/color1/mobile_color1_bg.png);
}
#color1 .penguin {
display: none;
}
#color1 .color1Bubble {
float: initial;
position: relative;
width: 166px;
height: 56px;
left: 50%;
margin: 100px 0 0 -83px;
}float: initial;: float 기능 해제
14. Color - 2
목마(horse)
버튼 영역(color2Wrap) : 말풍선(color2Bubble), 버튼(btn-wrap), 설명(color2Comment)
[html]
<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>[style.css]
#color2 {
position: relative;
width: 100%;
height: 800px;
background-image: url(../img/color/color2/color2_bg.png);
}
#color2 .horse {
float: right;
width: 188px;
height: 241px;
background-image: url(../img/color/color2/horse.png);
margin: 100px 100px 0 0;
}
#color2 .color2Wrap {
clear: both; /*앞 형제 태그의 float 해제*/
position: relative;
width: 500px;
top: 100px;
margin-left: 50px;
}
#color2 .color2Wrap .color2Bubble {
margin-bottom: 30px;
/*말풍선과 버튼 사이의 공백*/
}
#color2 .color2Wrap .btn-wrap {
margin-bottom: 20px;
/*버튼과 텍스트 사이의 공백*/
}
#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);
}
#color2 .color2Wrap .color2Comment {
color: #8e7577;
}#color2 .color2Wrap에 height 지정하지 않는 이유
: 자식 태그의 position 값이 모두 static이고 부모가 relative일 때 자식 태그의 높이 값에 영향을 받음- button : inline-block 성격, 기본 x축 정렬
[mobile.css]
#color2 {
height: 400px;
background-image: url(../img/mobile/color/color2/mobile_color2_bg.png);
}
#color2 .horse {
display: none;
}
#color2 .color2Wrap {
width: 320px;
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-left: 20px;
margin-right: 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;
}- 말 이미지 제거, 백그라운드 이미지로 대체
15. Color - 3
상단 띠(flag)
오른쪽 선반(book)
가운데 로고(logo)
왼쪽 주사위(dice)
[html]
<div id="color3">
<div class="flag"></div>
<div class="book"></div>
<img class="logo" src="img/color/color3/logo.png"
alt="키즈가오 회사 로고">
<div class="dice"></div>
</div>[style.css]
#color3 {
position: relative;
width: 100%;
height: 800px;
background-image: url(../img/color/color3/color3_bg.png);
}
#color3 .flag {
position: relative;
width: 1774px;
height: 178px;
background-image: url(../img/color/color3/flag.png);
left: 50%;
margin-left: -887px;
}
#color3 .book {
float: right;
width: 417px;
height: 178px;
background-image: url(../img/color/color3/book.png);
}
#color3 .logo {
position: absolute;
left: 50%;
margin-left: -378.5px;
}
#color3 .dice {
position: absolute;
width: 239px;
height: 200px;
background-image: url(../img/color/color3/dice.png);
left: 0;
bottom: 0;
}
[mobile.css]
#color3 {
height: 430px;
background-image: url(../img/mobile/color/color3/mobile_color3_bg.png);
}
#color3 .flag {
width: 320px;
height: 46px;
background-image: url(../img/mobile/color/color3/mobile_flag.png);
margin-left: -160px;
}
#color3 .book {
width: 107px;
height: 46px;
background-image: url(../img/mobile/color/color3/mobile_book.png);
margin-right: 20px;
}
#color3 .logo {
width: 225px;
margin-top: 100px;
margin-left: -112.5px;
/*left: 50%; 상속 받아 중앙 정렬*/
}
#color3 .dice {
width: 62px;
height: 52px;
background-image: url(../img/mobile/color/color3/mobile_dice.png);
}
주의점
id와 class를 일관성 있게 설정하는 것이 좋다.
예)
id = color1 -> class = color1Container
id = color2 -> class = color2Container
id = color3 -> class = color3Container
학습한 내용 중 어려웠던 점 또는 해결 못한 것들
실습 도중에 div 태그와 img 태그가 형제 태그일 때 선행하는 div 태그의 position에 따라 img 태그의 위치가 바뀌는 것을 보고는 개념을 다시 익히고자 했다.
해결 방법 작성
[html]
<div class="a"></div>
<div class="d"></div>
<img class="c" src="https://via.placeholder.com/150">[css]
.a {
width: 200px;
height: 150px;
background-color: pink;
}
.d {
/*position : relative;*/
/*position: absolute;*/
width: 200px;
height: 150px;
background-color: blue;
}
.c {
margin: 100px 0 0 200px;
}-
position 지정하지 않음
-
position : relative;
: margin 적용하지 않았을 때 / margin 적용했을 때
position : absolute;
: margin 적용하지 않았을 때 / margin 적용했을 때
- 결론
: float, fixed, absolute 와 같이 순수 3차원일 때만 레이어 겹침이 일어난다.
레이어 겹침이 일어난 위치를 기준으로 margin 값을 받아 좌표 이동을 한다.
학습 소감
키즈가오 사이트를 끝까지 만들어봐서 뿌듯했다. 주의점을 생각하면서 처음부터 스스로 다시 만들어봐야겠다.
Author And Source
이 문제에 관하여(7월 15일 Velog), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ryuyoungseo8232/715Velog저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
