挑戦:ツイッター木業の実施

1.ワイヤフレームの作成

Webまたはアプリケーションを開発する際、レイアウトスケルトンの描画フェーズをワイヤフレームと呼び、Webまたはアプリケーションのインタフェースを画面領域に分割して可視化して説明します.ワイヤフレームはレイアウトとプロダクト構造を表示するのに非常に簡単です.
HTMLドキュメントで画面を描かないと、JavaScriptを適用した完全版がどうなるか想像しにくいので、必ず作成してください

idとクラスの違いid 선택자:スタイルをドキュメントに適用する単一の要素class 선택자:文書にスタイルを適用するための複数の要素
重複する部分li部分はclassで記述されています.
残りの部分は1回しか現れないのでid値に設定します

2 HTML、CSS合成

HTMLは線枠に書いてあるように書けばいいです

CSS

css設定初期化
基本的には要素にborder、margin、padding値を設定できます.明らかに空の値は与えられていませんが、空の値が発生し、エラーを検索するのに多くの時間がかかりました.
これはあなたが望む設計を設計するのを妨げるので、cssを初期化するコード

を追加する必要があります.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

1色抽出
'tineye'事前に使用された色を検索するために使用される
使用しました

使用している色の値を簡単に確認できます
背景-色の値を色に基づいて指定すると、ベースカラーが変更されます.

background-color: #eaeaea;

2. textarea

<textarea name="" id="" cols="100"  rows="3"></textarea>

デフォルトではtextareaを使用する場合、行数を入力して使用できますが、画面のサイズを変更すると、テキストセルだけが縮小しないエラーが発生します.

<textarea name="" id="" style="width:85%;"  rows="3"></textarea>

このときcols="100"は"width:85%;"に変更すると、自動的にサイズを変更して使用できます.
3 flexbox


次の部分はflexboxでやってみました
同じソートを作成するには、3つの方法があります.
1番

.tweet_list {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid gray; 
  // 밑의 줄 생성
}

flexプロパティをコンテナに割り当てます.
vide-content:space-treeプロパティを指定すると、サブエレメント間に均一な間隔が表示され、両側に整列できます.
2番

.tweet_list {
  display: flex;
  }
.list_people {
  flex-grow: 1;
}

flex-growプロパティを1に設定すると、左側のサブエレメントに表示されます.
左の子孫エリオットは残りのすべての空間を占める.
(nameとcommentはdivのみで囲まれているため、class=「list people」に名前を変更しました)
3番

.tweet_list {
  display: flex;
  }
.list_date {
  margin-left: auto;
}

右側のサブエレメントにmargin-left:autoを設定すると
左の空きスペースが増えるにつれて、同じ位置合わせ効果が得られます.

3サスペンション（色切り替え）、カーソル（カーソル形状）

テキストの色は、マウスが停止している場合にのみ変更されます.
カーソルの形をジェスチャーに変えた

.list_name:hover{
  cursor : pointer;
  color : rgb(99, 205, 238);
}

挿入4アイコン

fontawesomeで無料アイコンを追加できます
受け取ったscriptラベルをhtmlに入れ、各アイコンのラベルを使用したい場所に貼り付けると、アイコンを使用できます.
同じアイコンはsync-alt検索で使用できます

<i class="fas fa-ad"></i>

5完了

div span id classをよりよく使用するためには、さらなる学習と改善が必要である.
今まで起動していませんでしたが、もうすぐjsを起動させますので、早くマスターしてほしいです!
css整理が完了したリファレンスサイト
https://studiomeal.com/archives/197
https://www.daleseo.com/css-align-right/