2parts Property and Selector

property

property-name : value;
※命名規則
- 空白なし、ハイフンでつなぐ
- all small alphabet 大文字はダメ！

selector

ここで選択値　h1
- # id
- .class

h1{
    property-name: value;
}

box model

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model
参照

padding -> 増やしてもContents内容、箱のサイズが伸びるだけ
margin -> 箱の内容物はそのままで、移すだけ

順序は時計周り
↑→↓←
上右下左
Up Right Down Left

padding: 20px 10px'
->

element.style {
    margin: 20px 10px;
    margin-top: 20px;
    margin-right: 10px;
    margin-bottom: 20px;
    margin-left: 10px;
}

https://www.w3schools.com/css/tryit.asp?filename=trycss_inline-block_span1
- inline block
-□□□　←重なって配置すること
- block
- □
- □
- □
- 要素が存在するところには配置できない
- Inline
- 全てのpropertyを削除する

browser CSS初期化

browserが持っているdefaultを相殺するため、

height : 100%;
margin :0;
padding : 0;

position

※static(default)の場合、top,bottom,left,rightの属性は効かない
※英語が翻訳間違った
'position:absolute' looks for the closest 'relative' parent
looks for the closest relativeのpositionを持っている一番近い親を基準としてabsoluteのものが配置される

flex

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Flexbox%EC%9D%98_%EA%B8%B0%EB%B3%B8_%EA%B0%9C%EB%85%90
APIのみ熟知してもよい＞A<

flexは親で設定して子の配置を変える
display: flex;

flex-direction: row;(default)の場合
justifyは水平
alignは垂直
だが、flex-direction: column;になったら、逆の設定になる
justifyは垂直
alignは水平

練習ゲーム
http://flexboxfroggy.com/

Pseudo-selector 가상셀렉터 疑似要素。。？

ムズううううう
https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-elements <- 英語と韓国語では[]そうですけど、
日本は属性セレクタと呼ぶように見える
http://www.htmq.com/csskihon/005.shtml

/* 1. */
selector::pseudo-element {
  property: value;
}
/* 2. */
input[type="password"]{
}

/* 3. */
  .box:nth-child(3n+1){
    background-color: #126411;/*緑色*/
  }

3の結果はこんな風に
文字通り3の倍数目の箱が緑色になることを確認できる。

input + .className 兄弟の
input > .className 直系のもののみ(下は反映できない) not direct child

css-states

擬似クラスというように見えるが、こちは日本表記がちょっと難しいそう

.box:hover{
}
.box:active{
}
/*等*/
}

Transitions animate

Transitions enable you to define the transition between two states of an element.
Transitionsc statesの間で正義できるもの！
Transitions animate the properties that change between one state the another state.

transform:

animation

@keyframesでanimationを定義する

@keyframes slidein {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

CSS Basic