13. 박스 속성 (2)

해당 내용은 "쉽고 빠르게 익히는 CSS3(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. 

 

엘리먼트 마진 설정

body { margin : 0;}
article {
max-width : 980px;
min-width : 660px;
float : left;
margin : 0 10px;}

- 마진 병합 

두 엘리먼트가 세로로 쌓여 있으면 두 엘리먼트 사이의 세로 마진을 계산할 때 위, 아래 마진을 단순히 합치는 게 아니라 더 큰 마진 값이 사용되고 작은 마진 값이 0이 된다. 이로써 쌓여 있는 엘리먼트가 많더라도 위, 아래 마진은 일관되게 유지된다. 

 

엘리먼트의 외곽선 설정

외곽선은 보더를 감싸고 보더와 같은 값을 사용한다. 하지만 보더와 달리 외곽선은 박스의 실제 크기(너비, 높이)를 증가시키지 않고 화면상에서 공간을 실제로 차지하지 않는다. 대신 외곽선은 마진 아래에 나타나며 주변 콘텐츠의 위치를 바꾸지 않고도 링크를 강조할 수 있어서 링크 롤오버에 유용하다. 

 

- 박스 외곽선 설정 

nav.global li a:hover {
outline : rgba{135, 127, 107, .65) 10px double;}
}

- 외곽선 오프셋

outline-offset 속성을 추가하면 외곽선과 볻더 또는 콘텐츠 모서리 사이에 공간을 둘 수 있다. 이 속성은 외곽선의 패딩 정도로 생각할 수 있다. 

 

엘리먼트 보더 설정

border 속성을 사용하면 다양한 선 스타일을 사용해 박스의 네 면 주변에 구분선(라인)을 설정할 수 있다. 아울러 추가적인 border속성을 사용하면 네 면에 독립적으로 보더를 설정하는 유연한 디자인을 적용할 수 있다. 

/*
border-style 속성값
dotted, dashed, solid, double, groove, ridge, inset, outset, none, inherit
*/
figure {
display : block;
width : 300px;
float : left;
margin : 0 10px 10px 0;
border : 6px double rgb(142, 137, 129);}

 

보더 모서리 둥글게 만들기

figure {
display : block;
width : 300px;
float : left;
margin : 0 10px 10px 0;
border : 6px double rgb(142, 137, 129);
-webkit-border-radius : 5px;
-moz-border-radius : 5px;
border-radius : 5px;}

곡선 보더를 사용하더라도 박스 내의 콘텐츠는 잘리지 않는다. 따라서 박스의 모서리에 있는 이미지는 여전히 그대로 남게 되며 곡선 밖으로 삐져나오게 된다.

 

보더 이미지 설정

사각형 이미지를 박스의 보더에 적용해 라인 스타일을 대체하는 기능이다. 모질라와 웹킷은 거의 동일하게 구현했고 CSS3도 두 브라우저의 방식을 따랐다. 물론 일부 차이가 있기는 하지만 기본 이미지 보더 배경을 설정하는 방식은 세 가지 모두 동일하다. 

 

border-image는 사각형 이미지를 받아서 이미지를 아홉조각으로 자른다. 이 중 모서리에 맞닿은 여덟 부분은 측면 및 모서리 이미지로 사용되며 가운데 부분은 엘리먼트 내의 콘텐츠를 볼 수 있도록 숨긴다. 모서리는 설정한 오프셋의 크기를 바탕으로 엘리먼트 박스의 모서리에 적용된다. 그런 다음 이미지 측면의 가운데 부분이 너비와 높이를 맞추기 위해 늘어나거나 타일 형태로 처리된다.

 

aside h3 { 
border : 1em double rgb(142, 137, 129);
-webkit-border-image : url(../imgs/border.png) 27 round;
-moz-border-image : url(../imgs/border.png) 27 round;
border-image : url(../imgs/border.png) 27 round;
}

 

엘리먼트 패딩 설정

얼핏 보기에 padding은 엘리먼크 콘텐츠 주변에 여백을 추가한다는 점에서 margin과 동일한 효과로 보인다. 하지만 padding은 엘리먼트의 보더와 창에 있는 다른 엘리먼트 사이가 아니라 엘리먼트 보더와 엘리먼트 콘텐츠 사이에 여백을 설정한다는 점에서 차이가 있다. 패딩은 보더와 배경색을 사용하고 싶지만 콘텐츠가 모서리 위로 나오는걸 원치 않을 때 유용하다.

 

body, header.page, footer.page {
margin : 0;
padding : 0;}