레이아웃의 모든 것- float, position, inline, block

 

 

 

float

 

float는 글에 삽화를 넣을 때 사용되는 것 뿐만 아니라

레이아웃에 잡는데에도 많이 이용된다.

 

floating 효과를 피하고 싶다면 clear라는 속성을 사용하면 된다.

 

float: right; 일 경우 clear를 both혹은 right로 주면 floating효과를 무시하고

float: left;일 경우 clear를 both혹은 left로 주면 floating효과를 무시한다.

 

inline,block,inline-block

 

block레벨의 엘리먼트는 새 줄에서 시작해 좌우로 최대한 늘어나고 화면 전체를 사용한다.

그렇기 때문에 줄바꿈이 일어난다.

 

대표적인 예로는 div, p, header 태그가 있다.

 

 

inline레벨의 엘리먼트는 화면 전체를 사용하지않고 자기자신만을 포함한다. 

그렇기 때문에 줄바꿈이 일어나지 않고 나란히 배치된다.

 

대표적인 예로는 span, a 태그가 있다.

 

 

inline-block레벨의 엘리먼트는 기본적으로 inline 엘리먼트처럼 줄바꿈이 없이 나란히 배치되지만

block엘리먼트에서 사용하는 width,height,margin,padding 속성의 상하 간격 지정이 가능하다.

 

대표적인 예로는 button, select 태그가 있다.

 

 

 

 

position

 

position의 값은 relative, absolute, fixed가 있다.

 

relative는 그 자체로는 특별한 의미가 없고

함께 top,right,bottom,left프로퍼티가 같이 사용되어야 위치를 이동시킬 수 있다.

 

absolute는 특정 부모를 기준으로 절대적으로 움직이게 된다.

부모 중 position이 relative, fixed, absolute중 하나라도 있다면 그 부모에 대해 절대적으로 움직이는데

일반적으로는 기준이 되는 부모에게 relative를 사용한다.

 

fixed는 말 그대로 고정되었다는 뜻이다.

브라우저 화면의 크기만큼 화면내에서만 움직인다. 스크롤을 올리고 내려고 위치는 변하지 않는다.