[블로그 꾸미기] 꼭 알아야할 필수 CSS 첫번째 - border, margin, padding

블로그 꾸미기 팁입니다. 블로그를 꾸밀 때 사용하는 css 중 박스모델을 만들 때 쓰는 속성입니다. 그렇다고 꼭 박스형태에만 사용하는 건 아니고 여러 곳에 사용할 수 있습니다. 지금 이 글에 사용하는 글상자와 소제목에 있는 ㄴ자 모양의 빨간선도 border와 margin, padding을 이용해서 만든 겁니다.

border와 margin, padding은 아주 기본적인 속성이라서 정확하게 알아야 합니다. 하지만 설명을 길게하면 오히려 헷갈릴 수 있어서 이해하기 쉽게 아주 짧게 설명해보겠습니다.

border는 경계선을 말합니다. 집으로 치면 담이죠. 경계선은 두께, 모양, 색을 지정할 수 있습니다.

border-width: 선의 굵기. 픽셀(px)단위의 숫자
border-style: 선 모양, solid(직선), dotted(점모양), dashed(줄표, ----)등
border-color: 선 색. red, blue 처럼 그냥 색 이름 또는 #ff0000같은 형태, rgb(빨간색, 녹색, 파란색) 형식
border:굵기 모양 색: 세가지 설정을 한 번에 지정

border-width: 10px /* 두께 10px */
border-style: solid /* 직선 */
border-color:#ff0000 /* 빨간색 */
border:10px solid #ff0000 /* 위 세가지를 한 번에 지정 */

 => 두께가 10px인 빨간색 담을 죽 이어진 직선으로 만들어라

margin은 한 요소와 다른 요소 사이의 거리입니다. 주택을 예로 들면 옆 집 담과 우리집 담 사이의 거리 또는 도로 경계와 우리집 담 사이의 거리이죠.

margin:10px

 => 우리집 담은 옆 집 담과 10px 떨어지도록 만들어라.

padding은 한 요소의 경계선과 그 안에 들어있는 종속된 요소 사이의 거리입니다. 집 담과 방 벽 정도의 거리라고 생각하시면 될 것 같습니다.

padding:5px

=> 방 벽은 집 담에서 안쪽으로 5m 떨어지게 만들어라.

margin과 padding 차이

사실 이 둘의 차이를 이해하는 것이 중요합니다. 제일 헷갈리는 부분이기도 하고요.

margin: border와 border 바깥에 있는 다른 요소 사이의 거리
padding: border와 border 내부의 종속된 요소 사이 거리
그래서 기준이 되는 border가 어디냐를 찾는 것이 중요합니다

요소의 배경색을 지정했을 때, margin은 배경색이 표시되지 않고, padding은 배경색이 표시됩니다.

border, margin, padding 그림

위 그림에서 파란색은 border고요, border 바깥쪽의 하얀 부분이 margin, border 안쪽부터 빨간 네모 상자 사이가 padding, 빨간 상자 안은 실제 표시될 내용입니다.

위 그림처럼 css 속성을 만드다면 아래와 같습니다.

<div class="margin:30px;border:20px solid #00f;padding:40px;width:300px;height:200px;">



실제 표시할 내용



<div>

border, margin, padding 세부 설정

border, margin, padding은 박스 모델을 만들 때 사용하는데, 이 박스가 사각형입니다. 그래서 위, 아래, 왼쪽, 오른쪽 설정을 다르게 할 수 있죠. 위에서 사용했던 것처럼 "maring:10px" 이렇게 쓰면 사방의 margin이 10px이 됩니다.

각 방향마다 다르게 설정하는 방법은 아래처럼 하면 됩니다. padding도 같은 방법으로 할 수 있습니다.

margin:10px /* 위, 아래, 좌우가 모두 10px */



margin:10px 20px /* 위와 아래는 10px, 좌우는 20px */



margin:10px 20px 30px 40px /* 순서대로 위(10px), 오른쪽(20px), 아래(30px), 왼쪽(40px) */



margin-top:10px



margin-right:20px



margin-bottom:30px



margin-left:40px





border-top:1px dotted #f00



border-top-width: 1px



border-top-style: dotted



border-top-color: #f00

다른 요소와의 상관 관계

이 부분은 약간 어려울 수 있는데요. 하나의 요소만 생각하면 쉬운데, 주변의 다른 요소의 속성들이 지정되었을 때 어떻게 되는 지 살펴 보겠습니다.

보기.

우리집 담 : margin:10px => 우리집 담은 옆 집 담과 10px만큼 떨어뜨려라
옆 집 담 : margin:20px => 다른 집 담과 20px 만큼 떨어뜨려라.

이 경우에 우리집과 옆 집 담의 거리는 얼마나 될까요? 이 때는 양쪽 모두의 거리를 합한 30px이 우리집 담과 옆 집 담의 거리가 됩니다.

담 : padding:10px => 담에서 10px만큼 안쪽으로 방 벽을 만들어라
방 벽 : margin:15px => 방 벽을 만들 때 바깥쪽의 담에서 15px 떨어뜨려라.

이런 경우에는 담과 벽 사이의 거리는 얼마나 될까요? 이 때 margin은 방 벽을 기준으로하기 때문에 방 벽의 외부 요소인 집 담과의 거리가 됩니다. 그래서 담의 padding과 벽의 margin은 합한 25px가 담과 벽의 거리가 됩니다.

왼쪽은 우리집, 오른쪽은 옆 집입니다. 빨간색은 방 벽의 margin, 파란색은 담의 margin과 padding을 나타냅니다. 검은색 점선은 margin과 paddin의 경계를 표시하려고 제가 일부러 그은 선으로 실제 브라우저에는 표시되지 않는 가상의 선입니다.

이 내용을 이해하기 어려우면 그냥 margin과 padding은 서로 더해준다라고만 알고 있으도 됩니다.

border와 margin, padding만 제대로 이해해도 애드센스나 위젯같은 블로그의 항목들은 자유자재로 꾸밀 수 있습니다. 블로그를 꾸미고 싶다거나 글을 조금 더 예쁘게 보이게 하고 싶다면 꼭 아셔야할 내용입니다.

관련글

blockquote를 이용해서 인용구문 배경 꾸미기
[블로그 팁]카테고리 글 더 보기 상자 이용하기
블로그 위아래 이동 단추 넣기
블로그 속도를 빠르게 - 이미지 용량 줄이기
블로그 로딩 속도를 빠르게 - CSS Image Sprites