[CSS] margin, padding, border

1. CSS 박스 모델

블록(block) 요소 태그들은 모두 박스 형태를 취하고 있고, 원하는 위치에 배치하기 위해서는 CSS를 이용합니다. CSS를 통해 가로 세로의 크기를 지정할 수 있는데, 여백과 배치 형태를 설정하여 원하는 형태로 만들 수 있습니다. 이러한 박스 형태 요소를 스타일시트에서 'CSS 박스 모델'이라 합니다.

 

박스 모델로 콘텐츠 영역을 만들 때, 박스와 콘텐츠 영역 사이의 여백은 패딩(padding), 박스의 테두리(border), 그리고 여러 테두리와 이웃하는 요소 사이의 여백인 마진(margin) 요소로 구성됩니다. 각각의 요소는 별도 스타일로 지정이 가능하며 중복되는 영역은 하나로 묶어 지정할 수도 있습니다.

 

block 형식 요소와 inline 형식 요소의 여백 인식 유무가 다른데,

block(div...): 모든 여백 인식

inline(span...): 위, 아래 여백 인식 X

이 부분을 알아두면 좋습니다. 따라서 보통 공간을 분할할 때는 div 태그를, 글을 분할할 때는 span 태그를 이용하기도 합니다.

 

 

 

2. height와 width

박스 모델이 동작할 때에 height, width 속성을 설정하면 content 부분만을 대상으로 합니다. 따라서, height와 width 속성으로 설정된 높이와 너비에 padding, border, margin의 크기는 포함되지 않습니다.

 

3. margin과 padding

margin과 padding은 -top, -right, -bottom, -left로 상하좌우 값을 별도로 지정해 사용할 수 있습니다.

 

margin: 외부 여백
margin-top: 외부 여백을 위에만
margin-right: 외부 여백을 오른쪽에만
margin-bottom: 외부 여백을 아래에만
margin-left: 외부 여백을 왼쪽에만

padding: 내부 여백
padding-top: 내부 여백을 위에만
padding-right: 내부 여백을 오른쪽에만
padding-bottom: 내부 여백을 아래에만
padding-left: 내부 여백을 왼쪽에만

 

margin:

padding:

 

다음에는 값이 1~4개까지 들어갈 수 있습니다. 2개 이상 값이 들어갈 경우, 띄어쓰기로 구분합니다.

• 값 1개: 전체 통일 여백
• 값 2개: 순서대로 상하 여백 / 좌우 여백
• 값 3개: 순서대로 상 / 좌우 / 하 여백
• 값 4개: 순서대로 상 / 우 / 하 / 좌 (시계방향) 여백

예시

margin: 50px (전체 50px 마진)
padding: 50px 40px (위아래 50px, 왼쪽과 오른쪽 40px 패딩)
margin: 50px 40px 30px (위 50px, 왼쪽과 오른쪽 40px, 아래 30px 마진)
padding: 50px 40px 30px 20px (위 50px, 오른쪽 40px, 아래 30px, 왼쪽 20px 패딩)

 

4. border

border를 이용하여 박스의 테두리를 지정할 수 있습니다.

border-width: 굵기
border-style: 선 스타일
border-color: 선 색상

border: '굵기' '선 스타일' '색상';

 

마찬가지로 border: 를 이용해 굵기, 선 스타일, 색상의 복수 값을 넣을 때에는 띄어쓰기로 구분합니다.

선 스타일에는 다음과 같은 값이 있습니다.

border-style:
none 없음
solid 선
dotted 점선
dashed 짧은선
hidden 존재하지만 보이진 않음
double 두 줄
groove 테두리가 파인 음영
ridge 테두리가 튀어나온 음영
inset 안으로 들어간 음영
outset 밖으로 들어간 음영

 

또한 border-top, right, bottom, left를 이용해 한 방향에만 스타일을 개별로 적용할 수 있습니다.

border-top: 굵기 선 스타일 색상;
border-right: 굵기 선 스타일 색상;
border-bottom: 굵기 선 스타일 색상;
border-left: 굵기 선 스타일 색상;

border-방향-굵기/스타일/색상;처럼
방향 뒤에 스타일을 지정하여 각각 사용할 수도 있습니다.

예시
border-top-width: 5px;
border-right-style: solid;
border-left-color: red;

 

그리고 border-radius 속성은 네모 박스를 라운드 형태로 둥글게 만들 때 사용합니다. 박스 모서리를 둥글게 하면 좀 더 부드럽게 디자인이 가능합니다. 박스의 라운드를 지정하는 순서는 상단 왼쪽, 상단 오른쪽, 하단 오른쪽, 하단 왼쪽입니다. (시계 방향)

 

속성은 다음과 같습니다.

border-top-left-radius

border-top-right-radius

border-bottom-right-radius

border-bottom-left-radius

 

border-radius

속성을 사용할 경우,

border-radius

값 a
전체 모서리를 a로 지정

값 a, b
top-left, bottom-right a로 지정
top-right,bottom-left b로 지정

값 a, b, c
top-left a로 지정
top-right, bottom-left b로 지정
bottom-right c로 지정

값 a, b, c, d
top-left: a
top-right: b
bottom-right:c
bottom-left:d
로 지정

 

 

이 예제를 코드로 풀면 다음과 같습니다.