인프런 커뮤니티 질문&답변

위쪽이 화면 크기가 줄어들기 전 아래쪽이 화면 크기를 줄이고 난 후 입니다. 왜그럴까요...?

<div className="card" onClick={() => {setColpop(colpop + 1)}} style={{background: "orange", justifyContent:'center', display: "flex"}}>
<h1 style={{color: 'white'}}>콜팝</h1>
</div>
<div className="card" onClick={() => {setColpop(colpop - 1)}} style={{background: "orange", justifyContent:'center', display: "flex", height: "30px"}}>
<h1 style={{color: 'white'}}>
-
</h1>
</div>
</div>
<TableContainer style={{display: "block"}}>
<Table size='lg'>
<Thead style={{justifyContent: "center"}}>
<Tr>
<Th>품목</Th>
<Th>수량</Th>
<Th>금액</Th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td>타로</Td>
<Td>{taro}</Td>
<Td>{taro*1000}</Td>
</Tr>
<Tr>
<Td>주먹밥</Td>
<Td>{jumuk}</Td>
<Td>{jumuk*1500}</Td>
</Tr>
<Tr>
<Td>콜팝</Td>
<Td>{colpop}</Td>
<Td>{colpop*1000}</Td>
</Tr>
<Tr>
<Td>총계</Td>
<Td>-</Td>
<Td>{colpop*1000 + taro*1000 + jumuk*1500}</Td>
</Tr>
</Tbody>
</Table>
</TableContainer>

<div className="cardstyle" style={{display: "block"}}>
<div className="card" onClick={() => {sendOrder()}} style={{background: "red", justifyContent:'center', display: "flex"}}>
<h1 style={{color: "white"}}>주문</h1>
</div>
<Link href="/orderAdmin">
<div className="card" style={{background: "red", justifyContent:'center', display: "flex", height: "30px"}}>
<h1 style={{color: 'white'}}>
관리자
</h1>
</div>
</Link>