21.07.08

今日は短い講義と独学実習の時間がありました.結果が悪くて空っぽです.

学習内容&難点

1.cssアニメーションライブラリ

:複雑または頻繁に使用されるアニメーションパッケージを指します.
推奨サイト
https://animate.style/
htmlのlinkラベルから、このサイトに接続する方法を学びました.link hrefのurlアドレスは、Web上のファイルを取得して接続することを意味します.
コードの働き方は、以前学んだ方法に逆行するという.以前の学習ではhtmlにクラス名を書いてから始めましたが、cssでクラス名を指定し、その属性を定義したいhtmlラベルにクラス名を挿入する方法でした.

<div class="animate__animated animate__shakeX animate__slow">Example</div>

クラス名1は「これからアニメイトです」「cssファイルに存在するクラスを書きます.」馬です.クラス名2はマークされたクラス名です.クラス名3から、自分で調べればいいです.

2. mario-box

残りの講座を聞いた後、昨日選ばれて困った内容のmario-box部分の内容をもう一度聞きました.だから昨日また一つの疑問を逃した.途中で一人で実習をして、授業が終わる前に質問しました.

マリオ・コーンとマリオ・ボックスは兄弟関係です.しかしマリオ・マネーは利益値を与えずに初めて見た時に左上から現れ、マリオ・boxは硬貨の下に現れ、移動してもマリオ硬貨の下にしか移動しない.1つ目が相対的であれば,層重なりが発生するxの下で発生し移動するのだろうか.

人の親子で相対利益合併が発生し、容器の境界-topが解消され、硬貨の境界-top:100 pxしか残っていないが、利益合併は発生しなかった.そろそろ起きましょうか.

メンターは、要素のdisplayがblockの場合、どのように配置するかを理解し、https://velog.io/@ursr0706/%EB%A7%88%EC%A7%84marginの利益を統合する参照リンクを通じて学習してくださいと話しています.実は...これは質問前に自分で実習して、もう探した文章です.麻疹の合併と位置決めの面で非常に弱いことを認識した.いつもそれらの概念によって混乱が生じる.

3.単独実習

今日のレッスンはanimateサイトで行われた短い実習時間は30分程度、マリオの復習内容は30~40分、実習時間は5時間程度です.これは混乱した時間です.
特にこの2日間ずっと位置を見つめていたので、レイアウトの概念を正しく適用できませんでした.それらの部分は実習中に発見された.
移動するメニューボタンを作成し、このボタンを押すことで、練習したNAVERライフエリアを再生したり、ニュースラベルを再生したり、アニメーションシーンを再生したりすることができる.実力が足りない場合、欲しいものが多すぎるようです.
210708未完了の練習コード
要するに、次は今日の成果です.ひっきりなしにやっているのに、間違いにこれしかないなんて、ひどいですね.

▶プライオリティメニューボタン

まずメニューボタンのみが表示されるインデックスページを作成し,レシピ,ニュース,アニメーションページを接続しようとした.前回の授業で横並びメニューボタンを作っていたので、最初は縦にするために結構時間がかかったようです.メニューを作りたいのですが、マウスを置くとすぐに動いて、四面に枠さえあります.しかし,以前学んだように第3面を処理し,最後に残った面を仮想選択者last-childとして処理した結果,枠が異なり,おかしい.この部分が位置を利用しているかどうかさえ判断できない.欲しい絵が頭の中にあったのですが、叶わなかったのでとても憂鬱でした.最終的に戦略を修正し,以前に学んだ横形態メニューで色が変化する過程を変更し,遷移を利用して作成した.午前中の時間をここまでの過程に費やしました...
▶ネイバーレシピ
これは授業中の生活を通して勉強する部分です.この部分は勉強を続ける内容に加えて、前回も自分で実習した部分なので、すぐにできると思います.

