21.07.13

これまで学んだhtml、cssを駆使し、kidsgaoサイトの仕事を真似てみよう.
子ども向け読み物サイト
http://sisikiller.dothome.co.kr

学習内容

実習を主とする.まずhtmlファイルを作成し、pcバージョンと移動バージョンを作成します.これはウェブサイトと呼ばれています.
平行(parallax):スクロールに伴ってイベントが発生するページ機能.授業ではこの技能のほかに実習もした.
結果
210713児童高教実習コード
動画付きPCブラウザ

ブラウザ移動時の変更、アニメーションにサイズを縮小

htmlヘッダーラベル

<!--head 안쪽에 들어가는 meta 태그를 적용하였다.
제일 첫 시간에 배운 후로 다 적어보는 건 이번이 처음인 것 같다.-->

<meta charset="utf-8">
<meta name="description" content="우리쌀 점토로 만든 키즈가오 웹사이트 소개">
<meta name="keywords" content="키즈가오, 점토, 장난감">
<meta name="author" content="키즈가오">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>키즈가오</title>

그리고 link태그를 이용해 css파일들을 연결해주었다.

完成したサイトを見て、図面を作成した後、pc用css、animation css、移動用cssの順に書きます.実習すればするほど、製図は本当に重要だと思います.今、最初の授業の講師がなぜそんなに図面を強調したのか知っています.

css default

css에서 디폴트 값으로 쓰고 들어간 속성들

html, body {
	margin: 0;
	padding: 0;
}

body {
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p {
	margin: 0;
	padding: 0;
}

button {
	border: none;
	background-color: transparent;
}

.clearfix {
	clear: both;
}

마지막의 clearfix는 float을 생각해서 쓴 것!

bodyラベル本文

CSS位置では、相対的または絶対的に使用する場合に衛星が必要です.それを書く理由を見つけてこそ、深い理解が得られる.

他の本文も同様に書かれているので、まずタイトルラベルの内部のコードだけを書きます.

/* Intro */

#intro {
	width: 100%;
	height: 1600px;
	background-image: url(../img/intro/intro_bg.png);

	/*padding-top: 100px;*/
}


#intro .introWrap {
	position: relative;

	width: 760px;
	height: 516px;
	/*background-color: yellow;*/

	left: 50%;
	margin-left: -380px;
    
   	/*margin-top: 100px;*/
	top: 100px;
}

#intro .introWrap .logo {
	position: absolute;

	width: 760px;
	height: 516px;
	background-image: url(../img/intro/logo.png);

	z-index: 100;
	/* z인덱스 100은 별 다른 의미가 없다. 그냥 기준점을 만든 것 뿐이다. */
}

#intro .introWrap .lion {
	position: absolute;

	width: 161px;
	height: 161px;
	background-image: url(../img/intro/lion.png);

	/*아래는 좌표 설정*/
	margin: 80px 0 0 30px;

	z-index: 0;
}

#intro .introWrap .rabbit {
	position: absolute;

	width: 105px;
	height: 129px;
	background-image: url(../img/intro/rabbit.png);

	margin: 90px 0 0 580px;
}

#intro .introWrap .bear {
	position: absolute;

	width: 112px;
	height: 105px;
	background-image: url(../img/intro/bear.png);

	margin: 310px 0 0 560px;

	z-index: 200;
}

#intro .introWrap .monkey {
	position: absolute;

	width: 85px;
	height: 93px;
	background-image: url(../img/intro/monkey.png);

	margin: 310px 0 0 50px;

	z-index: 200;
 }

なぜロゴを囲むintrowrap領域で使用する位置が相対的に
1.まず中央に並べ替えます.left 50%は3次元の特徴を持つ位置でしか使用できません.
2.absoluteを使用する領域の親が相対的または純粋な3 D特性を持つ位置属性値である場合、親を基準に座標を形成->実習時にmargineを使用しますが、top left配置を使用する場合は親基準座標を使用し、relativeを使用します.

3 D位置とz‐index概念をよく理解してこそ,うまく応用できる.

オブジェクトをmarify:0 autoに中央揃えします.わあ、左、右もそのまま使えます.

背景画像ではなく装飾画像を使用する場合の空間サイズ=画像サイズに変更

以下はヘッダのフラグ部分ではなく、クラウド部分のコードを処理します.

#intro .cloudWrap {
	position: relative;

	width: 100%;
	height: 1050px;
	/*background-color: pink;*/
}

