7月15日Verlog
学習の内容
http://sisikiller.dothome.co.kr/
月
最終風線(night 2 bubble)
木(RightMoonTree)
[html]moonの位置は静的で左は使えません.
[mobile.css]img(night 2 Bubble)マークwidth値を指定すると、高さ値が自動的に決定します.
太陽
左のツリー(左Pine)
右側のツリー(rightPine)
[html] [animation.css]動画:数字=duration、後数字=delay
[mobile.css]
左側キッチン用品
中間(shrowrap):機械(sram)、気泡(bubble 1)
右鍋(rightPot)
ドライヤー
[html]
前の兄弟ラベルに純粋な3次元特性(float)が付与されると、y軸に整列した兄弟ラベルはx軸で同じ層に位置する.
[animation.css]放物線動画コード
由:https://jeremyckahn.github.io/stylie/編纂
[mobile.css]キッチンバーベキュー位置を変えて気泡1が消失
ペンギン
右テキスト画像(color 1 B ubble)
[html]
[mobile.css]
木馬
ボタン領域(color 2 wrap):ブローライン、ボタン(btn-wrap)、説明(color 2 comment)
[html]
:子ラベルの位置値はいずれも静的であり、親ラベルが相対する場合は子ラベルの高さ値の影響を受けるbutton:inline block性質、デフォルトx軸揃え
[mobile.css]馬の画像を除去し、背景画像で代用
商帯(flag)
右旋盤(book)
中間バッジ(logo)
左サイコロ
[html]
[mobile.css]
idとclassの設定を一致させることが望ましい.
例)
id = color1 -> class = color1Container
id = color2 -> class = color2Container
id = color3 -> class = color3Container
学習中の難点や未解決の問題
実習中にdivタグとimgタグが兄弟タグであるのを見た場合,先行するdivタグの位置によってimgタグの位置が変わるので,この概念を再認識したい.
ソリューションの作成
[html]
場所が指定されていません
結論
:float、fixed、absoluteなどの純粋な3 Dでのみレイヤオーバーラップが発生します.
レイヤオーバーラップが発生した位置を基準に、マージン値を受け入れて座標移動を行います. 学習の心得.
子供のサイトが最後まで作られて嬉しいです.注意点を考慮して、私は最初から再創造します.
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%; }
}
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;
}
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;#morning .sun {
animation: moveSun linear 10s infinite 1500ms;
}
@keyframes moveSun {
from { margin-left: -131px; }
to { margin-left: 110%; }
}
[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属性のため、同じ線路に重なる現象をオフにしたい場合に使用します.#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;
}
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
高さを指定しない理由:子ラベルの位置値はいずれも静的であり、親ラベルが相対する場合は子ラベルの高さ値の影響を受ける
[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でのみレイヤオーバーラップが発生します.
レイヤオーバーラップが発生した位置を基準に、マージン値を受け入れて座標移動を行います.
子供のサイトが最後まで作られて嬉しいです.注意点を考慮して、私は最初から再創造します.
Reference
この問題について(7月15日Verlog), 我々は、より多くの情報をここで見つけました https://velog.io/@ryuyoungseo8232/715Velogテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol