開発ログ210713

38019 ワード

皮猫開発中の保存に失敗しました大邱AI学校テキストリンク

12日目のまとめ

学習内容を活用して実践

http://sisikiller.dothome.co.kr/
以上のサイトのhtml、cssコピー練習

intro~farm 3へ

1.準備

1.1. プロジェクトディレクトリの構成

cssフォルダの下に3つのcssファイルを個別に用意します.

反応型ページの移動を作成するために.css

要素にアニメーション効果を適用するためのアニメーション.cssは

1.2. ヘッダーラベルとスタイルcssを置き換える

html

<head>
	<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 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">
</head>

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

meta、tiieラベル、および各cssファイルおよびリンク

のデフォルトcss属性を持つタグの初期化操作と.clearfix設定

復習するあらかじめclearfix{}を設定してください
flotを使用するときに発生する可能性のあるレイアウトの変化に対応するために、cssを設定してからアプリケーションライブラリのように使用できます.
「clearfix」はこの場合の一般的な対応として慣習的に通用する.
注)イメージフォルダ内のファイルは実際にのみ使用できます.

2. intro

子供gaoのロゴから雲部分までのエリアです
主に四つの部分に分かれている

ロゴと装飾ロゴ

ロゴ下部背景設計

アプリケーション

アニメーション

アプリケーション

メディアクエリー

2.1. html、背景全体を適用

	<header id="intro">
		<div class="introwrap">
			<div class="logo"></div>
			<div class="lion"></div>
			<div class="rabbit"></div>
			<div class="bear"></div>
			<div class="monkey"></div>
		</div>

		<div class="cloudwrap">
			<div class="leftcloud"></div>
			<div class="rightcloud"></div>
			<div class="dragonfly"></div>
		</div>
	</header>

ヘッダ領域を作成し、introを作成します.

ヘッダ領域には2つの大きなdivラベルがあり、それぞれバッジとIntroバックグラウンドレンダリングの領域

に使用される.

2.1.1. 背景を挿入

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

背景画像のurlを指定

2.2. CSS：ロゴ

2.2.1. ロゴ領域

#intro .introwrap {
	position: relative;

	width: 760px;
	height: 516px;

	left: 50%;
	margin-left: -380px;

	top: 100px;
}

の相対位置は、サブ要素との関係を考慮して設定されるべきである.

の相対位置であることを考慮して、ソート方法を使用する
left 50%とwidth値の半分を使用しました.

2.2.2. ロゴデザイン

ロゴデザインは子供の五文字イメージを中心に、4匹の動物の顔が動くアニメーションを作ります.まず、フラグの中心画像を挿入します.

#intro .introwrap .logo {
	position: absolute;

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

	z-index: 100;
}

z-indexを

位置の絶対値として使用します.これにより、複数の画像が重なり合って表現される.

のように子供の領域の位置で絶対を使うと、親の属性は基本的に相対的に良いです.
(配置/位置合わせ/サブ領域の開始座標など)

動物画像を挿入

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

フラグ中心画像のz-index値100を基準にz-indexを設定してz軸位置を決定します.z-indexのデフォルト値は0で、入力しないと中心画像の後ろに戻ります.

に類似するcssコードは

を省略する.
結果出力

2.3. CSS：装飾intro背景

2.3.1. 装飾エリアの設定

#intro .cloudwrap {
	position: relative;
	width: 100;
	height: 1050px;
	/*background-color: pink;*/
}

上のバッジと同様に、親div領域を設定します.

背景色を用いる作業時の視認性と注釈効果を向上させる

2.3.2. 装飾要素の挿入

#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);
	top: 800px;
}

クラウド画像はブラウザの左右端に基づいて配置する必要があります.flotを使用すると、画像幅の和がブラウザ幅を超えると、下に下がる可能性があり、レイアウトが意図と異なる場合があります.

雲画像が重なる場合は、z-indexを左側雲画像上に設定します.

くらい上下も位置によって違います.absoluteの場合は、上記のようになります.

結果出力

2.4. CSS-アニメーション

2.4.1. 動く動物の顔

#intro .introwrap .lion {
	animation: spinlion 1500ms linear infinite alternate;
}
@keyframes spinlion {
	from {
		transform: rotate(-10deg);
	}
	to {
		transform: rotate(10deg);
	}
}

ライオンの顔画像を変換しました:回転によって回転を適用します.

復習)anmationラベルの要素を順番に並べます
キー名(Key Name)/再生時間(Playback Time)/再生速度(Playback Speed)/繰り返し(Repeat)/再生方向(Playback Direction)

