[HTML & CSS] CSS 여러 공식들

1. 위치속성과 관련된 공식

"자손에게 position 속성을 absolute 키워드로 적용하면 부모에게 height 속성을 입력합니다."

왜? 부모 태그가 영역을 차지하지 않으면 자손은 absolute 속성이라 무조건 그 자리를 차지하고 있으므로 해당 부모태그의 다음 태그가 자손태그와 겹쳐서 나타날 수 있기 때문

"자손의 position 속성을 absolute 키워드로 적용하면 부모의 position 속성을 relative 키워드로 적용합니다."

 왜? 그래야지만 absolute속성을 가지게 된 자손이 부모를 기준으로 위치를 잡기 떄문

2. float를 이용해 레이아웃을 구성할 때

"자손에 float 속성을 적용하면 부모의 overflow 속성에 hidden 키워드를 적용합니다." (One True Layout 방식)

왜? float속성이 원래 이미지를 글자 위에 띄우기 위해 만들어진 스타일 속성이므로 원하지 않는 것이 부유할 가능성이 높다. 따라서 부모의 overflow 속성을 hidden으로 함으로써 하나의 레이아웃을 생성하여 다른 것이 침투? 부유? 못하게 하는것이다.

3. 태그 가운데 정렬

#main {                        ->가운데 정렬할 태그를 id값으로 선택한 뒤

width: 960px;          ->좌우 길이를 설정하여 고정시킨 뒤

margin: 0 auto;        ->좌우 마진을 auto로 나눈다. 그러면 균등하게 나누어져 가운데에 태그가 위치하게 된다.

     }

※ margin:0 auto;는 margin: 0 auto 0 auto와 같으므로 위,아래는 0 좌,우는 auto로 설정한다는 뜻이다.