まず、NAVERページの効果を見てみましょう.
画像にマウスを置くと、写真が拡大し、文字部分にマウスを置くと、文字タイトルが下線になります.
確認後、recipe.htmlが作成されました.ターゲットは、各ページにメニューボタンを作成し、その下に該当する内容を表示することで、レシピページにもメニューをコピーし、ページを作成します.しかし、結果はめちゃくちゃだった.メニューを作るのか、好きなように実施したいので、いろいろな方法が応用されています.ULタグ部分はメニューに押されているか下に押されているかfloatをしたことも位置をしたこともあります...私は概念を学んだが、適用されない.本当に問題にぶつかって、一人では解決できません.また知っていることと応用できることは別のことだと思います.精神的に崩壊した状態で、以前の記録を再検索して、修正したときに、menuをdivタグに入れて、marginを利用すればいいということに気づき、やっとその形態を作り出しました.
7月6日にNAVERで実習した時、ulliの中で2つのaラベルを作って、それぞれ画像とテキストの部分を作りました.その記憶を思い出してcssを書いた.
ただし、各aラベルはx軸で揃えなければなりませんが、動作しません.

display: inline-block;
vertical-align: middle;

授業中に習ったこのコードに従って書いたのに、どこが間違っているのか分からず、ずっとつかんでいて、時間が終わりました.まず1つのliはそのような形で出てきますが、NAVERのホームページのようにliを4つにすると、上に書いてあるように出てきます.

ulサイズを指定して、liの中にaラベルを2つ入れて、x軸で並べて、なぜ出ないのか分かりません.イメージはすべて自分で贴り付けたのです...授業が完全に終わる前に、アニメーションを一生懸命応用しましたが、応用がずっと速くなりました.
今まで失敗に終わった部分がありましたが、一人で実習で学んだのは、自分が知らない部分をよく知っています.
レイアウトソートの概念は非常に弱い.まず晩ご飯を食べてから、検討します.

※深夜探索※

ずっと座っていて、血行が悪くて、ご飯を食べて、運動をした後、間違いをもう一度探求しました.本番時間には、レシピ欄を真似して、なぜか写真と文字で別々に遊ぶ.ほっとして、以前の授業のコードを開けてみると、まずulliにaラベルを2回書いたので、そうではないかと思います.Liにはimgタグとdivタグがあります...しかし、これは根本的な問題ではないようで、まだ役に立たない.

내가 기존에 작성했던 html 코드

<ul class="recipe-lists">
	<li>
		<a href="#" class="recipe-image">
			<img src="img/potato.jpg" alt="potato-wedges" width="170" height="114">
		</a>
		<a href="#" class="recipe-best-post">
			<div>
				<span class="theme-category">레시피</span>
				<h3>오븐으로 웨지감자 만들기 간식 술안주</h3>
				<p>웨지감자 레시피 웨지감자 레시피 웨지감자 레시피 웨지감자 레시피 웨지감자 레시피 웨지감자 레시피 웨지감자 레시피 웨지감자 레시피 </p>
					<div>
						<span class="source">닉네임</span>
						<span class="date">3주일 전</span>
					</div>	
			</div>
		</a>
	</li>
</ul>

기존에 작성한 css 코드

.recipe-lists {
	width: 750px;
	height: 510px;
	margin: 10;

}

.recipe-lists li {
	width: 750px;
	height: 114px;
}

.recipe-lists .recipe-image,
.recipe-lists .recipe-best-post {
	display: inline-block;
	vertical-align: middle;
}
/*인라인 블록과 버티컬 얼라인 작동 안한다. 어디부터 잘못된 건지 모르겠다..*/

.recipe-lists li .theme-category {
	color: #ebaa00;
	font-weight: 700;
	font-size: 12px;
}

.recipe-lists li h3 {
	color: #202020;
	font-size: 13px;
}

.recipe-lists li p {
	color: #404040;
	font-size: 13px;    
}

.recipe-lists .recipe-image {
	overflow: hidden;
}

.recipe-lists .recipe-image img {
	border: solid 1px rgba(0, 0, 0, 0.3);
	transition: transform 50ms linear;
}

.recipe-lists .recipe-image:hover img {
	transform: scale(1.1);
}

.recipe-lists .recipe-best-post:hover h3{
	text-decoration: underline;
}

9日未明をじっと見つめていたが、やっとこれらのコードを起動した.

display: inline-block;
vertical-align: middle;

