div 태그로 테이블 그리기

참고: http://web1.c2.cyworld.com/myhompy/board/retrieveBoardPrint.php?home_id=a2593977&lmenuSeq=273930&smenuSeq=331499&postSeq=3995858

margin,padding,background 에 대한 개념익히기

[css]margin, padding, background

박정혜2010-12-15 17:59:17

조회 384   스크랩 0

 

1. 차이점 :

   padding은 content의  border으로부터 inisde,

   margin은 content의  border으로 부터 outside

 

2. padding, margin{상, 우, 하, 좌}    -> 시계방향

   padding, margin{상하, 좌우}

   padding, margin{상, 좌우, 하}

 

 

 

3. 전체 width = margin-left + border-left + padding-left

                     + width +  

                     + margin-right + border-right + padding-right

 

ex)전체 width를 300px로 하고 싶다면

     margin:10px; border:1px; padding:5px; width:268;

     10 + 1 + 5 + 268 + 5 + 1 + 10 = 30

 

ex)

 

 

** 연달아 있는 요소의 margin 속성은 수치가 큰쪽만 적용됨.

** inline 태그의 margin, padding은 좌우방향값만 적용되고, 상하값은 무시

    => 해결: display:line-block 속성을 적용

** IE(ie 6)의 margin 버그 : float와 margin이 방향이 같을때 margin이 두배로 나오는 현상.

    즉, float:left; margin-left:10px; 라고 하면 왼쪽으로 마진이 20px로

     => 해결 : display:inline-block;

 

 

4. background: 배경에 관련된 소석을 한번에 설정.

   background-color

   background-image:url(경로);

   background-repeat: no-repeat | repeat-x | repeat-y;

   background-attachment: scroll | fixed | inherit ; 배경은 움직이지 않고 내용만 움직일때

  background-position:left | center | right | top | middle | bottom; 배경이미지를 특정위치로

    ex) background:url(bg.gif) no-repeat fixed #ccc 100px 100px;