CSS

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. 감사합니다!! ^^
  2. 강의 감사드립니다!!
  3. 임지호
    기존에 엘리먼트의 크기를 지정할 때 기준은 컨텐츠 기준이였다. 그래서 보더나 패딩값이 더해지면 개발자가 예측한 값과 다르곤 했다.
    그래서 box-sizing:border-box라는 속성이 탄생했는데 이렇게 하면 보더값까지 계산해서 엘리먼트 크기를 정한다.
    요새는 아예 모든 태그에 이 속성을 지정하고 코딩을 시작하는 경우가 많다.
  4. 무한감사
    감사드립니다.

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

    고맙습니다.
  5. 박상민
    감사합니다
  6. sssssqew
    강의 잘 듣고 있습니다. 매번 감사드립니다.
  7. hokororo
    강의 감사합니다
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기