Positioning

[ 박스 모델 ]

 

 

• 블록 레벨 엘리먼트는 100% width를 차지 한다(설정한 width 넓이와 상관없이)

 

[ floating elements ]

 

플롯은 이미지 바로 옆에 텍스트 단락을 둘수 있도록 만드는 기능이다. 보통의 문서 흐름을 무시하고, 원래의 블록을 바로 아래의 블록 안의 왼쪽, 오른쪽에 끼워 넣는다. 끼움당한 블록은 자동으로 끼워진 만큼 너비가 줄어든다. 그리고 아래의 박스들은 자동으로 끼워진 블록이 없어진 만큼 위로 이동한다.

 

이때 플록 블록에 width 속성이 정해져 있지 않으면 끼워지지 않는다. 플롯이 위에서 여러개가 있으면, 맨 아래에 플롯이 아닌 블록에 한꺼번에 겹쳐진다. 맨 아래에 있는 블록까지 플롯을 부과하면, 하나의 블록 안에 해당 플롯 블록들이 순서대로 배열된다.

 

 

[ clearing floats ]

 

플롯 블록은 일반적인 문서 흐름에서 벗어나 있기 때문에, div로 감싸봤자, 높이를 차지하지 않아서 div가 빈것처럼 처리될 것이다. 하지만 해당 플록 블록이 든 div 아래의 블록은, 혹은 플롯 블록 바로 아래의 블록은 브라우저가 알아서 처리를 해줘서 플롯 블록 아래에 위치된다. 문제는, 플롯 블록 아래 일반 블록을 감싼 태그가 해당 플롯 블록들을 감싼 것처럼 처리가 된다는 것이다. 배경색을 바꿔주면 알 수 있다.

 

이런 감싸기 효과를 없애고 싶다면 clear: float 혹은 clear: right or left 속성을 해당 일반블록에 부여해주면 된다. 다만 문제는 탑-마진을 적용해도 해당 플롯을 인지하지 못해서 마진이 적용되지 않는다는 것이다. 이걸 해결하기 위해 사이에 clear: both 속성이 부여된 빈 div 태그를 붙이기도 한다.

 

하지만 HTML 에 쓸대없는 태그가 늘어나는게 싫다면 :after 를 쓴 수도 태그로 빈 content: "", display: block, clear: both 속성을 부여해주도록 하자.

 

 

 

[ Text column ]

 

p 태그에 자동으로 컬럼이 나누어지도록

 

column-count: 개수

column-gap: 수치 속성을 쓸 수 있다

column-rule: 보더 타입 색상

text-align 속성을 쓸수 있다.

 

 

 

[ Position Relative ]

 

position: relative 는 설정하면 left, right, top, bottom 속성을 부여할 수 있고(offset), 기존의 문서 흐름에 벗어나지 않게 한다.

 

position: absolute 는 기존의 문서 흐름에서 완전히 벗어나서, 위치를 완전히 절대적으로 결정할 수 있게 한다는 것이다. left, right, top, bottom 태그로 말이다. 다만, 상위 태그의 position 속성이 relative 로 되어 있다면, left, right, top, bottom 은 모두 해당 상위 태그 안에서의 오프셋으로 적용된다.

 

Position fixed 는 설정하면 absolute 와 마찬가지로 기존의 문서 흐름에서 완전히 벗어나되, 위치가 브라우저 기준으로 화면상에 딱 달라붙게 하는 것이다.

 

 

[ Z-index ]

 

문서 흐름상, 그것의 position 속성 값이 relative 든 abolute든 뭐든지 간에, 나중에 있는 태그가 더 앞으로 나오게 된다. 모든 요소들은 Z-index를 기본값으로 0으로 가지고 있다. Z-index 를 설정할 때는, 뭐에 몇으로 설정했는지를 주의해야 한다. 그러니 왠만하면 적은 요소에 부여하라

 

주의! 만약 Z-index를 적용하고자 한다면, position 속성이 정의되어 있어야 한다!

 

 

[ Overflow ]

 

overflow를 적용할 때는 무조건 max-height 혹은 max-height 가 정의되어  있어야 한다.

 

overflow: auto 는 스크롤바를 추가하고, max-height를 넘기는 건 자른다

 

overflow: hidden 은 자르되, 스크롤바를 추가하지 않는다.

 

overflow: scroll 은 바닥, 오른쪽 모두에 스크롤바를 추가한다.