01. 좌우여백 조절 : margin을 사용할 경우 IE6~IE7의 인식 방법이 다르므로 padding을 사용하고, - 닷핵을 우회하는 방법을 사용하자. 02. 중앙정렬 : margin : 0 auto; (상하는 0px 좌우는 auto로 중앙정렬) 03. 공통 CSS : body,div,ul,li,dl,dt,dd,ol,p,h1,h2,h3,h4,h5,h6,form {margin:0;padding:0;} - 또는 * {margin:0;padding:0;} 으로 표현. body {font:normal dotum,'돋움';}     ul,ol,dl {list-style:none}       img {border:0; vertical-align:top;}       ul {list-style:none; padding:0; margin:0;} : 위치를 조절할 경우 left-top 에서 시작해야 위치조절이 용이하며, - vertical-aligin:top 기본적으로 수직정렬로 시작하자. - img 부분에서는 border:0px; 또는 border-style:none 사용한다. 04. margin, padding 개념 : margin - 두 객체 사이의 간격을 의미 즉, 바깥쪽의 여백을 말함. - padding - 한 객체내에서의 이미지, 텍스트, border 경계와의 여백을 의미 즉 컨텐츠 안쪽의 여백을 말함. 예를들어 padding 값을 상하좌우 10px 주고 width 와 height의 전체값을 구한다면, 계산법은 아래와 같이 하면된다. ⇒ 전체: width = 10px(padding의 오른쪽값) +  컨텐츠 width px + 10px(padding의 왼쪽값) ⇒ 전체: height = 10px(padding의 위의 값) +  컨텐츠 height px + 10px(padding의 아래값) 반대로 전체 width 값을 알고 padding 값과 border을 줄때는 반듯이 전체 width값에 padding값 border값을 포함한 width값을 써줘야 오류없이 원하는 디자인으로 구성할 수 있다..., - 예를 들어 width가 500px하는 박스를 만들려고 한다. 그런데 박스 테두리를 즉, border:5px을 주고 안쪽 여백 좌우 paddong:0px 10px씩 주고자 한다면 전체 width값은 470px을 주어야  브라우저 영역에 보이는 화면에서는 500px로 표현된다. * 계산법 ⇒ 브라우저 영역의 화면에 보여주고 싶은 총 width값 500px 일때, - border-left:5px - padding-left:10px - border-right:5px - padding-right:10px = 실 적어줘야 할 width:470px  05. list 가로나열 :  li {display:inline} - 태그 기본속성, display 속성을 잘 알아야 이용해서 자유롭게 디자인 할 수 있다. 06. 롤오버 이미지 만들기 : <-mg src="이미지주소" onmouseover="this.src='이미지주소'" onmouseout="this.src='이미지주소'" /> 07. IE6 ~ IE7계열에서는 margin등 오차가 나오게 될 수 있다. 이럴 경우 닷핵을 이용한다. :  닷핵은 카테고리 CSS에서 CSS핵에서 참고하시면 됩니다.  08. 리스트 블릿 없애기 : ul {list-style: none; padding:0; margin:0;} 09. display 간략설명 : inline - margin, padding을 사용못한다. width, height 불가능. 가로배열 (span , img  주로이용) - block - margin,padding을 사용가능. width,height 사용가능. 줄바꿈 (div, p , form 요소들이 있고 블록단위로 개행) 10. position : 요소의 위치를 설정 할때 사용 - absolute - position:absolute; top:10px; left:50px; (위에서 10px 왼쪽으로 50px 이동) - relative - 어느지점을 기준으로 한 상대위치 - fixed - 고정위치 (어떤대상을 스크롤과 관계없이 고정시킬때 주로 이용) - inherit - 상위설정에서 상속 11. background : background:url(상대주소) - option - no-repeat - 반복하지않음. - repeat-x - x축으로 반복. 가로반복 - repeat-y - y축으로 반복. 세로반복 12. CSS 셀렉터 확인 :  p a .gClass - 태그안에서 gClass 클래스 이름이 붙은 모든링크 - a #bID .dClass - 아이디가 bID 이고 클래스가 dClass를 가지는 링크