2.4.2. フライングマシン

#intro .cloudwrap .dragonfly {
	animation: flydragonfly linear 7s infinite;
}
@keyframes flydragonfly {
	from {
		left: -366px;
	}
	to {
		left: 100%;
	}
}

左側-366 pxの

fromはトンボ画像の幅値

を示す.

toletf値を固定値に設定と、ブラウザのサイズによって結果が異なるため、

とパーセントで入力.

leftに示すように、前に作成したプロパティを使用できます.dragonflyのdivタグは絶対位置

を有する

2.5. CSS：メディア照会

子供のウェブサイトにとって、メディアクエリの変化点の一つはpcとモバイルデバイスが作成したと仮定し、画像ファイルにもモバイル専用の画像ファイルがある.

@media (max-width: 767px) {

	#intro {
		height: 1150px;
		background-image: url(../img/mobile/intro/mobile_intro_bg.png);
	}
	#intro .introwrap {
		width: 189px;
		height: 129px;
		margin-left: -94.5px;
		top: 230px;
	}
	#intro .introwrap .logo {
		width: 189px;
		height: 129px;
		background-image: url(../img/mobile/intro/mobile_logo.png);
	}
	#intro .introwrap .lion,
	#intro .introwrap .rabbit,
	#intro .introwrap .bear,
	#intro .introwrap .monkey,
	#intro .cloudwrap .dragonfly {
		display: none;
	}
	#intro .cloudwrap {
		height: 350px;
	}
	#intro .cloudwrap .leftcloud {
		width: 267px;
		height: 314px;
		background-image: url(../img/mobile/intro/mobile_cloud1.png);
	}
	#intro .cloudwrap .rightcloud {
		width: 237px;
		height: 309px;
		background-image: url(../img/mobile/intro/mobile_cloud2.png);
	}
}

注意

、見たい部分は.含まれている程度ですleft:50%の値を継承しているので、別途指定するのではなく、領域のwidthの半分の値94.5をmarging-leftに引いた.

標識の動物の顔画像は、移動版画像の中で1つに結合される.したがって、displayをnoneに設定して、指定したメディアクエリー領域で出力しないようにします.

の場合は、メディアクエリー領域のイメージファイルを表示して適用することが重要です.

mobile_intro_bg.pngの実際の幅は767 px未満であるため,繰り返し出現するトンボ画像からその繰り返し出現が分かる.

出力結果

3. farm1

farm領域内には4つのdivタグ領域

がある.

Introと同様にcssタスクをクラス別に

に分類する

3.1. farm1 html

	<div id="farm1">
		<div class="leftrice1"></div>
		<div class="farmer"></div>
		<div class="rightrice1"></div>

		<div class="farmspeechwrap">
			<img src="img/farm/farm1/farmspeech.png" align="우리쌀 점토">
			<p class="farmspeech">
				식재료만 넣은 안전한<br>
				우리쌀 점토 키즈가오는<br>
				우리 쌀을 사용하여 만들어요.<br>
				화학물질을 사용하지 않고,<br>
				식재료를 사용해서 만든<br>
				안전한 제품이랍니다.
			</p>
		</div>
	</div>

3.2. CSS : farm1 style

#farm1 {
	position: relative;
	width: 100%;
	height: 800px;
	background-image: url(../img/farm/farm1/farm1_bg.png);
}
#farm1 .leftrice1 {
	position: absolute;
	width: 390px;
	height: 670px;
	background-image: url(../img/farm/farm1/leftrice.png);
	left: 0;
}
#farm1 .rightrice1 {
	position: absolute;
	width: 335px;
	height: 570px;
	background-image: url(../img/farm/farm1/rightrice.png);
	right: 0;
	top: 100px;
}
#farm1 .farmer {
	position: absolute;
	width: 747px;
	height: 1078px;
	background-image: url(../img/farm/farm1/farmer.png);
	left: 50%;
	margin-left: -310px;
}
#farm1 .farmspeechwrap {
	position: relative;
	top: 250px;
	left: 150px;
}
#farm1 .farmspeechwrap .farmspeech {
	color: #895c2f;
	font-size: 18px;
	line-height: 27px;	
}

完全背景画像farm 1はintroと同様に相対位置

を用いる.

サブプロパティはablote,

を使用します.

は例外的に、文字ボックスが1つあります.farmspeechwrapの場合、「相対」(Relate)プロパティ

)を使用して、後述するコードをy軸に露出します.

