참고: http://web1.c2.cyworld.com/myhompy/board/retrieveBoardPrint.php?home_id=a2593977&lmenuSeq=273930&smenuSeq=331499&postSeq=3995858
margin,padding,background 에 대한 개념익히기
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
** 연달아 있는 요소의 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; |