<CSS> 레이아웃 (2) - 박스 구성 요소

- 박스 구성 요소

1) border

border는 테두리라는 뜻으로, 박스에서는 핵심적인 부분인 콘텐츠를 둘러싼 테두리다. 테두리에 적용할 수 있는 스타일 속성으로는 다음과 같은 것들이 있다.

- border-style : 테두리 선의 스타일 지정 ex. none, solid(실선), dotted(점선), double(이중선)

- border-width : 테두리 선의 두께 지정. thin-medium-thick이나, 구체적인 수치로 설정할 수 있음

- border-color : 테두리 선의 색상 지정

- border-radius : 박스 모서리를 둥글게 설정. 테두리의 모서리 부분에 원이 하나 있는 것처럼 원의 반지름(radius) 값을 설정.

- border 스타일 묶어서 표현 : border <두께> <색상> <스타일>

*속성 지정 순서는 늘 top-right-bottom-left이다. 이것을 따로 언급하지 않으면 입력한 순서대로 자동으로 값이 해당 위치에 배정된다. 혹은 4개의 값이 아닌 2개의 값만 입력하면, 각각 top과 bottom, right과 left에 동일하게 값을 부여한다. 마찬가지로 1개 값만 입력하면, top-right-bottom-left 부분에 모두 해당 값으로 동일한 값이 설정된다.

 

 

2) margin

박스에서 콘텐츠와 테두리를 감싸는 주변의 여백 영역을 설정하는 요소다. 마찬가지로 top-right-bottom-left의 값을 가진다. 여백 크기는 구체적인 수치 값, 백분율, 그리고 auto(display 속성에서 지정한 값에 맞게 자동으로 설정)로 설정할 수 있다.

*margin에서 수평 중앙정렬 - margin : 0 auto; 값으로 설정

 

주의할 점은 margin 중첩이다. 세로로 박스들을 나열했을 때에, 위아래 박스에 똑같이 margin이 적용되어 있을 경우 큰 margin 값으로 margin이 2번 다가 아닌 1번만 적용이 된다. 이것은 중간에 있는 마진이 너무 커지는 경우를 방지한 것이다. 오른쪽과 왼쪽의 margin에는 해당되지 않는다.

 

 

3) padding

박스에서 콘텐츠와 테두리가 있을 때에, 이 콘텐츠와 테두리 사이의 여백 요소다. 테두리 안쪽 여백이라고 생각하면 된다. 마찬가지로 top-right-bottom-left의 값을 갖는다. 크기 또한 구체적인 수치 값, 백분율, 그리고 auto로 설정할 수 있다.

 

 

 

 

 

참고 : 도서 <Do it! HTML5+CSS3 웹 표준의 정석>