[css]스타일쉬트 여백 지정시 꼭 알아야 할 padding, margin, width 정리

일반적으로 사용하는 스타일쉬트에 대해서만 간략하게 정리하려고 했는데 생각보다 그리 녹녹치가 않네요!
이미 시작을 했으니 끝내긴 끝내야겠는데.. ^^

그래도 이웃분들의 염려와 걱정덕분에 힘 받아서 또 열심히 정리를 시작해보겠습니다.
편의상 지금부터는 평어체를 사용할것이므로 양해 바라겠습니다.

css의 사용법을 모르는 분은 이 글을 읽기 전에 "스타일시트(CSS) 이해하기 for 티스토리를 먼저 읽기를 권한다.

오늘은 padding, margin 그리고 적용되는 범위와 width에 대해서 알아볼까 한다.

padding이나 margin은 둘다 컨텐츠의 상하좌우에 여백(공백)을 줄때 사용하는 속성이다.

padding, margin의 적용영역과 width 값의 계산 

각각의 적용되는 영역은 아래 그림을 보면 쉽게 이해할 수가 있을것이다.

 

  • css에서 자주 사용되는 width는 contents가 표시되는 영역이다.
  • padding은 border와 contents 사이의 공백을 지정할때 사용
  • margin은 border의 바깥쪽 영역이다.
  • margin, padding, border를 모두지정했을때 전체 영역의 크기는 margin + padding + border + width 이다.

위의 내용이 어렵게 느껴지는 사람은 이해하려고 노력하지 않아도 된다.
사실 위의 전체 영역을 계산하는 방법은 페이지의 구조를 만들때 주로 사용하기 때문에 이미 구조가 만들어진 경우 (완성된 스킨이 적용된 경우) 전체 영역 계산할 일은 별로 없기 때문이다.

하지만 지금부터 진행되는 padding과 margin은 자주 사용하기 때문에 잘 알아두는 것이 좋다.

 

margin 속성

; margin은 여백을 지정할때 사용하는 속성이다. 컨텐츠와 컨텐츠간의 여백, 컨텐츠와 이미지간의 여백, 본문과 사이드사이의 여백등 웹에서 상.하.좌.우 여백을 지정할때 사용된다. 다른 표현으로는 컨텐츠가 표시되는 위치를 지정하는 용도로도 사용된다.

margin의 사용형식

  • margin: 값;    => 상하좌우 동시에 지정할때 사용, 길이 지정은 px, em등으로 지정
  • margin-left     => 왼쪽 여백을 지정
  • margin-right   => 오른쪽 여백을 지정
  • margin-top     => 위 여백을 지정
  • margin-bottom => 아래 여백을 지정

사용예제 1.

 margin: 10px;         =>상하좌우 모두 10px 씩 여백이 지정됨

 margin: 10px 5px ;  =>위, 아래는 10px, 왼쪽과 오른쪽은 5px로 지정됨

 margin: 10px 9px 8px 7px; => 위 10px, 오른쪽 9px, 아래 8px, 왼쪽 7px 

 margin: 10 9 8 7 ;    => 위와 동일

사용예제 2.

<div>여백이 없을때</div>
<div style="MARGIN-left: 10px; background:yellow">왼쪽 여백이 10일때 </div>
<div style="MARGIN-left: 30px; background:yellow">왼쪽 여백이 30일때 </div>

 

예제2 결과 보기


padding 속성

; padding은 컨텐츠와 테두리(border) 사이의 공백을 지정할때 사용하는 속성이다. 마진과 마찬가지로 컨텐츠와 컨텐츠간의 여백, 컨텐츠와 이미지간의 여백, 본문과 사이드사이의 여백등으로 다양하게 사용할 수 있으며 상.하.좌.우 개별적으로 지정이 가능하다.

padding의 사용형식

마진과 사용법이 같다.

  • padding: 값;    => 상하좌우 동시에 지정할때 사용
  • padding-left     => 왼쪽 공백을 지정
  • padding-right   => 오른쪽 공백을 지정
  • padding-top     => 위 공백을 지정
  • padding-bottom => 아래 공백을 지정

사용예제 1.

 padding: 10px;         =>상하좌우 모두 10px 씩 공백이 지정됨

 padding: 10px 5px ;  =>위, 아래는 10px, 왼쪽과 오른쪽은 5px로 지정됨

 padding: 10px 9px 8px 7px; => 위 10px, 오른쪽 9px, 아래 8px, 왼쪽 7px 

 padding: 10 9 8 7 ;    => 위와 동일

사용예제 2.

