✔ TODAY

今日は粘り強くcssの基礎を築いた.Kakaoの友人リストとNAVERホームページ実習を行い、復習兼個人好みでカスタマイズ.😎

✔学習内容

1.仮想選択プログラム

任意の動作とルールに基づいて、選択した要素に設計を適用します.

1）行動関係

a:link{ color: red;}
/*방문한 적이 없는 링크에 대해서 디자인을 적용할때 사용*/

a:active{color: blue;}
/*마우스를 클릭했을때의 상태를 정의*/

a:hover{ color: pink;}
/* 마우스 올렸을때 */

input:focus{border: solid red 10;}
/* input 입력창의 {선 굵기}*/

2）ルール関連

li:first-child{color: red;}
/*리스트 첫번째 줄 색상을 */
li:last-child{color: blue;}
/*리스트 마지막 줄 색상을*/
li:nth-child(2){color: gray;}
/*리스트 2번째 줄 색상을*/
li:nth-child(2n+1){color: pink;}
/*리스트 홀수 줄 색상을*/
li:nth-child(2n){color: green}
/*리스트 짝수 줄 색상을*/

3)before & after

li:before{ content: "+++";}
/*마크와 테그사이(비포) 콘텐츠속성사용해서*/
li:after{content: "---"}
/*글자와 닫힌테그사이에 존재 글자를 중심으로 앞뒤 강재적으로 삽입을 시킬수 있음/*/

プロジェクトフォルダの作成

プロジェクトフォルダの設定
「フォルダパスに注意」-入力した値は、ファイルの場所によって異なります.

1つのプロジェクトでファイルタイプ別に分類

ホーム>Webホスト>無料ホスト
ftp-成果物をサーバにアップロードするトンネル操作を逆方向に実行

ファイル管理-無料FTPクライアント
💥 生成されたWebホストとファイルzillaは接続できません...Googleメソッド(ファイアウォール、接続時間、管理者設定など)が解決しました.
一緒に受講した方のアドバイスで、サイトで1:1の問い合わせをしました.理由は
=1)FTP接続の許可がWeb管理設定に設定されていません.
2)複数回の試行(…)IPが切断されたが、幸いにも会社側はすぐに彼を釈放した.

css実習

css実習は2種類の教育実習/復習実習を編成した.結果はスクリーンショットで、コードは羽の中心にリンクされたリンクです.

1）ココア友達リスト

kakao好友リストhtml
ココアの友達リスト

kakao朋友custom html
Kakaoの友達Custom css
bodyは、背景画面を飾るためのcss属性を提供する.

background-image: url(#); 
background-repeat: no-repeat; 
background-position: center; 

htmlに色を単独で与えるより
「スケート」の復習のために
classでは、nameの各色を色>idでスケール*

.friend_lists .friend_list a .friend_infor .friend_name{
	fount-size: 17px;
	color: #000000;

#sakuname{color: #f3c5cf;}
#jwname{color: #d9598c;}
#cyname{color: #A7E0E1;}

floatプロパティを使用して、実際のデータのように見えます.

.friend_lists .friend_list a .friend_thumbail {
	border: solid 2px gray;
	border-radius: 20px;
	float: left;

課外復習の新しい理解の属性
float画像と文字が一緒であれば、画像の位置(?)を設定します.
これはNAVERの復習で知った属性で、現在グーグルだけでは概念の詳細な理解が不足しており、さらに学ぶ必要がある.

2）NAVERホームページ

オンラインカリキュラム実習
NAVERカリキュラム実習css
💥に注意
css速達値を記入するときは、スペースに注意してください.

.living-lists.living-item a {
	color: #000000;
	text-decoration: none;

cssが正常に適用されないため...絶望したけど、
あとでうまく書けなかった

NAVER復習Customhtml
NAVER復習Customcss
レッスン内容をベースに、NAVERホームページと同じように最大限の努力をします.

NAVERホームページの実際のコードに基づいて作成します.

liの間にbrを挿入するのはきれいにするためです...

上記のカリキュラム実習とは異なり、サムネイルを左に置く方法を探したときに分かる属性float>kakao list復習も適用されます.

✔学習内容の難点または未解決

cssが

htmlにうまく適用できない大部分の原因は、スペルやスペースなどの文法に慣れていないため、長い時間がかかるからです.

履歴書の写真とサムネイルは、希望する位置と文字との距離に設定されていません.

が望む仮想選択者効果は正しく見られなかった.
-配置とイメージは多いが、能力が足りない...疲れた.

✔ソリューションの作成

時間をかけて、一つ一つ見て、問題の所在を確認することができます.コメントをエンコードする必要がある理由...

画像を一番欲しい場所に置くために,このサイトの実際のcssを調べた.適切なプロパティが見つかりました

仮想セレクタ効果の問題は開発ログを書く前から知っていた.選択者と仮想選択者をうまく区別できません...(購入した教材でコンセプトをさらに構造化!)

学習の心得.

実习の时に心が起きました.あなたのおかげで、私はよく復習することができます.やっぱり星を追うのがいいこれからも追星を利用して練習します.△おかげさまで、今日は一日中…実習だけ…
授業中に学んだサイトコードを見る方法で、サイトが望む色を選ぶことができ、実際の生活に役立ちます!