가고

float는 세로로 나열되어 있는 블록을 가로로 배치할 때 사용된다.

float을 사용할 때는 '꼭' 가로 사이즈를 줘야 한다.

세로로 나열된 블로마다 float:left를 적용하면 해당 블록들은 모두 왼쪽으로 차례로 나열된다.

반대로 float:right을 적용하면 해당 블록들은 오른쪽으로 나열된다.

이때 블록 아래의 블록이 딸려서 올라오는 오류가 생기기도 한다.

이를 방지하기 위해 딸려오지 않도록 아래의 해당 블록에 'clear:both'을 적용해야 한다.

"<p>태그는 블록 레벨 요소로 한 라인을 다 차지한다.

하지만 해당 예에서는 세 개의 <p>태그에 float:left를 적용하여 왼쪽으로 차례로 나열되게 했다.

'이미지 세 장'이라는 <h2>태그는 블록 레벨 요소이기 때문에 딸려오지 않는다."

position의 개념은 간단하게 블록을 박스의 위치 기준으로 배치하는 기술이다.

position은 주로 '콘텐츠를 서로 겹치게' 하거나 '마크업(html) 순서와 디자인상의 순서가 다를 경우'에 사용된다.

position의 종류는 static, relative, absolute, fixed.

이 중 relative, absolute가 주로 사용되기 때문에 꼭 이해가 필요하다. (중요!)

결론부터 정리하면,

relative은 '자기 자신을 기준'으로 위치 잡을 때 사용.

absolute는 '부모를 기준'으로 위치 잡을 때 사용된다.

relative와 absolute을 적용한 후에는 'top, bottom, left, right' 등을 이용해 세부 위치를 조정해 준다.

다음은 관련 예시!

"각 box에 position:absolute을 적용해 준다.

앞서 언급한 바와 같이 absolute는 부모의 위치를 기준으로 위치가 정해진다.

따라서 여기서 box의 부모는 body이다.

즉 absolute가 적용된 각각의 box의 처음 위치는 왼쪽 상단의 꼭지점이 되겠다.

그리고 여기에 각각 left, top을 적용해 주었다.

(여기서 z-index를 다르게 적용해서 red, green, blue 순서로 정렬했다.)"

한편, position:relative를 적용하게 되면 어떨까?

relative는 자기 자신을 기준으로 위치를 잡기 때문에 다른 콘텐츠의 위치에 아무런 영향을 미치지 않는다. 

따라서 absolute의 부모 박스 역할을 하거나 조금 이동을 할 경우에 relative을 사용한다.

(fixed는 화면 일부분에 박스를 고정시킬 때 사용.)