생활코딩

Coding Everybody

코스 전체목록

닫기

box-sizing

box-sizing은 박스의 크기를 화면에 표시하는 방식을 변경하는 속성입니다. width와 height는 엘리먼트의 컨텐츠의 크기를 지정합니다. 따라서 테두리가 있는 경우에는 테두리의 두께로 인해서 원하는 크기를 찾기가 어렵습니다. box-sizing 속성을 border-box로 지정하면  테두리를 포함한 크기를 지정할 수 있기 때문에 예측하기가 더 쉽습니다. 최근엔 모든 엘리먼트에 이 값을 지정하는 경우가 늘고 있습니다. 

 

예제 - box-sizing.html

<!doctype html>
<html>
<head>
    <style>
        *{
            box-sizing:border-box;
        }
        div{
            margin:10px;
            width:150px;
        }
        #small{
            border:10px solid black;
        }
        #large{
            border:30px solid black;
        }
    </style>
</head>
<body>
       <div id="small">Hello</div>
       <div id="large">Hello</div>
</body>
</html>

댓글

댓글 본문
  1. AgainstartJH
    2022년 11월 16일 수요일 학습완료!
  2. 헤밍웨이
    220823 궁금증이 풀리니 기쁩니다 :)
  3. vigorously27
    2022년 7월 21일 목요일 학습완료!
  4. 22/03/16
  5. 드림보이
    2021.11.13. box-sizing 파트 수강완료
  6. 빵야빵야
    영상을 보니 이해가 잘 되네요! 정리가 잘 된 글이 있네요 공유해봅니다
    https://mong-blog.tistory.com......%B1
  7. neal
    2021.09.23 완료
  8. 파괴왕파파괴
    *{
    box-sizing: border-box;
    }

    신기하네요
  9. 전예진
    210728
  10. 두드
    2021.07.22 완료
  11. jeisyoon
    2021.06.22 box-sizing - OK
  12. choi
    완료
  13. 오... 일일이 계산해서 더하고 빼고 하는건줄 알았는데 쉬운 방법이 있네요.. 역시 나보다 똑똑한 사람들이 만든 언어..
  14. yogg
    box-sizing: border-box!!
  15. Minint
    2021.03.21
  16. 임태경
    완료했어요 감사합니다
  17. 스마일가이
    2021.01.26 완료 감사합니다
  18. datsciseol
    20210116
  19. 201215
  20. Seunghyuk Rodrigo Kim
    감사합니다.
  21. 켄드릭
    2020년 11월 03일(화) 16:05 1차 수강완료
  22. 박병진
    2020.10.04
  23. 콜라
    20200927완료
  24. 김성곤
    20200722 감사합니다!
  25. jaehyunlee
    완료
  26. 한강
    *{
    box-sizing: border-box;
    }
    200603 감사합니다~^^!
  27. 그래난쭈구리
    감사합니다.
  28. 무지개반사
    완료
  29. Blanc
    2020.01.05
  30. alpha
    191002 수강완료
  31. 태태
    수강완료
  32. 치디우기
    수업 완료 - 19/8/29
  33. 다나가
    이어서 시작!!!!
    19/08/06 - 완료
  34. FIRE
    2019 0729 완료
  35. 감사합니다 진짜루
  36. 김주엽
    수업완료
  37. 완료 감사합니다!
  38. 박지성
    올려주시는 수업 너무 유익하다고 생각되기 때문에
  39. 노혜주
    완료
  40. 김경모
    왜 내가 학원에 있었을 때는 안가르쳐 주는걸까? ㅜ
  41. lygon
    2019-03-02 완료
  42. Alex
    감사함돠!!!!!!!!!!! 퍄퍄퍄!!
  43. 김민영
    완료!
  44. jerry
    마지막에 들어주신 예시가 너무 인상깊어서 헷갈렸던 margin과 padding의 개념이 바로 이해됐어요.
    게다가 잊지도 않을 것 같네요ㅎㅎ
    너무 감사합니다!
  45. mpk20001@naver.com
    정말 감사합니다 복받으실거예요
  46. SlowStarter
    감사합니다!
  47. luxuryJS
    도움이 많이 됩니다.. 초심으로 돌아가는 기분이네요
  48. 스페이스몽키
    감사합니다! ㅎㅎ
  49. 옥슬이
    깜싸합니따 또움이많이되었씁니따~~~~~
  50. 윤승호
    아 많은 도움되었습니다 감사합니다!.
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기