210714 개발일지
📌 학습한 내용
KidsGao 실습2
'Forest1' PC.ver
<div id="forest1">
<div class="leftTree"></div>
<div class="treeWrap">
<div class="rightTree"></div>
<div class="rabbit1"></div>
<div class="rabbit2"></div>
</div>
</div>
/* Forest1 */
#forest1 {
width: 100%;
height: 1050px;
background-image: url(../img/forest/forest1/forest1_bg.png);
}
#forest1 .leftTree {
position: absolute;
width: 445px;
height: 1200px;
background-image: url(../img/forest/forest1/lefttree.png);
left: 0;
}
#forest1 .treeWrap {
float: right;
position: relative;
width: 304px;
height: 572px;
/*background-color: yellow;*/
top: 100px; /* 자기자신이 주도해서 움직임 -> 다른영역 침범 가능 */
}
#forest1 .treeWrap .rightTree {
position: absolute;
width: 304px;
height: 572px;
background-image: url(../img/forest/forest1/righttree.png);
z-index: 10; /* 나무를 토끼보다 앞쪽에 배치 */
}
#forest1 .treeWrap .rabbit1 {
position: absolute;
width: 82px;
height: 103px;
background-image: url(../img/forest/forest1/rabbit1.png);
margin: 435px 0 0 107px;
}
#forest1 .treeWrap .rabbit2 {
position: absolute;
width: 56px;
height: 72px;
background-image: url(../img/forest/forest1/rabbit2.png);
margin: 435px 0 0 200px;
}
top, right, bottom, left
속성은 자기자신을 주도해서 움직이기 때문에 다른 영역을 침범가능
'Forest1' Animation
#forest1 .treeWrap .rabbit1 {
animation: spinRabbitOne 1000ms linear infinite alternate;
}
@keyframes spinRabbitOne {
from { transform: rotate(0deg); }
to { transform: rotate(10deg); }
}
#forest1 .treeWrap .rabbit2 {
animation: spinRabbitTwo 1000ms linear infinite alternate;
}
@keyframes spinRabbitTwo {
from { transform: rotate(10deg); }
to { transform: rotate(0deg); }
}
'Forest1' Mobile.ver
@media (max-width: 767px) {
/* Forest1 */
#forest1 {
position: relative;
height: 400px;
background-image: url(../img/mobile/forest/forest1/mobile_forest1_bg.png);
}
#forest1 .leftTree {
width: 79px;
height: 187px;
background-image: url(../img/mobile/forest/forest1/mobile_lefttree.png);
}
#forest1 .treeWrap {
width: 68px;
height: 129px;
top: 200px;
}
#forest1 .treeWrap .rabbit1,
#forest1 .treeWrap .rabbit2 {
display: none;
}
#forest1 .treeWrap .rightTree {
width: 68px;
height: 129px;
background-image: url(../img/mobile/forest/forest1/mobile_righttree.png);
}
}
'Forest2' PC.ver
<div id="forest2">
<div class="frog"></div>
<div class="machineWrap2">
<div class="machineBottom"></div>
<div class="machineLeft"></div>
<div class="machineRight"></div>
</div>
<img class="forestBubble" src="img/forest/forest2/forestbubble.png" alt="기계를 통해서 쌀을 고운 가루로 만든답니다.">
<div class="forest2Tree"></div>
</div>
/* Forest2 */
#forest2 {
width: 100%;
height: 750px;
background-image: url(../img/forest/forest2/forest2_bg.png);
}
#forest2 .frog {
position: absolute;
width: 153px;
height: 257px;
background-image: url(../img/forest/forest2/frog.png);
margin: 50px 0 0 100px;
}
#forest2 .machineWrap2 {
position: relative;
width: 400px;
height: 400px;
/*background-color: yellow;*/
left: 50%;
margin-left: -200px;
top: 180px;
}
#forest2 .machineWrap2 .machineBottom {
position: absolute;
width: 374px;
height: 162px;
background-image: url(../img/forest/forest2/machinebottom.png);
margin-top: 220px;
z-index: 200;
}
#forest2 .machineWrap2 .machineLeft {
position: absolute;
width: 123px;
height: 228px;
background-image: url(../img/forest/forest2/machineleft.png);
margin-top: 30px;
z-index: 200;
}
#forest2 .machineWrap2 .machineRight {
position: absolute;
width: 123px;
height: 248px;
background-image: url(../img/forest/forest2/machineright.png);
margin: 10px 0 0 260px;
z-index: 200;
}
#forest2 .forestBubble {
position: relative;
float: right;
top: -100px;
margin-right: 100px;
}
#forest2 .forest2Tree {
float: left;
position: relative;
width: 304px;
height: 282px;
background-image: url(../img/forest/forest2/forest2tree.png);
top: 50px;
}
margin-top
과top
의 차이
marigin-top
: 부자간 마진 병합 현상 발생, 아래쪽도 밀려남
top
:자기자신만 움직임, 아래쪽을 침범
'Forest2' Animation
#forest2 .machineWrap2 .machineLeft {
animation: moveLeft 1s linear infinite alternate;
}
@keyframes moveLeft {
from { left: 30px; }
to { left: 0px; }
}
#forest2 .machineWrap2 .machineRight {
animation: moveRight 1s linear infinite alternate;
}
@keyframes moveRight {
from { left: -30px; }
to { left: 0px; }
}
'Forest2' Mobile.ver
@media (max-width: 767px) {
/* Forest2 */
#forest2 {
position: relative;
height: 400px;
background-image: url(../img/mobile/forest/forest2/mobile_forest2_bg.png);
}
#forest2 .frog {
width: 34px;
height: 57px;
background-image: url(../img/mobile/forest/forest2/mobile_frog.png);
margin: 0 0 0 20px;
}
#forest2 .machineWrap2 {
width: 200px;
height: 110px;
top: 70px;
margin-left: -97px;
/*background-color: yellow;*/
}
#forest2 .machineWrap2 .machineBottom {
width: 141px;
height: 60px;
background-image: url(../img/mobile/forest/forest2/mobile_machinebottom.png);
left: 50%;
margin: 50px 0 0 -70.5px;
}
#forest2 .machineWrap2 .machineLeft {
width: 46px;
height: 85px;
background-image: url(../img/mobile/forest/forest2/mobile_machineleft.png);
margin: 0 0 0 20px;
}
#forest2 .machineWrap2 .machineRight {
width: 46px;
height: 93px;
background-image: url(../img/mobile/forest/forest2/mobile_machineright.png);
margin: -10px 0 0 130px;
}
#forest2 .forestBubble {
position: absolute;
width: 161px;
top: 290px;
left: 50%;
margin-left: -83px;
}
#forest2 .forest2Tree {
float: right;
width: 69px;
height: 76px;
background-image: url(../img/mobile/forest/forest2/mobile_forest2tree.png);
top: 130px;
margin-right: 20px;
}
}
- 이전 요소로 인해 그 다음에 나오는 요소가 의도와는 다르게 나오는 경우가 있음.
'Forest3' PC.ver
<div id="forest3">
<div class="forest3Wrap">
<div class="forest3Tree"></div>
<div class="smallBird"></div>
<div class="bigBird"></div>
</div>
</div>
/* Forest3 */
#forest3 {
width: 100%;
height: 600px;
background-image: url(../img/forest/forest3/forest3_bg.png);
}
#forest3 .forest3Wrap {
float: right;
position: relative;
width: 354px;
height: 440px;
/*background-color: yellow;*/
}
#forest3 .forest3Wrap .forest3Tree {
position: absolute;
width: 354px;
height: 440px;
background-image: url(../img/forest/forest3/forest3Tree.png);
}
#forest3 .forest3Wrap .smallBird {
position: absolute;
width: 40px;
height: 35px;
background-image: url(../img/forest/forest3/bird_sm.png);
top: 120px;
left: 125px;
}
#forest3 .forest3Wrap .bigBird {
position: absolute;
width: 83px;
height: 80px;
background-image: url(../img/forest/forest3/bird_big.png);
margin: 280px 0 0 94px;
}
top, left, bottom, right
: 부모가 3차원 속성을 가지고 있으면 자식의 좌표 기준점은 부모를 기준으로 설정된다.margin
: 부모가 어떤 포지션 상태이든 좌표 기준점이 달라지지 않는다. (원래 위치에서 바뀌게 된다)
'Forest3' Animation
#forest3 .forest3Wrap .smallBird {
animation: spinSmallBird 1000ms linear infinite alternate;
}
@keyframes spinSmallBird {
from { transform: rotate(0deg); }
to { transform: rotate(10deg); }
}
#forest3 .forest3Wrap .bigBird {
animation: spinBigBird 1000ms linear infinite alternate;
}
@keyframes spinBigBird {
from { transform: rotate(-10deg); }
to { transform: rotate(10deg); }
}
'Forest3' Mobile.ver
@media (max-midth: 767px) {
/* Forest */
#forest3 {
height: 630px;
background-image: url(../img/mobile/forest/forest3/mobile_forest3_bg.png);
}
#forest3 .forest3Wrap {
width: 99px;
height: 127px;
top: 300px;
}
#forest3 .forest3Wrap .forest3Tree {
width: 99px;
height: 127px;
background-image: url(../img/mobile/forest/forest3/mobile_forest3tree.png);
}
#forest3 .forest3Wrap .smallBird,
#forest3 .forest3Wrap .bifBird {
display: none;
}
}
'Science' PC.ver
<div id="science">
<div class="scienceWrap">
<div class="scienceLeftWrap">
<div class="gly"></div>
<img src="img/science/leftTitle.png" alt="자초, 어성초, 감초">
<p>
자초 어성초 감초를 넣어서<br>
피부진정 및 항염 효과가 있답니다.
</p>
</div>
<div class="scienceCenterWrap">
<div class="purpleSteam"></div>
<div class="funnelBack"></div>
<div class="funnelFront"></div>
</div>
<div class="scienceRightWrap">
<div class="water"></div>
<img src="img/science/rightTitle.png" alt="글리세린, 올리브유">
<p>
빵의 표면을 촉촉하게 해주는<br>
글리세린과 오메가-9지방산이<br>
풍부한 올리브유를 넣어서<br>
보습 효과도 뛰어나답니다.
</p>
</div>
</div>
</div>
/* Science */
#science {
position: relative;
width: 100%;
height: 800px;
background-image: url(../img/science/science_bg.png);
}
#science .scienceWrap {
position: relative;
width: 1068px;
height: 655px;
/*background-color: yellow;*/
margin: 0 auto;
}
#science .scienceWrap .scienceLeftWrap {
float: left;
width: 288px;
height: 100%;
/*background-color: blue;*/
}
#science .scienceWrap .scienceLeftWrap .gly {
width: 230px;
height: 192px;
background-image: url(../img/science/gly.png);
margin: 0 0 130px 55px;
}
#science .scienceWrap .scienceLeftWrap p,
#science .scienceWrap .scienceRightWrap p{
color: #8e7577;
font-size: 18px;
line-height: 26px;
padding-top: 10px;
}
#science .scienceWrap .scienceCenterWrap {
position: relative;
float: left; /* -> 왼쪽에서 부터 정렬시키기 위해 */
width: 488px;
height: 100%;
/*background-color: pink;*/
}
#science .scienceWrap .scienceCenterWrap .purpleSteam {
position: relative;
width: 241px;
height: 216px;
background-image: url(../img/science/grape.png);
left: 50%;
margin-left: -120px;
}
#science .scienceWrap .scienceCenterWrap .funnelBack {
position: absolute;
width: 488px;
height: 438px;
background-image: url(../img/science/funnelback.png);
}
#science .scienceWrap .scienceCenterWrap .funnelFront {
position: relative;
width: 485px;
height: 390px;
background-image: url(../img/science/funnelfront.padding);
margin-top: 48px;
}
#science .scienceWrap .scienceRightWrap {
float: right;
width: 292px;
height: 100%;
background-color: gr;
}
#science .scienceWrap .scienceRightWrap .water {
width: 204px;
height: 191px;
background-image: url(../img/science/water.png);
margin-bottom: 130px;
}
<중앙정렬 하는 방법>
1. { margin: 0 auto }
2. { left: 50%; margin-left: -(image-width값/2)px;}
👉 3차원 특징을 가진 두 형제간은 후에 작성된 것이 z축에서 우위를 가진다.
'Science' Animation
#science .scienceWrap .gly {
animation: spinGly 1500ms linear infinite alternate;
}
@keyframes spinGly {
from { transform: rotate(0deg); }
to { transform: rotate(50deg); }
}
#science .scienceWrap .water {
animation: spinWater 1500ms linear infinite alternate;
}
@keyframes spinWater {
from { transform: rotate(0deg); }
to { transform: rotate(-50deg); }
}
'Science' Mobile.ver
@media (max-width: 767px) {
/* Science */
#science {
height: 580px;
background-image: url(../img/mobile/science/mobile_science_bg.png);
}
#science .scienceWrap {
overflow: hidden;
width: 360px;
height: auto;
top: 180px;
/*margin-left: -180px; -> style.css에서 margin: 0 auto를 사용했기 때문에*/
}
#science .scienceWrap .scienceLeftWrap {
width: 100px;
}
#science .scienceWrap .scienceLeftWrap .gly {
width: 76px;
height: 63px;
background-image: url(../img/mobile/science/mobile_gly.png);
margin: 0 0 10px 0;
}
#science .scienceWrap .scienceLeftWrap img,
#science .scienceWrap .scienceRightWrap img {
height: 15px;
}
#science .scienceWrap .scienceLeftWrap p,
#science .scienceWrap .scienceRightWrap p {
display: none;
}
#science .scienceWrap .scienceCenterWrap {
width: 160px;
height: 222px;
}
#science .scienceWrap .scienceCenterWrap .purpleSteam{
width: 80px;
height: 71px;
background-image: url(../img/mobile/science/mobile_grape.png);
margin-left: -40px;
}
#science .scienceWrap .scienceCenterWrap .funnelBack {
width: 173px;
height: 151px;
background-image: url(../img/mobile/science/mobile_hopperback.png);
}
#science .scienceWrap .scienceCenterWrap .funnelFront {
width: 160px;
height: 122px;
background-image: url(../img/mobile/science/mobile_hopperfront.png);
left: 50%;
margin: 20px 0 0 -80px;
}
#science .scienceWrap .scienceRightWrap {
width: 100px;
}
#science .scienceWrap .scienceRightWrap .water {
width: 67px;
height: 63px;
background-image: url(../img/mobile/science/mobile_water.png);
margin-bottom: 10px;
margin-left: 32px;
}
}
'Night1' PC.ver
<div id="night1">
<div class="owl"></div>
<div class="starWrap">
<div class="star1"></div>
<div class="star2"></div>
<div class="star3"></div>
</div>
</div>
/* Night1 */
#night1 {
width: 100%;
height: 700px;
background-image: url(../img/oneday/night1/night1_bg.png);
}
#night1 .owl {
position: absolute;
width: 334px;
height: 571px;
background-image: url(../img/oneday/night1/owl.png);
margin-top: 50px;
}
#night1 .starWrap {
position: relative;
width: 750px;
height: 400px;
/*background-color: pink;*/
top: 150px;
margin-left: 600px;
}
#night1 .starWrap .star1,
#night1 .starWrap .star2,
#night1 .starWrap .star3 {
position: absolute;
width: 53px;
height: 50px;
background-image: url(../img/oneday/night1/star1.png);
}
#night1 .starWrap .star1 {
margin-top: 350px;
}
#night1 .starWrap .star2 {
margin-left: 650px;
}
#night1 .starWrap .star3 {
margin: 250px 0 0 500px;
}
👉 먼저 나오는 형제가 3차원 특징을 가지고 있다면, 후에 나오는 형제가 2차원이든 3차원이든 상관없이 레이어가 겹치게 된다.
'Night1' Animation
#night1 .starWrap .star1,
#night1 .starWrap .star2,
#night1 .starWrap .star3 {
animation: pulseStar 1s linear infinite alternate;
}
@keyframes pulseStar {
from { transform: scale(1); }
to { transform: scale(0.8); }
}
transform: scale(1);
: 원래 공간의 크기의 비율을 1로 맞추어 시작
transform: scale(0.8);
: 원래 공간의 크기에서 0.8비율로 줄이겠다.
=> scale은 배수로 늘어남?
'Night' Mobile.ver
@media (max-width: 767px) {
/* Night1 */
#night1 {
position: relative;
height: 500px;
background-image: url(../img/mobile/oneday/night1/mobile_night1_bg.png);
}
#night1 .owl {
width: 88px;
height: 151px;
background-image: url(../img/mobile/oneday/night1/mobile_owl.png);
margin-top: 0;
}
#night1 .starWrap {
position: absolute;
width: 388px;
height: 157px;
background-image: url(../img/mobile/oneday/night1/mobile_star.png);
top: 300px;
margin-left: 50px;
}
#night1 .starWrap .star1,
#night1 .starWrap .star2,
#night1 .starWrap .star3 {
display: none;
}
}
📌 학습내용 중 어려웠던 점
-
모바일 버전 작업시 배경이 매끄럽게 이어지지 않고 끊기는 현상 발생
-
position: relative/absolute
의 사용이 다시 헷갈리기 시작함
📌 해결방법
끊어지는 현상에 'Farm3'의 배경이미지를 자세히 보니 모바일 버전이 아니라 PC 버전으로 적용되는 것을 확인했다. 크롬의 검사 기능을 이용해 몇 번째 코드에 오류가 발생했는지를 확인하고 해당 줄의 코드 오타를 수정하니 정상적으로 작동했다. 개별적으로 position
에 대한 유튜브 강의를 들어봐야겠다.
📌 학습소감
생각보다 html과 css를 다루는데에 어려움이 있는 것보다, 오타로 인한 실수가 확연하게 잦은것 같다. 하지만 크롬의 검사기능을 사용하는데 조금 익숙해졌으며, 활용도 가능해졌다. 특히 크롬의 검사기능에서 코드를 on/off 할 수 있는 기능은 알고 있었지만, 그 자체로 코드를 추가적으로 작성할 수 있다는 사실을 깨달았다. 지금까지는 좌표를 설정할 때, 그 수치를 오직 강사님이 하시는 대로만 따라했다면, 이제 해당 기능을 사용해 이곳 저곳으로 오브젝트를 옮기며 실험해볼 수 있겠다. 🤟
Author And Source
이 문제에 관하여(210714 개발일지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jiyoon_jeong2005/210714-개발일지저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)