<div style="border:3px solid #ff0000; padding:10px">padding을 10으로 했을때</div>
<div style="border:3px solid #ff0000; padding:30px; margin:10px">padding이 30 일때</div>
<div style="border:3px solid #ff0000; padding:10px 3px">상하 10px, 좌우 3px</div>

 

예제2 결과 보기

설명.

<div style="border:3px solid #ff0000; padding:30px; margin:10px">padding이 30 일때</div>

위 소스는 3픽셀 굵기의 빨간색 테두리를 표시하고, 보더와 내용사이 여백은 상하좌우 30px을 주는 예이다.
div 는 줄바꿈만 하기 때문에 윗줄과의 공백이 생기지 않아서 margin:10px을 줬다.

여기까지 margin 과 padding에 대한 내용이었습니다.

스타일쉬트에서 많이 사용되는 속성들이므로 상단 메뉴줄에 있는 태그연습장을 통해서 꼭 연습을 해보시기 바랍니다.

css 관련글.
2008/10/21 - [CSS for 티스토리] - 스타일시트(CSS) 이해하기 for 티스토리
2008/10/24 - [CSS for 티스토리] - 스타일시트(CSS)의 선언방법 1
2008/10/27 - [CSS for 티스토리] - 스타일시트의 선언방법 및 사용 예제 2
2009/02/16 - [CSS for 티스토리] - 서식으로 배우는 스타일시트(CSS)
2009/09/03 - [CSS for 티스토리] - 티스토리 뽀개기 - 스킨 구조(skin.html) 이해하기
2009/09/07 - [CSS for 티스토리] - 티스토리 뽀개기 - div 와 span
2009/09/24 - [CSS for 티스토리] - (css) border로 꾸미는 나만의 이미지 스타일
2009/10/20 - [CSS for 티스토리] - 티스토리 스킨 style.css 완전정복 1
2009/10/21 - [CSS for 티스토리] - 티스토리 스킨 style.css 완전정복 2

댓글을 달아 주세요

