웹표준 쉽게 배우기 #2편 margin 마진편

이것을 반드시 왜우자!!

margin-left : 길이 | 퍼센트 | auto
margin-right : 길이 | 퍼센트 | auto
margin-top : 길이 | 퍼센트 | auto
margin-bottom : 길이 | 퍼센트 | auto

 

margin : [길이 | 퍼센트 | auto] 이 부분은 웹표준 코딩을 할때 가장 중요한 부분 입니다.
알아두기

• 길이 : 상대길이와 절대길이가 있다.
  • 상대길이 : em(현재 글자의 크기), ex(현재 글자 중 x자의 크기), px(픽셀)
  • 절대길이 : in(인치), cm(센티미터), mm(밀리미터), pt(포인트 : 1pt=1/72in), pc(피카 : 1pc=12pt)
• 퍼센트 : 부모가 되는(현재의 element가 포함된) element의 폭을 기준으로 한다.
• auto : 브라우저가 자동으로 정한다. (브라우저마다 마진값이 틀립니다 주의하세요!!)

예제)

BODY { margin: 2em } /* 모든 마진이 2em */
BODY { margin: 1em 2em } /* top과 bottom은 1em, right과 left는 2em */
BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em (right의 값을 그대로 가져옴) */

또 다른 예제) body{ margin 0px 0px 0px 0px } 빠르고 간단하게 코딩할려면 이렇게~~~