水稲画像は、前の雲と同様に両側に配置する、z-indexを使用していないのは、水稲画像の幅値が767 pxを超えないため、重なる前にメディアクエリー

を切り替える.
結果出力

3.3. CSS：farm 1メディア照会

farm 1アニメーションなし

寸法調整・並べ替え作業

を行う.

/*Farm1*/
#farm1 {
	height: 450px;
	background-image: url(../img/mobile/farm/farm1/mobile_farm1_bg.png);
}
#farm1 .leftrice1 {
	width: 86px;
	height: 150px;
	background-image: url(../img/mobile/farm/farm1/mobile_leftrice.png);
}
#farm1 .rightrice1 {
	width: 95px;
	height: 170px;
	background-image: url(../img/mobile/farm/farm1/mobile_rightrice.png);
	top: -20px;
}
#farm1 .farmer {
	width: 160px;
	height: 250px;
	background-image: url(../img/mobile/farm/farm1/mobile_farmer.png);
	margin-left: -69px;
}
#farm1 .farmspeechwrap {
	width: 300px;
	text-align: center;
	left: 50%;
	margin-left: -150px;
}
#farm1 .farmspeechwrap img {
	width: 79px;
}
#farm1 .farmspeechwrap .farmspeech {
	line-height: 20px;
	font-size: 12px;
}

と同じです.farmer画像は左の値を継承するのでmargine-leftソート

のみが適用される.

「我々の米粘土」画像align属性を与えたのでtext-alignで

を中央に揃えることができます.
結果出力

4. farm2

全体的にシンプルな部分サムネイルの作成
html

	<div id="farm2">
		<div class="leftrice2"></div>
		<div class="scarecrow"></div>
		<div class="rightrice2"></div>
	</div>

CSS - style

#farm2 {
	position: relative;
	width: 100%;
	height: 850px;
	background-image: url(../img/farm/farm2/farm2_bg.png);
}
#farm2 .leftrice2 {
	float: left;
	width: 250px;
	height: 850px;
	background-image: url(../img/farm/farm2/leftrice2.png);
}
#farm2 .rightrice2 {
	float: right;
	width: 236px;
	height: 850px;
	background-image: url(../img/farm/farm2/rightrice2.png);
}
#farm2 .scarecrow {
	position: absolute;
	width: 103px;
	height: 206px;
	background-image: url(../img/farm/farm2/scarecrow.png);
	margin: 200px 0 0 300px;
}

メートル、左、右揃え.前の場合と同様に、画像幅が小さいため、レイアウトの位置合わせが変化する前に、移動バージョンのメディアクエリーに切り替えることができます.

藁人形の場合は、端に沿って置きます.同様に配置できます.

結果出力

CSS - mobile

@media (max-width: 767px) {
	#farm2 .leftrice2 {
		width: 57px;
		height: 201px;
		background-image: url(../img/mobile/farm/farm2/mobile_leftrice2.png);
	}
	#farm2 .rightrice2 {
		width: 54px;
		height: 202px;
		background-image: url(../img/mobile/farm/farm2/mobile_rightrice2.png);
	}
	#farm2 .scarecrow {
		display: none;
	}
}

以前はintroのトンボのように、わら人形は背景処理を経て、領域が広いと

が繰り返された.
結果出力

5. farm3

バックグラウンド領域-2つのdivと1つのimg領域-サブ複数のdiv領域からなる

5.1. html

	<div id="farm3">
		<div class="farm3window"></div>
		<div class="machinewrap">
			<div class="machine1"></div>
			<div class="sawshadow"></div>
			<div class="saw1"></div>
			<div class="saw2"></div>
			<div class="machinebird"></div>
			<div class="timer"></div>
		</div>
		<img class="farm3Bubble" src="img/farm/farm3/farm3bubble.png" alt="기계를 통해서 쌀알이 딱딱한 껍질을 벗어 냅니다.">
	</div>

5.2. CSS : farm3 style

