css 박스 모델 구조 이해하기

css 박스 모델은 홈페이지에서 중요한 요소 중 하나로 뽑히고 있습니다. 구조를 이해한다면 쉽게 사용할 수 있습니다. 좀 더 자세히 어떤 점에서 중요한지 하나씩 알아보겠습니다.


웹 브라우저 크롬으로 알아보는 박스 모델


크롬_박스모델


위 사진은 크롬에서 지원해주는 박스 모델입니다. 파란색으로 되어 있는 곳이 html 부분(content)입니다. border 영역을 기준으로 안쪽에 위치하는 영역padding, 바깥영역margin으로 구분하고 있습니다. 좀 더 자세히 알아볼까요?


테두리 안쪽 영역, padding


박스모델


위 사진은 border 속성만 넣은 예제입니다. 여기에서 테두리 안에 있는 영역을 어떻게 하면 움직일 수 있을까요? 바로 padding에 값을 주면 됩니다.


css 테두리 효과를 주는 border 속성



한가지 예를 들어보겠습니다. 다음과 같이 코드를 작성했습니다.


<style>
   div{border:1px solid gray;padding:20px}
</style>
<body>
   <div>콘텐츠 영역</div>
</body>

박스모델_padding


바로 이렇게 하면 됩니다.


테두리 바깥 영역, margin


이것 역시 예제로 보여드리겠습니다.

<style>
   div{border:1px solid gray;padding:20px;margin:100px}
</style>

padding 영역과 margin 영역은 top, botton, left, right 속성값으로 지정할 수 있습니다.

content 영역은 width, height 속성값으로 지정할 수 있습니다.

이 글을 공유하기

댓글(2)

  • 2018.12.01 17:15 신고

    일이년에 한번씩 스킨 수정할때마다 골머리를 앓게만드는 CSS네요
    날잡고 제대로 공부해보고 싶긴 합니다

    • 2018.12.01 17:43 신고

      CSS는 끊임없이 공부해야 하는거 같습니다. 배울게 너무 많아서요..

Designed by JB FACTORY