7月15日Verlog


学習の内容

Kids Gao実習3


http://sisikiller.dothome.co.kr/

10. Night - 2




最終風線(night 2 bubble)
木(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の位置は静的で左は使えません.
  • margin-left: -135px;:最初の起点(ブラウザ左端)からmoonの幅値に等しい位置まで左側に押す
  • 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(night 2 Bubble)マークwidth値を指定すると、高さ値が自動的に決定します.
  • bottom: initial;:メディア照会以外は適用されないbottom: 0;

  • 11. Morning



    太陽
    左のツリー(左Pine)
    右側のツリー(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軸方向下270 px;
  • [animation.css]
    #morning .sun {
    	animation: moveSun linear 10s infinite 1500ms;
    } 
    
    
    @keyframes moveSun {
    	from { margin-left: -131px; }
    	to { margin-left: 110%; }
    }
  • 動画:数字=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



    左側キッチン用品
    中間(shrowrap):機械(sram)、気泡(bubble 1)
    右鍋(rightPot)
    ドライヤー
    [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;
    
    	}
  • キッチンバーベキュー位置を変えて気泡1が消失

  • 13. Color - 1



    ペンギン
    右テキスト画像(color 1 B ubble)
    [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;:フローティング機能無効

  • 14. Color - 2



    木馬
    ボタン領域(color 2 wrap):ブローライン、ボタン(btn-wrap)、説明(color 2 comment)
    [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高さを指定しない理由
    :子ラベルの位置値はいずれも静的であり、親ラベルが相対する場合は子ラベルの高さ値の影響を受ける
  • 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)
    左サイコロ
    [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タグの位置によって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 : relative;:マージンが適用されていない場合/マージンが適用されている場合
  • position : absolute;:マージンが適用されていない場合/マージンが適用されている場合
  • 結論
    :float、fixed、absoluteなどの純粋な3 Dでのみレイヤオーバーラップが発生します.
    レイヤオーバーラップが発生した位置を基準に、マージン値を受け入れて座標移動を行います.
  • 学習の心得.
    子供のサイトが最後まで作られて嬉しいです.注意点を考慮して、私は最初から再創造します.