css 박스 모델 구조 이해하기
- 웹 언어 배우기/CSS
- 2018. 11. 17. 09:00
css 박스 모델은 홈페이지에서 중요한 요소 중 하나로 뽑히고 있습니다. 구조를 이해한다면 쉽게 사용할 수 있습니다. 좀 더 자세히 어떤 점에서 중요한지 하나씩 알아보겠습니다.
웹 브라우저 크롬으로 알아보는 박스 모델
위 사진은 크롬에서 지원해주는 박스 모델입니다. 파란색으로 되어 있는 곳이 html 부분(content)입니다. border 영역을 기준으로 안쪽에 위치하는 영역을 padding, 바깥영역을 margin으로 구분하고 있습니다. 좀 더 자세히 알아볼까요?
테두리 안쪽 영역, padding
위 사진은 border 속성만 넣은 예제입니다. 여기에서 테두리 안에 있는 영역을 어떻게 하면 움직일 수 있을까요? 바로 padding에 값을 주면 됩니다.
한가지 예를 들어보겠습니다. 다음과 같이 코드를 작성했습니다.
<style>
div{border:1px solid gray;padding:20px}
</style>
<body>
<div>콘텐츠 영역</div>
</body>
바로 이렇게 하면 됩니다.
테두리 바깥 영역, margin
이것 역시 예제로 보여드리겠습니다.
<style>
div{border:1px solid gray;padding:20px;margin:100px}
</style>padding 영역과 margin 영역은 top, botton, left, right 속성값으로 지정할 수 있습니다.
content 영역은 width, height 속성값으로 지정할 수 있습니다.
