HTML+CSS 기초 강의 - 30. CSS 속성 기초 2 - 여백과 테두리 속성
여백 속성
모든 HTML 요소는 HTML 문서 안에 차지하는 영역이 있고 영역의 끝 부분에 다른 요소와 맞닿는 경계가 있습니다.
그 경계와 HTML 요소 안의 컨텐츠 사이에 여백을 주거나, 경계로부터 다른 요소, 또는 부모 요소와의 사이에 여백을 줄 수 있습니다.
요소의 내부와 외부에 여백을 주는 2가지 방법중 내부 여백을 패딩(Padding)이라고 하고 테두리에서 다른 HTML 요소, 또는 부모 요소와의 사이에 주는 외부 여백을 마진(Margin) 이라고 합니다.
HTML요소의 경계는 보더(Border) 또는, 테두리라고 하고 보더에 선을 긋거나 다양한 선 속성을 부여할 수 있습니다.
여백 기준을 그림으로 그리면 다음과 같습니다.
이 그림을 기준으로 패딩, 마진, 보더(테두리)를 설명합니다.
예를 들어 HTML 문서안의 "<div>" 태그에 기본 패딩, 마진, 보더 속성을 지정한다면 아래처럼 사용할 수 있습니다.
div{
padding:3px;
margin:2px;
border:1px.;
}
패딩, 마진, 보더는 각 방향(top, right, bottom, left)별로 각각 값을 지정할 수 있습니다. 각 방향으로 개별 값을 지정하려면 속성명 뒤에 "-left", "-right", "-top", "-bottom" 을 덧붙여서 개별 방향 속성값을 지정합니다.
예를들어
padding-left:4px;
margin-top:5px;
border-bottom:1px solid #000;
과 같은 방식으로 방향 접미사를 붙여서 사용할 수 있습니다.
또는 방향별로 값들을 방향 순서대로 공백으로 띄워서 나열해도 됩니다.
4방향(top, right, bottom, left) 이므로 최대 4개의 숫자를 나열해 각 방향의 여백이나 테두리선 두께를 지정할 수 있습니다.
예를들어
div{
padding:2px 3px 2px 4px;
margin:1px 2px 3px 4px;
border-width: 2px 3px 2px 1px;
}
이런식으로 각 방향에 여백이나 테두리선 너비를 지정할 수 있습니다.
* 왜 테두리는 border가 아니고 border-width인가?
border 속성은 여백 속성과 달리 두께 외에 색상과 스타일 속성이 함께 사용됩니다. 사용자 편의를 위해 border 속성은 두께, 스타일, 컬러를 한꺼번에 지정할 수 있는 속성으로 사용되고, 두께, 스타일, 컬러를 개별적으로 지정할 수 있는 테두리 속성명이 별도로 부여되어 있습니다.
border 속성은
border:[테두리선너비]px [테두리선스타일] [테두리선색상];
이렇게 테두리선의 속성들을 조합해 사용합니다.
예를들어
border:1px solid #000;
이런식으로 사용합니다.
border 속성에는 각 방향별 속성을 부여할 수는 없습니다.
방향별 속성을 부여하려면 border-width, border-style, border-color 속성 3개를 사용해 각 방향별 속성을 부여해야 합니다.
테두리속성 | 사용 예 | 특징 |
border-width | border-width:3px; border-width:1px 2px 3px 4px; border-width:2px 4px; | 각 방향별 테두리 선 두께를 지정합니다. 테두리 스타일은 기본 값이 solid 입니다. 테두리 색상, 또는 스타일이 정의되거나 상속되지 않은 경우 테두리 두께를 지정해도 테두리는 표시되지 않습니다. 스타일이나 색상이 지정되지 않아 테두리가 보이지 않는 경우 "none" 스타일과 동일하며 자리도 차지하지 않습니다. |
border-color | border-color:#a00; border-color:#a00 #0a0 #00a #000; border-color:#a44 #fafafa #ccc; border-color:rgab(255,0,0,0.5); | 각 방향별 테두리 선 색상을 지정합니다. rgba() 컬러값 속성을 사용해 반투명 색상을 테두리에 지정할 수 있습니다. |
border-style | border-style:dotted; | 테두리선의 모양을 지정합니다. 테두리선 모양은 dotted / dashed / solid / double / groove / ridge / inset / outset / none / hidden 중 한가지를 사용할 수 있습니다. 
테두리 입체 효과를 주는 groove, r idge, inset, outset 스타일은 지정한 컬러값을 기준으로 어둡고 밝은 색을 조합해 입체 효과를 표현합니다. 단, 검정색의 경우 더 밝거나 어두운톤을 지정할 수 없기 때문에 입체 효과가 사라집니다. none과 hidden은 일반적으로 동일합니다. |
이때 주의할 점이 있는데 여백이나 선두께가 적용되는 방향입니다.
적용되는 방향은 top->right->bottom->left 입니다. 이렇게 기억하면 잘 기억되지 않으므로 시계방향으로 돌면서 0시->3시->6시->9시 이렇게 순서대로 적용된다고 기억하면 좀더 기억하기가 쉽습니다.
즉, "padding:2px 3px 2px 4px;" 로 패딩을 지정했으면
padding-top:2px;
padding-right:3px;
padding-bottom:2px;
padding-left:4px;
와 같은게 됩니다.
여백이나 테두리 너비값이 0일 경우 0px 로 표기하지 않고 0으로 표기하며, 중간에 0인 방향이 있을 경우 반드시 0으로 표기를 해야 합니다.
뒤에서 설명하지만 값이 0이라고 생략할 경우 엉뚱한 결과가 적용됩니다.
예를들어
padding:2px 0 0 2px;
는 top과 left 에만 패딩 여백은 2px을 주고 right, bottom 에는 여백을 주지 않는 다는 뜻이 됩니다.
마찬가지로
margin:0 2px 2px 0;
border-width: 1px 0 1px 0;
이런식으로 사용할 수 있습니다.
앞서 "padding:3px;" 는 모든 방향에 3px 패딩 여백을 지정하는 것이라고 배웠습니다.
이것은 "padding:3px 3px 3px 3px;" 를 줄여서 표기한 것이라고 이해하면 됩니다.
마찬가지로 CSS는 2개, 또는 3개만 값을 지정한 경우에 대한 처리도 지원을 합니다.
다만 적용되는 순서나 방향이 4개의 방향 값을 모두 준 것과는 전혀 다르므로 꼭 숙지해두어야 합니다.
4개 방향에 값을 지정한 경우 시계방향으로 top->right->bottom->left 순으로 값이 적용됩니다.
값을 2개만 지정한 경우 첫번째 값은 top/bottom, 두번째 값은 left/right 에 적용됩니다.
즉, "padding:1px 2px;" 로 값을 지정했으면
"padding:1px 2px 1px 2px;" 와 동일한 적용이 됩니다.
앞에서 해당 위치에 여백이나 테두리 두께가 없을 경우 0으로 값을 반드시 채워넣어야 한다고 했던 이유는 이것 때문입니다.
값을 생략하는 것과 0으로 채워넣는 것은 전혀 다른 결과를 가져옵니다.
값을 3개 지정하면 어떻게 될까?
예를들어 "padding:1px 2px 3px;"
이경우 left에 해당하는 값만 없는 것이 되며, left 의 값은 right의 값으로 자동으로 채워집니다.
top과 bottom 값은 시계방향으로 지정되는 값 그대로가 적용됩니다.
즉, 위 패딩 여백은 "padding:1px 2px 3px 2px;" 와 동일한 결과가 됩니다.
