생활코딩

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. 켄드릭
    2020년 11월 03일(화) 16:05 1차 수강완료
  2. 박병진
    2020.10.04
  3. 콜라
    20200927완료
  4. 김성곤
    20200722 감사합니다!
  5. jaehyunlee
    완료
  6. 한강
    *{
    box-sizing: border-box;
    }
    200603 감사합니다~^^!
  7. 그래난쭈구리
    감사합니다.
  8. 무지개반사
    완료
  9. 2020.01.05
  10. alpha
    191002 수강완료
  11. 태태
    수강완료
  12. 치디우기
    수업 완료 - 19/8/29
  13. 다나가
    이어서 시작!!!!
    19/08/06 - 완료
  14. FIRE
    2019 0729 완료
  15. 감사합니다 진짜루
  16. 김주엽
    수업완료
  17. 완료 감사합니다!
  18. 박지성
    올려주시는 수업 너무 유익하다고 생각되기 때문에
  19. 노혜주
    완료
  20. 김경모
    왜 내가 학원에 있었을 때는 안가르쳐 주는걸까? ㅜ
  21. lygon
    2019-03-02 완료
  22. Alex
    감사함돠!!!!!!!!!!! 퍄퍄퍄!!
  23. 김민영
    완료!
  24. jerry
    마지막에 들어주신 예시가 너무 인상깊어서 헷갈렸던 margin과 padding의 개념이 바로 이해됐어요.
    게다가 잊지도 않을 것 같네요ㅎㅎ
    너무 감사합니다!
  25. mpk20001@naver.com
    정말 감사합니다 복받으실거예요
  26. SlowStarter
    감사합니다!
  27. luxuryJS
    도움이 많이 됩니다.. 초심으로 돌아가는 기분이네요
  28. 스페이스몽키
    감사합니다! ㅎㅎ
  29. 옥슬이
    깜싸합니따 또움이많이되었씁니따~~~~~
  30. 윤승호
    아 많은 도움되었습니다 감사합니다!.
  31. 푸른하늘
    11일차 공부 감사합니다
  32. 이경일
    width값은 border 안의 element의 크기를 지정한다.
    box-sizing: border-box; 명령을 내리면
    width값은 border 테두리까지의 크기를 의미하게 된다.
  33. 이성준
    으앙 너무 어렵다
  34. 오빠는다르다
    감사합니다~!!
  35. MunBe
    <!--box-sizing-->
    <!--box-sizing은 박스의 크기를 화면에 표시하는 방식을 변경하는 속성입니다. width와 height는 엘리먼트의 컨텐츠의 크기를 지정합니다. 따라서 테두리가 있는 경우에는 테두리의 두께로 인해서 원하는 크기를 찾기가 어렵습니다. box-sizing 속성을 border-box로 지정하면 테두리를 포함한 크기를 지정할 수 있기 때문에 예측하기가 더 쉽습니다. 최근엔 모든 엘리먼트에 이 값을 지정하는 경우가 늘고 있습니다. -->
    <!--width의 값은 하얀색 내용 부분이다. 기본 속성은 content-box-->
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <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>
  36. jimmyzip
    *{box-sizing : border-box;}
  37. 오들오들오드리
    월요일 아침에 강의 완료! 감사합니다!
  38. illliilllliillliii
    감사합니다
  39. 세븐나이츠
    좋은 강의 감사합니다~
  40. 한ㅎㅅ
    익스프로러7에서는 지원 안되는 속성이라...
  41. 쿠쿠다스
    감솨영~
  42. 14번째
    5.19.
  43. 위에 코드 복사붙여넣기 해보세요 타이핑 시 세미콜론이나 괄호 등 기호가 빠질 수 있어요
    대화보기
    • php가 첫취업?
      왜 같은 코드를 입력했는데;;결과가 다를까요 ㅜㅜ?
    • funlife
      감사합니다.
    • 코딩왕될래
      아 이래서 그랬던거구나!!!
    • sayz
      감사합니다!! ^^
    • 강의 감사드립니다!!
    • 임지호
      기존에 엘리먼트의 크기를 지정할 때 기준은 컨텐츠 기준이였다. 그래서 보더나 패딩값이 더해지면 개발자가 예측한 값과 다르곤 했다.
      그래서 box-sizing:border-box라는 속성이 탄생했는데 이렇게 하면 보더값까지 계산해서 엘리먼트 크기를 정한다.
      요새는 아예 모든 태그에 이 속성을 지정하고 코딩을 시작하는 경우가 많다.
    • 무한감사
      감사드립니다.

      강의들을 친절히 공유해주신 덕분에, 계속해서 꾸준히 배워나갈 수 있게 되었습니다.

      고맙습니다.
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기