問題点を見つけて嬉しいです.永遠に見つからないと思っていた.
background-colorを適用して領域確認をしたいのは遅すぎます.なぜか早く思いつかなかった.色を指定して、問題が露呈しました.NAVER cssを参照してulとliでは横長を指定し,imgと兄弟関係divでは横長を指定していないことが問題となっている.そのため、liの中のdivは異なる個体のようだ.

こうして問題が発生した.背景色は問題を特定するためにランダムに指定されています...
変更された成果物

問題は、このように修復した後、今回のpタグの長さが長くなると、テキスト部分が写真を越えて少し下がり(pタグは隠してはいけませんか)、元の作業の画像オーバーフロー:hidden;これは起動できません...気が狂いそうだ.どうしてだめなの
1つ起動するとパンクします...

4.整理位置

ところで、今日は日韓が整理したポスト概念を狂ったように参考にした.渡すのを忘れて、今日の日記に記入します.
■親子間の位置属性値変更差異■

체크 사항
	1. margin-top 사용시 부모 자식 간 마진 병합 현상이 일어나는지
	2. top, right, bottom, left 속성을 사용할 수 있는지
	3. 부모의 높이 값이 없을 때 자식의 높이 값이 부모에게 영향을 주는지



부모를 고정하고 자식을 변경함

★부모가 static
	1. 자식이 static, relative면 마진 병합 o 
	2. 자식 static 제외 사용가능 
	3. 자식이 static, relative면 부모가 높이 영향 받음

★부모가 fixed
	1. 자식 전부 마진 병합 x 
	2. 자식 relative포함 3차원은 사용가능 
	3. 자식 static, relative면 자식 높이가 부모에게 영향 준다.

★부모가 relative
	1. 자식이 static, relative면 마진 병합 발생
	2. 자식 static 제외 모두 사용 가능
	3. 자식 static, relative면 자식이 부모 높이에 영향 줌

★부모가 absolute
	1. 자식 전부 마진 병합 x
	2. 자식 static 제외 모두 사용 가능
	3. 자식 static, relative는 자식 높이가 부모에게 영향 줌


위와 같은 내용이지만 자식을 고정했을 때의 결과

자식을 고정하고 부모를 변경함

★자식이 static
	1. 부모가 static, relative면 마진병합 발생 
	2. 부모 모두 불가능 
	3. 자식이 부모 모두에게 높이 영향 준다

★자식이 fixed
	1. 부모 모두 마진병합 x 
	2. 부모 모두 top 가능 
	3. 자식이 모든 부모에게 높이 영향 주지 못함

★자식이 relative
	1. 부모가 static relaive면 마진병합 발생 
	2. 부모 모두 top가능 
	3. 자식이 모든 부모 높이 영향 줌

★자식이 absolute
	1. 부모 모두 마진 병합 x 
	2. 부모 모두 top사용가능 
	3. 자식 높이가 모든 부모에게 영향 안줌


■형제 지간 레이어 겹침 현상이 일어나는지■
(겹칠 시 위에 올라오는 레이어를 괄호 안에 표기)

첫째가 static일 경우 레이어 겹침 발생 x x x x
첫째가 fixed일 경우 레이어 겹침 발생 o(첫째) o(둘째) o(둘째) o(둘째)
첫째가 relative일 경우 레이어 겹침 발생 x x x x
첫째가 absolute일 경우 레이어 겹침 발생 o(첫째) o(둘째) o(둘째) o(둘째)

解決策

display、利益合併、positionという概念が一番混乱しています.概念を見れば、もっと独自の応用過程を試してみるべきだ.GoogleとYouTubeも勉強と実習を続けます.
->夜修正後後期:コードを書き間違えたせいか…図面の设计をよくして、考えながらコードを书きます.

感想

一人で実習する時間はあまりにも惨めで、気持ちが悪い.座ったままやっていたら、結局欲しい半分もやっていなかったし、何もしていなかったので、時間をつぶしたような気がします.足りないところは本当に多いと思います.
まずログを書き、書き終わったら位置と表示ブロックを別途勉強します.今日の実習で出会った部分は本当に重要で、これからこの山を渡れないともっとつらいので、今から頑張ります.