댓글창에 배경그림 넣는방법

  1. BlogIcon 열렬히구독하는 사람 2009.10.23 10:47 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요 ...
    방명록에 글 남겼습니다.

  2. BlogIcon sky~ 2009.10.23 11:01 신고  댓글주소  수정/삭제  댓글쓰기

    봐도 모르겠습니다 ㅠㅠ

  3. BlogIcon White Saint 2009.10.23 12:57 신고  댓글주소  수정/삭제  댓글쓰기

    다음뷰 관련해서 2차도메인으로 변경하고 다음에 고객센터에다가 2차도메인으로 바꿔 달라고 해서 바꾸고 나니까 기존 송고한 글에 다음뷰바가 모조리 사라졌는데요... 복구하는 법 아시나요? 수정 재발행하니까 글이 2개가 뜨고... 막 그래요... 이전에 받았던 추천 유지하고 싶은데 말이죠... ㅠㅠ

    • BlogIcon Kay~ 2009.10.25 14:00 신고  댓글주소  수정/삭제

      제가 2차 도메인 사용을 안해봐서 잘 모르겠지만..
      다른 분들 보니까 뷰를 다시 가입해야 하는 것으로 알고 있습니다.
      이 부분에 대해서는 다음 고객센터에 문의해보시는 것이 가장 좋을듯 합니다.
      원하는 답변을 드리지 못해서 아쉽니다. 사실 저도 2차도메인에 대한 유혹때문에
      계속 고민중에 있답니다. 말씀을 들어보니.. 다음뷰도 큰 문제가 아닐 수 없군요!

  4. BlogIcon 좋은사람들 2009.10.23 15:16 신고  댓글주소  수정/삭제  댓글쓰기

    헛.. 연속으로 쓸때는 숫자뒤에 px을 안적어도 되었단 말입니까.~ -_-;;

  5. BlogIcon HEPI 2009.10.23 15:32 신고  댓글주소  수정/삭제  댓글쓰기

    html을 조금 접해 본 저로서도 margin, padding 부분이 많이 헷갈렸는데,
    깔끔하게 정리해 주셨네요.

    • BlogIcon Kay~ 2009.10.25 14:02 신고  댓글주소  수정/삭제

      저도 이부분이 정확하게 개념이 잡히지 않아서
      이참에 w3c에서 확실하게 알았답니다. ^^
      이런 명령은 정리를 하지 않으면 계속 머리가 아프더라고요!

  6. BlogIcon 머니야 머니야 2009.10.23 17:11 신고  댓글주소  수정/삭제  댓글쓰기

    예전에 편견관련글에서..컴도사 케이가 편견이라 하셨는데..
    알고보니 모두 새빨간데요? ㅋㅋㅋㅋㅋ

    • BlogIcon Kay~ 2009.10.25 14:03 신고  댓글주소  수정/삭제

      허걱! 그글을 아직껏 기억을 하고 계셨나요?
      역시 예상은 했지만 기억력도 에너자이져군요! ㅋㅋ
      편견은 사실입니다. ㅎㅎ 그냥 기본만 알뿐이에요!

  7. BlogIcon 보시니 2009.10.23 22:20 신고  댓글주소  수정/삭제  댓글쓰기

    아, 이거 어떤 건 잘 되고, 어떤 건 또 안되고
    종잡을 수 없을 때가 많아요~
    카이님 처럼 이런 개념이 명확했으면 좋겠는데 ㅠㅜ..

    • BlogIcon Kay~ 2009.10.25 14:04 신고  댓글주소  수정/삭제

      ㅎㅎ 웹브라우저나 버전등에 의해서 영향을 미칠 수도 있고..
      다른 우선순위에 의한 영향으로 안될때도 있는것 같아요!
      css는 알면 알수록 머리가 아픈것 같더라고요! ^^

  8. BlogIcon DanielKang 2009.10.23 22:40 신고  댓글주소  수정/삭제  댓글쓰기

    ㅎㅎㅎㅎ css 완전 정복이네요
    저야 뭐 그냥 대충 감으로 쓰다보니 다 알게 되었는뎅 초보분들은 아주 유용할것 같아요..

    • BlogIcon Kay~ 2009.10.25 14:04 신고  댓글주소  수정/삭제

      마저요.. 기초를 알면 그 다음부터는 검색을 해서도 쉽게 찾을 수 있고
      필요한것은 왠만큼 스스로 처리할 수 있는 능력이 생기지요..
      또한 저처럼 이렇게 글을 쓸 수도 있죠..
      그래서 항상 기초가 중요한것 같습니다.

  9. BlogIcon 지구벌레 2009.10.25 04:17 신고  댓글주소  수정/삭제  댓글쓰기

    깔끔한 정리, 좋은 정보 감사합니다..^^.
    늘 차일피일하며 스킨 수정을 미루고 있는데 꼭 써먹어야 겠어요.

    • BlogIcon Kay~ 2009.10.25 14:05 신고  댓글주소  수정/삭제

      스킨 수정은 한꺼번에 하는 것보다..
      작은 부분부터 하나 하나 하는 것이 좋은것 같아요..
      한꺼번에 수정해서 문제가 생기면 수정하는데 애를 먹거든요! ^^

  10. BlogIcon 드자이너김군 2009.10.27 17:11 신고  댓글주소  수정/삭제  댓글쓰기

    전 항상 사이트 만들때 요것이 헷갈렸었는데.. 잘 정리해 주시니 좋군요~^^

    • BlogIcon Kay~ 2009.10.29 11:12 신고  댓글주소  수정/삭제

      그쵸? 구조만들때 정말이지 삐딱해지면
      정말 골치 아프죠.. ㅎㅎ
      저도 정리하면서 확실하게 알았답니다.

  11. BlogIcon 노지 2010.01.25 08:50 신고  댓글주소  수정/삭제  댓글쓰기

    처음부터 5번은 본것 같은데 뭔소리인지 이해를 못하겠어 아 제길..
    (스킨수정해야되는데 원.;;)

    • BlogIcon Kay~ 2010.02.03 09:23 신고  댓글주소  수정/삭제

      사실 이런 관계에 대한 부분은..
      좀 어렵기도 합니다.
      그냥 명령 한개 한개에 대해서 이용을 하다고 ..
      의문이 생길때 그때 보셔도 됩니다. ㅎㅎ

  12. BlogIcon 보라곰! 2010.01.29 18:02 신고  댓글주소  수정/삭제  댓글쓰기

    오늘도 열심히 배우고 갑니다.
    어찌 이리도 잘하신데요 ^^
    자주 들려서 열심히 배우겠습니다.
    아참 그리고 강의 하셔도 될듯한데요 ^^ 추진 해보세요 ^^
    지금 하고 계시나?

    • BlogIcon Kay~ 2010.02.03 09:24 신고  댓글주소  수정/삭제

      ㅎㅎ 감사합니다.
      그런데 어떤강의요? ㅎㅎ
      블로그 관련강의요? ㅎㅎ
      아직 그냥 생각에 머무르고 있습니다.