border 외곽선이 아닌, 내부에 적용되는 방법, box-sizing:border-box

border 외곽선이 아닌, 내부에 적용되는 방법, box-sizing:border-box

가끔 가로값에 맞춰 작업을 하다보면은 border의 픽셀 단위때문에 어긋나는 경우가 종종있죠.. 외곽선으로 먹히지 않고,

내부에 적용할 수 없을까...? 라는 고충을 많이 느꼈을 것이라고 봅니다.

이번에 보여드릴 css는 이런 문제점을 해결하기 위하여 완성된 태그입니다!!

똑같은 border 값에도 외곽이 아닌 내부로 먹히게끔 하는 것!!! 

참고로 영역 외곽이 아닌 내부에 라인이 들어가는 이 css는  ie는 8버전부터 지원한다고 합니다.

이점 숙지하시고, 활용하심이 좋을듯 싶습니다.

모바일이 가변형이다 보니, 외곽선 값을 안먹히게 하여 레이아웃을 잡는데 참으로 효율적인 태그이기도 하지요!!

우선 예로 

.box { width: 200px; height: 200px; border:10px solid #ff2200; background: #ddd;line-height: 200px; text-align: center;

 -webkit-box-sizing: border-box; -moz-box-sizing: border-box;box-sizing: border-box; }

 위와 같이 태그중 하단부분에 위치한 

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

   box-sizing: border-box;

요것들이 바로 내부선으로 변경해주는 css입니다. 직접 box-sizing 준것과, 주지 않는것을 테스트해보시면 차이를 느끼실 수 있습니다.

많은 도움되시길 바라겠습니다^^