#farm3 {
	position: relative;
	width: 100%;
	height: 850px;
	background-image: url(../img/farm/farm3/farm3_bg.png);
}
#farm3 .farm3window{
	position: absolute;
	width: 247px;
	height: 169px;
	background-image: url(../img/farm/farm3/window.png);
	margin: 100px 0 0 100px;
}
#farm3 .machinewrap {
	position: relative;
	width: 600px;
	height: 455px;
	/*background-color: yellow;*/
	left: 50%;
	margin-left: -285px;
	top: 150px;
}
#farm3 .machinewrap .machine1 {
	position: absolute;
	width: 586px;
	height: 455px;
	background-image: url(../img/farm/farm3/machine1.png);
	z-index: 900;
}
#farm3 .machinewrap .sawshadow {
	position: absolute;
	width: 95px;
	height: 95px;
	background-image: url(../img/farm/farm3/sawshadow.png);
	margin: 145px 0 0 145px;
}
#farm3 .machinewrap .saw1,
#farm3 .machinewrap .saw2 {
	position: absolute;
	width: 95px;
	height: 95px;
	background-image: url(../img/farm/farm3/saw.png);
}
#farm3 .machinewrap .saw1 {
	margin: 140px 0 0 140px;
}
#farm3 .machinewrap .saw2 {
	margin: 140px 0 0 350px;
}
#farm3 .machinewrap .timer {
	position: absolute;
	width: 103px;
	height: 104px;
	background-image: url(../img/farm/farm3/second.png);
	margin: 125px 0 0 45px;
	z-index: 999;
}
#farm3 .machinewrap .machinebird {
	position: absolute;
	width: 44px;
	height: 49px;
	background-image: url(../img/farm/farm3/machinebird.png);
	margin: 220px 0 0 20px;
	z-index: 999;
}
#farm3 .farm3bubble {
	position: absolute;
	top: 350px;
	right: 80px;
}

以上の領域を配置して結果画像を生成する必要がある場合は、z軸を考慮する.

3 D属性の要素は、最後に作成した要素の一番上の属性を利用することができます.

完了する

画像の中心またはブロックの大きい要素については、z−indexによって直接調整することで混同を回避することができる.

結果出力

5.3. CSS : farm3 animation

#farm3 .machinewrap .timer {
	animation: rotateTimer 10000ms linear infinite;
}
@keyframes rotatetimer {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg);  }
}
#farm3 .machinewrap .saw1 {
	animation: rotateleftSaw 10000ms linear infinite;
}
@keyframes rotateleftsaw {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg);  }
}
#farm3 .machinewrap .saw2 {
	animation: rotaterightsaw 10000ms linear infinite;
}
@keyframes rotaterightSaw {
	from { transform: rotate(360deg); }
	to { transform: rotate(0deg);  }
}

変換:回転角度により時計回り、反時計回りに

回転

5.4. CSS : farm3 mobile

@media (max-width: 767px) {
	#farm3 {
		height: 500px;
		background-image: url(../img/mobile/farm/farm3/mobile_farm3_bg.png);
	}
	#farm3 .farm3Window {
		width: 82px;
		height: 56px;
		background-image: url(../img/mobile/farm/farm3/mobile_window.png);
		margin: 10px 0 0 10px;
	}
	#farm3 .machineWrap {
		width: 200px;
		height: 150px;
		top: 120px;
		margin-left: -96px;
	}
	#farm3 .machineWrap .machine1 {
		width: 191px;
		height: 149px;
		background-image: url(../img/mobile/farm/farm3/mobile_machine1.png);
	}
	#farm3 .machineWrap .sawShadow,
	#farm3 .machineWrap .timer,
	#farm3 .machineWrap .machineBird {
		display: none;
	}
	#farm3 .machineWrap .saw1, 
	#farm3 .machineWrap .saw2 {
		width: 31px;
		height: 31px;
		background-image: url(../img/mobile/farm/farm3/mobile_saw.png);
	}
	#farm3 .machineWrap .saw1 {
		margin: 50px 0 0 50px;
	}
	#farm3 .machineWrap .saw2 {
		margin: 50px 0 0 115px
	}
	#farm3 .farm3Bubble {
		position: absolute;
		width: 152px;
		left: 50%;
		margin: 0 0 0 -70px;
	}
}

も各バージョンで使用されている画像をよく把握し、ストレッチ、縮小、加算、減算操作を行うことができる.

結果出力

その他の学習

実習の場合と異なり、画像ファイルを使用する場合、画素の横、縦寸法を偶数または5で終わる方法を使用すると、レイアウトの安定性に有利である.

未解決-ソリューション

問題距離

画素の固定値で領域を位置決めする場合、実際には図示の数値が入力され、実際の動作では、画像ファイルが与えられるタイミングで、どのように位置決めされるかが興味深い.オールです...?そうですか.

学習の心得.

いつでも保存しているのに….真ん中を2時間も飛んだ速度.他の感想は思いつかない.これも開発者になったら、よくあることなのでしょうか…?

Reference

この問題について(開発ログ210713), 我々は、より多くの情報をここで見つけました https://velog.io/@xddf/개발일지-210713

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

wordpress移行

スパルタコードクラブ2週目