padding의 크기 증가 현상을 막는 box-sizing

안녕하세요 지식마블입니다. 

#padding 사용법

padding 속성을 사용하는 방법은

padding: 위 우 아래 좌;

padding: 위 [좌, 우] 아래;

padding: [위, 아래] [좌, 우];

padding: [위 우 아래 좌];

이렇게 4가지가 있죠. 

무슨 말이냐구요? 

.box1 {

padding: 10px 20px 30px 40px;   /*위 10픽셀, 오른쪽 20픽셀, 아래 30픽셀, 왼쪽 40픽셀의 공간으로 패딩이 생깁니다 *

}

그럼,

padding: 10px 20px 40px;

으로 하면 어떻게 될까요?  

위 10픽셀, 오른쪽, 왼쪽 각각 20픽셀, 아래 40픽셀의 패딩이 생기는거죠. 이해되셨죠? 

근데, 문제는 말이죠, 

.box1 {

width: 100px;

height: 100px;

background: yellow;

padding: 20px;

}

라고 css를 설정을 하여, 가로세로 모두 100픽셀인 공간으로 싸고,

그리고 이 공간 안쪽에 각각 20픽셀의 안쪽 여백을 둔  콘텐츠를 만들려고 했는데, 

위에서처럼 작성하면, 실제로는 가로가 100픽셀이 아닌, 140픽셀, 세로도 100픽셀이 아닌 140픽셀이 되는 공간이 만들어진다는 거죠. 

이는 패딩의 크기 증가 현상이라는 성질때문에 그렇습니다. 

그럼, 원래 의도했던대로 가로 세로 100픽셀 공간을 만들어주기 위해선 이 패딩의 크기증가현상을 미리 계산하여 가로세로 폭을 지정해줘야 하는데 너무 귀찮잖아요? 

이럴 때 쓰는 것이 바로! 

box-sizing: border-box;

입니다. 

즉, 

.box1 {

width: 100px;

height: 100px;

background: yellow;

padding: 20px;

box-sizing: border-box;

}

라고 작성하면, 패딩의 크기증가현상을 고려할 필요없이, 원래 의도한 사이즈대로 공간이 만들어진다는 사실! 

너무 신기하죠? 

웹프로그램이 공부하면서 하나씩 알아가는 재미가 쏠쏠하군요~! 저같은 초보이신 분들에게 도움이 되셨길 바라며~ 빠이~!