changpd

element의 위치를 정할때 position을 사용한다. 현재의 element의 상황을 고려하여 기준 을 정하고 그기준으로 부터 top, bottom, left, right 의 속성을 사용해서, 위치를 디테일하게 잡으면 된다. static : 프로그래밍에서 쓰는 static 키워드 처럼 위치 값이 먹지 않는다. relative : 이전의 element가 기준이 된다 그로부터 위치값을 계산한다. absolute : 부모 element가 기준이다. 그러나 static은 무시한다. fixed : absolute 처럼 부모가 기준이나, 스크롤질을 해도 위치가 변경되지 않는다. 위젯으로 써먹기 딱 좋다.

http://www.w3schools.com/css/css_boxmodel.asp 마진이나 패딩이나 둘다 여백을 주는 방식이다. 그차이는 border부분을 기준으로 했을때 내부에 줄것인가 외부에 줄것이냐의 차이다. 크기 200px 짜리에 분홍색 박스안에 테스트를 하기위한 분홍색박스의 절반크기인 100px 짜리 회색 박스를 집어넣었다. 그리고 padding과 margin을 텍스트박스크기만큼 집어넣었다. (top, right, bottom, left 모두 50px) padding은 border내부에 여백을 채우느라 상위 박스크키만큼 커져버렸고, margin은 border외부의 여백을 조정하다보니 정가운데 위치하게됬다. 그리고, 잘보면 padding과 margin의 텍스트 위치는 동일하다. 즉 이 border 내부의 content는 아직까지 모두 100px이다 content의 위치나 사이즈가 변하는건 아니다. 그리고 만약 분홍색, 회색박스가 모두 흰색이고 둘다 border는 0px로 하여 안보이게 했다면 여기서는 전혀 차이가 없을 수도 있다.