CSS 실습 - 키즈가오(2)

📌학습 내용

실무 팁
CSS 작업은 html 설계 순서대로 해줄 것

📖FOREST1

💡 설계:style.css
📎html

          <div id="forest1">
              <div class="leftTree"></div>

              <div class="treeWrap">
                  <div class="rightTree"></div>
                  <div class="rabbit1"></div>
                  <div class="rabbit2"></div>
          </div>

📎CSS

        #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;

            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: 75px;
            background-image: url(../img/forest/forest1/rabbit2.png);

            margin: 435px 0 0 200px;
        }

💡 FOREST1 애니메이션: animation.css

        #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.css

        #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

💡 설계:style.css
📎html

          <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>

📎CSS

        #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 {
            position: relative;

            width: 304px;
            height: 282px;
            background-image: url(../img/forest/forest2/forest2tree.png);

            top: 50px;
        }

💡 FOREST2 애니메이션: animation.css

        #forest2 .machineWrap2 .machineLeft {
            animation: moveLeft 1s linear infinite alternate;
        }

        @keyframes moveLeft {
            from {left: 30px;}
            to {left: 0;}
        }

        #forest2 .machineWrap2 .machineRight {
            animation: moveRight 1s linear infinite alternate;
        }

        @keyframes moveRight {
            from {left: -30px;}
            to {left: 0;}
        }

💡 FOREST2 모바일 버전: mobile.css

        #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;
        }

        #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

💡 설계:style.css
📎html

          <div id="forest3">
              <div class="forest3Wrap">
                  <div class="forest3Tree"></div>
                  <div class="smallBird"></div>
                  <div class="bigBird"></div>
              </div>
          </div>

📎CSS

            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; /* 영역 시각화 */

            top: 100px;
        }

        #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;
        }

💡 FOREST3 애니메이션: animation.css

        #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.css

        #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 .bigBird {
            display: none;
        }

📖SCIENCE

💡 설계:style.css
📎html

	<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>

📎CSS
• div별로 영역 구분: 가장 큰 영역 먼저 잡아주기

        #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;
        }

• div별로 영역 구분: 세부 영역 넣어주기

        #science .scienceWrap .scienceLeftWrap {
            float: left;
            width: 288px;
            height: 100%;
            background-color: blue; /* 영역 시각화 */
        }

        #science .scienceWrap .scienceCenterWrap {
            position: relative;

            float: left;
            width: 488px;
            height: 100%;
            background-color: pink; /* 영역 시각화 */
        }

        #science .scienceWrap .scienceRightWrap {
            float: left; /* right 넣어줘도 됨 */
            width: 292px;
            height: 100%;
            background-color: gray; /* 영역 시각화 */
        }

• 오브젝트 넣어주기

        #science .scienceWrap .scienceLeftWrap .gly {
            width: 230px;
            height: 192px;
            background-image: url(../img/science/gly.png);

            margin: 0 0 130px 55px;
        }

        #science .scienceWrap .scienceLeftWrap p {
            color: #8e7577;
            font-size: 18px;
            line-height: 26px;

            padding-top: 10px;
            /* 상단 이미지에 margin-bottom을 적용해 공백을 줘도 됨 */
        }

        #science .scienceWrap .scienceRightWrap .water {
            width: 204px;
            height: 191px;
            background-image: url(../img/science/water.png);

            margin-bottom: 130px;
        }

        #science .scienceWrap .scienceRightWrap p {
            color: #8e7577;
            font-size: 18px;
            line-height: 26px;

            padding-top: 10px;
        }

        #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.png);

            margin-top: 48px;
        }

💡 SCIENCE 애니메이션: animation.css

        #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.css

        #science {
            height: 580px;
            background-image: url(../img/mobile/science/mobile_science_bg.png);
        }

        #science .scienceWrap {
            overflow: hidden; 
            /* float 자식의 높이값이 부모에게 영향을 줄 수 있도록 */

            width: 360px;
            height: auto;

            top: 180px;
        }

        #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

💡 설계:style.css
📎html

          <div id="night1">

              <div class="owl"></div>

              <div class="starWrap">
                  <div class="star1"></div>
                  <div class="star2"></div>
                  <div class="star3"></div>
              </div>
          </div>

📎CSS

        #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;
        }

💡 NIGHT1 애니메이션: animation.css

        #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); }
        }

💡 NIGHT1 모바일 버전: mobile.css

        #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: 308px;
            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;
        }

📌어려운 점

forest2가 형제인 forest1의 자식으로 자꾸 들어감

html 페이지에서 제대로 들여쓰기가 되어있는데 개발자도구 확인하면 종속되어 있다...😥

📌해결 방법

들여쓰기가 아니라면 뭐가 문제일까 고민하면서 다시 들여다 봤더니 forest1에서 </div>가 누락된 부분이 있어서 고쳐줌! 휴😅

📌느낀 점

학습량이 많아지면 개발일지 쓰는 게 버거워진다.
다른 분들은 깃허브에 소스 코드 링크하시고 velog에는 간단히 배운 점만 요약해서 쓰기도 하시는 것 같아서 나도 그렇게 할까 고민해봤지만... 역시 나는 어떤 코드를 적용했고 이 단계에서 이렇게 보이더라 하는 걸 눈으로 봐야 나중에 스스로 기억이 살아나는 타입이라 못 바꾸겠다. 흑흑🤢 좀 더 고민해보자.