[CSS] Box-sizing을 어디에 사용하는데? : 패딩을 넣었는데 화면이 잘릴때!

인스타그램 클론코딩을 하고 있었다.

 

헤더에 position: fixed;를 주고, 헤더 크기가 작길래 width: 100%를 주었더니

.header{
    height: 60px;
    width: 100%;
    padding: 0 16px;

    /* ...생략... */
    position: fixed;
    top: 0;
    left: 0;
}

아니 글쎄, 헤더 이미지가 잘려버리는것이다.

margin을 줘도 먹지않았다..

 

이럴때 쓰는게 바로 box-sizing 이라는 것인데,

어떻게 해야하는지 머리를 쥐어뜯다가 알아낸 내용이라 공유한다.

 

---

👇Box-sizing 속성에 대한 설명 정리 글은 여기, 내 블로그에 포스팅되어있다.👇

https://s2ej1n.tistory.com/35

[CSS] Box Sizing 속성

---

나의 경우는 헤더 양 옆에 패딩 16을 준 경우인데,

이 16만큼 일정하게 밀렸다.

 

아마 내가 box-sizing 속성을 따로 지정하지 않아

기본 값이 content-box로 지정되어있어서 전체 너비가 100%+16px 가 된것 같았다.

 

그래서 콘텐츠가 아니라, 테두리를 기준으로 너비를 100%로 잡도록

box-sizing : border-box;

를 지정해주었다.

문제 해결~

.header{
    height: 60px;
    width: 100%;
    padding: 0 16px;

    /* ...생략... */
    position: fixed;
    top: 0;
    left: 0;
    box-sizing: border-box;
}

---

Box-sizing을 처음 배웠을 때, 저걸 어디다 쓰나.. 했는데 이런 상황에서 쓴다는걸 알아버렸다.

화면이 밀려서 잘릴때!!

앞으로도 유용하게 쓸듯.