table 대신 css 를 사용하라, 는 얘기가 있어서 css 에 대해서 공부.
그런데 약간 헷갈리는 부분들이 있어서 정리함.

- div 는 grouping block element 다. div 와 span 은 각각 기본적이고 가장 많이 사용하는 block, inline element 들이다.
div 는 그 안에 여러 child element 들을 담을 수 있다. span 은 아마 span 만 담을 수 있는 것 같다.

- block element 들은 기본적으로 앞 element 의 다음 라인에 놓여진다.
헷갈린다면, clear: left 나 clear: both 를 이용하면 확실하게 다음 라인에 놓여진다.

- block element 들을 여러 개 나란히 놓고 싶으면:
이러한 여러 elements 를 한 개의 parent div 로 묶는다.
이 child element 들은 float: left 를 갖고 있어야 한다.
parent div 의 width 안에서, child element 의 width 를 유지하면서 붙을 수 있는 위치 중에서 가장 윗쪽에 붙는 것 같다.
즉, 가능하면 바로 앞 sibling 의 오른쪽에 나란히 붙으려고 하고, 만약 parent div 의 width 를 넘어갈 것 같으면 그 다음 아래의 위치에 붙는다.

- 굳이 div 로 묶지 않아도, 예를 들어 p 와 같은 block element 는 div 와 대등하게 위치를 점유할 수 있다.
횡으로 나란히 놓을 때에는 심지어 inline element 들도 대등하게 위치를 점유할 수 있다.
즉, div, p, span, table, img 등등을 횡으로 나란히 놓기 위해 하나의 div 로 묶을 수 있다.

- 하나의 div 안에 children div 들을 horizontally 차례로 놓을 때 parent div 의 width 는 자동으로 children div 들을 포함하도록 늘어난다.
하지만 height 는 늘어나지 않는다.
자동으로 height 가 늘어나도록 하려면 parent div 의 style 에 overflow: auto 를 넣는다.

- 여러 div 들을 위에서 아래로 차례대로 놓을 때 어떤 div 를 horizontally 중앙에 위치하도록 하려면:
margin: auto auto 를 사용하면 된다.
그런데 그냥 이것만 사용하면 width: auto 가 default 로 세팅되어 그냥 위 아래의 다른 div 들의 width와 같아지고 따라서 div 의 content 는 그냥 가장 왼쪽에 몰려있게 된다.
따라서 먼저 width 를 content 에 딱 맞추도록 해야 centering 의 효과가 원하는 대로 나타난다.

- div 의 width 를 content 에 딱 맞추려면:
이것은 width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; 의 세 가지 세팅을 모두 함으로써 가능하다.
아직 브라우저들 사이에 통일된 규약이 없어서 이렇게 여러 개를 써야 한다.

다음은 참고한 사이트들:

http://www.htmlgoodies.com/img/3_column.html

http://learnlayout.com/display.html