[레딧 클론] box-sizing: border-box ? (GlobalStyle로 여백 없애기)

1. 💻 들어가며

프리온보딩 과제를 복습하면서 style-components와 react-router-dom으로

레이아웃을 그리면서 발생한 문제를 해결한 포스팅입니다.

---

2. ❌ 에러

      

      

      

    
    

      <javascript />
    
const SidebarContainer = styled.div`
  width: 300px;
  height: 100vh;
  background-color: #657c65;
`;

위 코드처럼 별도로 margin 이나 padding 없어도

자동으로 여백이 생김

 

상단, 좌측 여백

---

3. ⚠️ 에러 원인 ?

The default box sizing is content-box, which means padding and borders are added to the overall box.

출처 : Learn CSS! (https://web.dev/learn/css/box-model/)

 

 

box-sizing의 디폴트 값은 content box입니다.

따라서 padding box와 boder box 때문에 여백이 생깁니다.

---

4. ✅ 에러 해결 

      

      

      

    
    

      <javascript />
    
// src/styles/GlobalStyle.ts
import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
 `;

GlobalStyles에 margin, padding 0 

box-sizing: border-box 설정을 함으로써 해결할 수 있습니다

GlobaStyle 적용후

---

5. 🙇‍♂️ 참고자료

• box-sizing 

박스(box) 모델

• styled-components - createGlobalStyle

styled-components: API Reference