#intro .cloudWrap .leftCloud {
	position: absolute;

	width: 934px;
	height: 816px;
	background-image: url(../img/intro/cloud1.png);

	left: 0;

	z-index: 2;
}

#intro .cloudWrap .rightCloud {
	position: absolute;

	width: 843px;
	height: 858px;
	background-image: url(../img/intro/cloud2.png);

	right: 0;
}

#intro .cloudWrap .dragonfly {
	position: absolute;

	width: 366px;
	height: 228px;
	background-image: url(../img/intro/dragonfly.png);
	/*background-color: yellow;*/


	top: 800px;
}

▶絶対子として使うなら、親を相対的に守るのが安全です.

floatを使用するレイヤの幅の和が現在のブラウザのサイズより大きい場合、レイヤは歪みます.

オブジェクトを左端、右端に配置する必要がある場合は、position absoluteとleft、rightを使用します.

兄弟が3 Dの場合、レイヤのオーバーラップが発生します.

完了フラグ下向き操作

Padding-topを使用します.注意点はintro部分にスペースがあるため、高さ値全体が増加します.また、他の内容も空白のように下がります.そうすると、層が変形する可能性があります.だから最後の段階でダウンを使うのはよくありませんマーキンタは合併現象でだめだ.

topを使用します.これもintrowrapで位置相対を使用する3つ目の理由です.3 Dフィーチャーを持つ要素にtopを使用すると、自分が主体となって移動します.ただし、下にエレメントが配置されていても、そのエレメントの初期位置は変わりません.つまり、重なる形で移動します.+両方が3 Dの場合、後で作成される3 D要素のz軸はより高くなります.

標識の横を移動する動物のアニメーションは@keyframesでtransform: rotate(n deg);を使用しています.

トンボアニメーションのハイライトは、overflow-x: hidden;とブラウザのサイズに制限されないため、固定値を付けないことです.ここから左へ:100%;書き終わりました.

モバイル版とpc版が異なる場合は、他の値を比較します.

display: none;:既存の画像を非表示background-repeat: no-repeat;を使用すると、不要な画像を簡単に削除できます.

ポストは親子の関係、兄弟の関係に注意しなければならない.

htmlのエンタープライズロールラベル<br>

text-align: center;:ワードまたはライン内の要素(ここでのみ)を中央に並べ替えるために使用します.

オブジェクトの左右端の配置位置:absolute;使ってもいいし、ざっと見て、画像がぶつかる前に携帯電話になると思ったらfloatをそのまま使ってもいいです.

ビジネスtip!

設計作業が必要な場合は、画像サイズを5に下げたり、偶数にしたりします.

※デザイナーから画像を入手する場合は、まず画像を見てから図面の作成方法を考えるべきです※

難点

classはずいぶん増えて、要素を書くたびに混同されました.段階的に見ればわかるのに、うっかり見逃してしまいそう.

一番上の#introで連結利益の解決法を学び、paddig-top:100 pxを削除するのを忘れ、introの結果は底で変なブロック処理を行い、間違いを探し続けた.夕食を食べずに、講座をもう一度聞いて、和弦をもう一度見ましたが、やはり見えません.気が狂いそうです.

解決策

解決策は絶えず練習するしかないようだ.手順を熟知したら、どのクラスを作成しても、どのタグに適用される効果をすぐに理解する必要があります.

他のコードを一つ一つ消して探します.farm部分を誤って結合したと思いますが、原因はintro内部にあります.paddig-topを削除し、introします.introwrap上top:100 px;追加したら、完璧です!

7月8日の単独実習のレシピページで、今日実習が再登場したline-heightを見て、膝をたたいて慣れてきて、結果的によく食べました.以前問題があった写真の高さはdiv空間の高さとぴったり合っています.忘れた属性...

に感銘を与える

今日は長い間実習をしました.いろいろなレベルがあるので、PC、モバイル版、さらにcssを使ったり、動画を作ったりするので、授業中に一瞬紛らわしい時間がありました.もっと練習して、各段階の応用方法を熟知するしかないようです.
しかも、講師が3ヶ月勉強してから初めてのアウトソーシングを担当していたサイトが子供たちに来てくれたことに驚きました.私も2ヶ月後にそうなるように努力しなければなりません.自分がコードを書くときはいつも間違っているので、自信が少し下がったが、私の分を完成したいなら、そんなことを考える時間もないことに気づいた.強いモチベーションになりました.もっと勉強して、役に立つ開発者になります.