TIL

4242 ワード
text-transform Flex Letter Spacing Chaining テキストリンク
出典:Section Expense Tracker|Array MethodsとLocal Storage)20個のミニプロジェクト-Brad Traversy
CSS part
letter-spacing
字間を合わせる.(傾斜ピッチ)
h1{letter-spacing : 1px;}
text-transform
textの形態を大文字、小文字などに変換します.
h4{text-transform : uppercase;}
h2{text-transform: capitalize;} // 문자의 가장 앞글자 대문자화
flex : 1
flex:1の意味は:
flex-grow:1;
flex-shrink:1;
flex-basos:0;
containerは100%を占め、同じ要素があれば同じ割合で位置を占めます.ex)2つの要素->それぞれ50%を占める;
ex)
HTML)
<div class='inc-exp-container'>
	<div>
    	  <h4>Income</h4>
          <p class="money plus">+$0.00</p>
        </div>
        <div>
          <h4>Outcome</h4>
          <p class="money minus">-$0.00</p>
        </div>
</div>
CSS)
.inc-exp-container{	
	display : flex;
    justify-content : space-between;}
.inc-exp-container > div{
	flex : 1;
    text-align : center; }
flex:1,2つのdivはそれぞれ容器全体の50%を占めている.
text-align:center=>各コンテナの中央に配置します.
JS part
チャイニングを活用しましょう!
コードをより簡単にします.
数量の和、正数の和、負数の和を求めます
const amounts = [100, -200, 300, -400, 500]

const total = amounts.reduce((acc, item)=> acc += item, 0).toFixed(2);
const income = amounts.filter((item) => item>0).reduce((acc, item)=> acc+= item, 0).toFixed(2);
const outcome = (amounts.filter((item) => item<0).reduce((acc, item)=> acc+= item, 0)*-1).toFixed(2);
参考)結果が同じ場合、正の値を求めるために-1を乗じます.その後toFixed(2)を適用するためには、必ず前に計算した区間全体に括弧処理を行います!
日間チャレンジ
関数で始まる