CSS box-sizing 프로퍼티 사용법

프로그래밍/HTML, CSS 2018. 9. 30. 23:31
반응형

HTML 요소들의 크기는 Box Model을 따릅니다. 모든 요소들은 사각형 박스 형태로 페이지내에서 자리를 차지하게 됩니다.


이때 상자(Box)는  컨텐츠 영역, 패딩, 보더, 마진의 영역으로 이루어지고 CSS 에서 width 는 컨텐츠 영역 만을 말합니다. 그러므로 실제로 요소가 차지하는 width는 컨텐츠 너비 + (패딩 x 2) + (보더 x 2) + (마진 x 2) 가 됩니다.(x2 는 좌, 우를 모두 포함하기 때문입니다.)


Box Model에 대한 자세한 설명은 "CSS Box Model, Element Size, iframe Auto Resize"을 참고 하세요.


CSS에서 요소의 너비(width)가 결정되는 방식을 변경할 수 있는 프로퍼티가 box-sizing 입니다. box-sizing 에서 사용할 수 있는 값은 content-box와 border-box 가 있습니다.


- content-box : box-sizing을 사용하지 않을때의 기본값입니다. 요소의 너비(width)는 컨텐츠 영역만을 나타냅니다.

- border-box : 요소의 너비(width)는 컨텐츠, 패딩, 보더를 합한 값이 됩니다.


Box Model box-sizing


box-sizing을 border-box 로 지정하게 되면 복잡한 전체 너비의 계산을 좀더 편하게 사용할 수 있습니다.


페이지내의 모든 요소에 box-sizing을 border-box 로 지정하고 싶으면 다음 스타일을 사용하면 됩니다.


* {

    box-sizing: border-box;

}


CSS의 box-sizing 프로퍼티는 IE8부터 사용할 수 있습니다.

반응형

댓글을 달아 주세요

  • Deborah 2018.10.01 02:38 신고  댓글주소  수정/삭제  댓글쓰기

    아.. 댓글 남기셨는데.. 에피타가곡이 한국에서는 안된다고 하셔서 새로 링크를 올려놨습니다. 확인해주세요.

    • pentode 2018.10.01 09:09 신고  댓글주소  수정/삭제

      아, 오해의 소지가 있는 글이었던것 같습니다.T.T Deborah님의 글에 있는 곡들은 모두 잘 되었습니다.

      안된다고 한 것은 에피타를 휴대폰에서 들으려고 지금 사용중인 음악 서비스인 지니에서 검색을 하니까. 권리자의 요구로 서비스할 수 없다고 나온 것이었습니다.

      검색을 더 해 보니 벅스뮤직이나 뮤직메이트 등 음악 스트리밍 서비스에서도 안되더군요. 그래서 국내에서는 서비스가 안되는 곡이라고 생각한 것입니다.

      괜히 곡까지 바꾸시는 수고를 끼쳐드린것 같아 미안합니다.T.T

    • Deborah 2018.10.02 22:07 신고  댓글주소  수정/삭제

      아..그러셨군앙. 아무래도 저작권 문제때문에 그런것 같네요.

  • 청결원 2018.10.01 07:44 신고  댓글주소  수정/삭제  댓글쓰기

    한주 시작이네요~
    좋은 시작 하시고 포스팅 잘 보고 갑니다~