7月13日(小児高)

学習内容

講師は初めてアウトソーシングしたキッズサイト制作の実習を行った.
今日の実習コードが長すぎてgithubにアップロードします.
最初のタスクは

<meta charset="utf-8">
	<meta name="description" content="우리쌀 점토로 만든 키즈가오 웹사이트 소개">
	<meta name="keywords" content="키즈가오, 점토, 장난감">
	<meta name="김로나" content="키즈가오" >

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>키즈가오</title>

	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="css/animation.css">
	<link rel="stylesheet" type="text/css" href="css/mobile.css">
    

cssファイルをhtmlにバインドし、

html, body {
	margin: 0;
	padding: 0;
}
/*현재 브라우저의 x축을 벗어나는 영역의 오브젝트는 전부 hidden, 하지 않으면 가로스크롤이 생김 , dragonfly 애니메이션 적용 시 */
body {
	overflow-x: hidden ;
}

h1,h2,h3,h4,h5,h6,p {
	margin: ;
	padding: 0;
}
/*태생적으로 버튼태그에는 테두리와 배경색(회색)이 있으므로 투명으로 변경해줌*/
button {
	border: none;
	background-color: transparent;
}

.clearfix {
	clear: both;
}

default値として指定します.
次にヘッダ(logo),farm 1,farm 2,farm 3である.
頭の宿題が終わって、ロゴを100 pxに下げたい時
3つの方法があります.

.introwrap>marging-top>親まで(合併利益)

に従うことはできません

#intro>padding-top>すべての内容が異なる

.introwrap>top>は自分を主体として移動し、下にどんな要素が配置されても要素の初期位置は変わらない.
重なり合ってねじれはありません.両方が3 Dの場合、後で作成する要素のz-indexの方が高い(位置に対して)

position : relative; -> top、right、bottom、leftが使用可能で、親が3 D(相対)の場合、子が絶対の場合、親が座標基点
positionはz-indexを使用するには3次元でなければなりません.層があります.
background-imageのサイズを空間に揃えます(重複するプロパティはno-repeatでなければなりません.このような面倒を減らすために).
floatを適用すると、サブレイヤの値が親レイヤの値より大きい場合、レイヤがねじれます.floatを適用すると、3 D位置が上、右、下、左の値に与えられます.
positionを3 Dに設定すると、アニメーションは@キーフレームにtop、right、bottom、left値を適用できます.

@keyframes flyDraronfly {
	from {left: -366px;}
	to {left:100%;} (화면밖으로 사라지는 효과 주기 위해) 
}

❗実務チラシ❗
仕事をしていない場合、画像のサイズは5で終わるか、偶数で下がるサイズで作成すると、サイト作成時にレイアウトが容易になります.
親レイヤが3 Dの場合、レイヤはオーバーラップしますが、後で作成された3 Dなので、一番上にあります.

@keyframes rotateLeftSaw {
	from {transform: rotate(0deg);	}
	to { transform: rotate(360deg); }
} -> 시계 방향
@keyframes rotateRightSaw {
	from {transform: rotate(360deg);	}
	to { transform: rotate(0deg); }
} -> 시계 반대방향

携帯版も制作された.
@media (max-width: 767px)
->766以下のサイズの場合、次のコードで実行するという意味です

エンコーディング
html
animation.css
css
mobile

難点

ただ内容が多いだけで、難点はありません.
通常、開発ログにはコードが記録されます.
今日は量が多すぎて、どうしたらいいか分かりません.
复习にもかなり时间がかかります.
図面を描くのが一番難しいと思います.
考えてみれば単純だけど時々混同する

解決策

復習するしかない...
設計図はまた練習しなければなりません.設計図が正しい場合にのみcssを適用し、レイアウト

学習の心得.

positionをたくさん使っていましたが、私の知っている範囲で行ったので、無事に実習を終えました.ちょっと嬉しかったので楽しくレッスンを受けましたが、長すぎてまた垂れ下がってしまいました.復習すると、一日中かかるようです.