TIL

👍🏼 感傷的

📙 ホットは8時間かかります
👍🏼 適度に勉強する
👎🏼 適度に勉強する

🚀 n/a.ターゲット

符号化なし再生復習(-3/27)

UdemyでJavascriptレッスン(134/682)

に参加

毎日提出30日連続完成(6/30、3.26完成)

23.24はノーソン

に移行することを発見した.

明日学習カード申請

18時間チャレンジ

CSSセクションを完了し、Wikiを使用して

を復習します.

[リンクリスト]

The Web Developer Bootcamp 2021
MDN CSS Reference
Google Fonts
DREAMコードFlexbox(CSSの花)
Material Design color tool
A complete guide to flexbox
Flexbox Frogyの練習
CSS Reset
BootStrap
Semantic UI

📣 The Web Developer Bootcamp 2021: 9.97-12.120

css background

background-image: url("");
background-size: cover;
background-position: bottom;
(or)
background: coenter/40% no-repeat url(""), blue; -> 背景

google font

link -> html
font-family-> css
body { font-family: Monstserrat, sans-serif; }
main { width: 60%; margin: 0 auto; }
h1 { font-size: 3rem; margin-bottom: 0; }
h1 + h2 { margin-top: 10px; }
h1, h2, h3 { font-family: Roboto, sans-serif; font-weight: 100; }

Photo Blog CodeAlong

<span>Hello</span>
<span>World</span>
<!-- 이렇게 하면 사이에 공간 생김-->

<span>Hello</span><span>World</span>
<!-- 이렇게 하면 안 생김, jam together-->

<img src=""><img src="">
<!-- 이것도 마찬가지임-->
<img src="">
<img src="">

->でもこの問題はFlexboxで解決しました

⭐️ Responsive CSS, Flexbox

これらはすべて重要です

flexbox

注意:airbnb
1つのコンテナで空間を分割する方法.
one-dimensional layout method for laying out items in rows or columns
recent addition to css, allows to distribute space dynamically across elements of and unknown size, hence the term "flex"
display: flex; (「もしもし、あなたたちは今Flexboxです」)

flex-direction: row; (default)
flex-direction: row-reverse; (並べ替え、始点を左から右に移動)
flex-direction: column; (main-axis goes from top to bottom)
flex-direction: column-reverse;
justify-content: flex-start; (default)
justify-content: flex-end; (開始点が逆方向で、順序は変更されません)
justify-content: center;
justify-content: space-between; (0 1 1 1 1 0)
justify-content: space-around; (1 2 2 2 2 1)
justify-content: space-evenly; (2 2 2 2 2 2)
flex-wrap: wrap;
もともと、容器が小さいほどcontentは小さくなりますが、wrapを使うとnew columnは大きくなり、逆も同様です.
flex-wrap: wrap-reverse; (cross-axis逆)
align-items: flex-start; (default, align along the beginning of cross axis)
align-items: flex-end; (cross-axisの反対側から)
align-items: center; (center horizantly and vertically)
align-items: baseline; (テキストベースラインと位置合わせ、テキストサイズ、またはelement's heightが異なる場合に便利です)
aligh-content: space-between;
aligh-content: flex-start;

DREAMコードFlexbox(CSSの🌸)

义齿

float

テキストと画像の配置
float: left; 画像は左側、テキストは画像の右側(右、center)
1)flexboxは、コンテナ(ボックス)に適用される属性値を有し、各項目に適用可能な属性値がある.
2)主軸と反対の十字軸がある
コンテナには、display、flex-direction、flex-wrap、flex-flow、previty-content、aligh-tems、alig-contentが含まれます.
itemにはorder、flex-grow、flex-shirink、flex、align-sselfが含まれます
🔸 複数のボックスをすばやく作成する方法
div.container>div.item.item{}*10 + tab

<div class="container">
  <div class="item itme1">1</div> *10
</div>

Height:100%(コンテナの親高さ(body)と一致)
Height:100 vh(親にかかわらず100%の視点で)
flex-row: row;
flex-wrap: nowrap; (default)
この二つは併用する
flex-flow: row nowrap;
videify-content:品物はどのように置きますか?(中心軸)
flex-direction:順序が逆転、justival-content:順序が逆転
align-items:アイテムを配置(相対軸)
align-content:(反軸)
.item1 { order:2; } 1つ目のアイテムを2つ目に移動することで->使用しない
flex-grow: 0; (default)
flex-grow: 1; (空間全体を埋め尽くす)
flex-shirink: 0; (default)
flex-shirink: 2; (減少時に2倍減少)
flex-basis: auto; (dafault)
flex-basis: 60%; (常に60%)
align-self: center; アイテムごとに並べ替えて、1つだけ違うものにしたいなら
align-self: fix-end;
flex-basis: the initial size that element should be added into our box as and it might be with it might be a height or width depending on the main axis direction.
flex-grow: controls the amount of available space an element should take up.
flex-shrink:
max-widthとmin-widthに設定できます
div: nth-of-type(5) { flex-grow: 2; }

flex shorthand

flex: 1;

Responsive Design & Media Queries

良い参考サイト:stripe。com
@media (min-width: 800px) {h1 { color: purple; }}

building a responsive nav

Pricing panel project(Done)

Bootstrap

Bootstrap : Components, Grid System
ブートストラップの使用例:ブラックボックス
ブートストラップの使用例:Taskade