박스 모델은 주로 레이아웃을 적용하기 위해 사용되는 개념이다. HTML에서 표현되는 컨텐츠들은 모두 사각형의 영역으로 표현될 수 있다. 그래서 박스모델이라 표현한다. 레이아웃을 적용하기 위해서는 어떤 컨텐츠를 하나의 블록으로 묶고 이 블록으로 표현된 컨텐츠들의 위치를 어떻게 지정해야 하는지가 명확해야 할 것이다. 박스모델이라는 것은 특별한 CSS의 속성을 적용하겠다는 의미가 아니라 <div></div>태그나 <span></span> <p></p>태그를 이용해서 한꺼번에 위치를 변경하고 싶은 컨텐츠를 묶어서 표현하겠다는 의미이다.
다만 이 사각형의 영역 안에 정의된 컨텐츠들의 여백이나 간격들을 조절할 수 있어야 겠다. 또 컨텐츠에 테두리선도 표현할 수 있어야 할 것이다.
박스모델 관련 속성
선의 모양 : border-style
아래와 같이 정의하고 CSS속성을 정의한다
실행하면 다음과 같은 결과가 나타난다.
선의 굵기 : border-width
선의 색상 : border-color
선과 컨텐츠 사이의 간격 : padding
padding 속성을 정의하면 컨텐츠와 선 사이의 위, 아래, 왼쪽, 오른쪽 간격을 동일하게 적용하겠다는 의미이며 각각 정의하고 싶은 경우 padding-left, padding-right, padding-top, padding-bottom을 정의하면 된다
컨텐츠 주위 여백 : margin
padding과 마찬가지로 margin으로만 정의하면 컨텐츠 주위의 위, 아래, 왼쪽, 오른쪽 여백을 동일하게 적용하겠다는 의미이며 각각 정의하고 싶은 경우 margin-left, margin-right, margin-top, margin-bottom을 각각 정의하면 된다
다음과 같이 CSS속성을 적용할 컨텐츠를 정의한다. “border-style”을 테스트한 문서의 위쯤에 정의하면 된다.
CSS를 다음과 같이 정의한다.
실행하면 다음과 같은 결과가 나타난다. 그런데 분명 “red” 박스와 “blue”박스모두 “margin”속성을 각각 10px, 20px씩 적용했기 때문에 총 30px만큼의 여백이 적용되어야 하는데 현재 30px의 여백이 적용되어 있지 않다. 이렇게 CSS속성이 겹치는 경우 적용이 안될 수 있기 때문에 주의해야 한다.
