TIL

hoje15v·2022년 1월 15일
0

TIL

목록 보기
6/7
post-thumbnail

출처 : section Expense tracker | Array methods & Local Storage ) 20 mini projects - 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% 다 차지하며, 동일한 element들이 있는 경우 동등한 비율로 자리를 차지한다. ex) 2개의 elements -> 각각 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 을 적어줌으로써 두 div 각각 전체 container의 50%씩 자리를 차지한다.
text-align: center => 각각의 container 내에서 중앙 배치.

JS part

Chaining을 잘 활용하자!

코드를 더욱 간편하게 만든다.
ex) amounts의 총합과, 양수들의 합, 음수들의 합 구하기

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);

참고) outcome과 같은 경우 양수 값으로 구하고자 -1을 곱해주었다. 이후 toFixed(2)를 적용해주기 위해서는 꼭 앞의 계산한 전체 구간을 괄호처리해줄 것!

profile
A front web developer & passionate learner loving learning new things and working together with people🦋

0개의 댓글