box model

margin  top  right botton left (시계방향)

div{margin:20px 40px 20px 40px;}

padding- 안쪽 여백 컨텐츠 사이즈에 영향을 줌. 경계 영역에 사이즈가 증가함. 

padding 10px 20px 30px 40px

padding top-bottom

div{padding:20px 40px;} 위, 아래  좌,우

padding

BODER도 컨텐츠의 하나다. 마진 값도 보더 이후 잡는다. 

border    borde r :1px solid #000000 (두께 종류 색상)

border - 방향

div { border-top : 1px solid #00000000; }

border - 속성

div { border-width:1px;

border-style:solid;

border-color:#000000;}

border - 속성(단축형 속성)

div{border-width:1 10 20 30

border-style:solid dashed;}

선 속성 

border-style solid만 추천 다른 선은 브라우저 마다 모양이 다름

common.css

reset.css 

기본적 html에는 css를 가지고 있다. 기본 style을 초기화 시키는 것 

<link rel=               href=css/reset.css"/>

<link rel=               href=css/common.css"/>

브라우저는 위에서 밑으로 읽는다. 순서가 중요하다. 

box01{margin-bottom:20px;}

box02{margin-top:10px;}

bottom과 top이 만나면 중복된다. 

 img/Ctrl+Shift : 누르면 img 폴더 안에 있는 파일이 나온다. 

display : block;   이미지 인라인 요소 속성을 블록 요소로 변환

박스 모델은 전체 레이 아웃을 잡을 때 쓰지 않는다. 박스모델은 포지션 값을 사용

박스 모델은 부분적 레이아웃을 잡을 때 쓴다.