Expense Tracker (1) div 중간 선

 

 

일단 지금은 여기까지 만들었다 ㅋㅋㅋ

몇가지 내용들을 정리해야할 것 같아서 포스트를 써봄봄봄..

 

 

 

저기 income과 expense total 상자 정중앙에 라인을 어떻게 넣었냐 하면..

 

 

우선 HTML

 <section class="in-ex-total">
        <div class="income-container">
          <h3>Income</h3>
          <h2 id="income" class="income">+$0.00</h2>
        </div>
        <div class="expense-container">
          <h3>Expense</h3>
          <h2 id="expense" class="expense">-$0.00</h2>
        </div>
</section>

바깥에 in-ex-total로 둘러싸고

income-container <div> 하나와 expense-container <div> 하나가 있다

(지금 생각해보니 굳이 둘의 class를 다르게 할 필요는 없었던 것 같다.......................................)

 

무튼 in-ex-total 속 이 두 div가 정확히 반반씩 너비를 차지하고

중간에 border 선을 넣어서 구획을 주고 싶다 !

 

 

 

 

.in-ex-total {
  background: #fff;
  width: 300px;
  padding: 10px;
  box-shadow: var(--box-shadow);
  display: flex;
  justify-content: space-between;
}

.income-container,
.expense-container {
  flex: 1;
  text-align: center;
}

.income-container {
  border-right: 1px solid #dedede;
}

 

parent Element에 해당하는 in-ex-total에 display:flex, justify-content를 주고

child Element에 해당하는 income-container와 expense-container에 flex:1을 준 다음

왼쪽에 있는 income-container의 border-right을 주면

정중앙에! 딱! 선이 생긴다!