2014년 9월 23일 화요일

[css] float , position

float는 left와 right 값을 가진다.
left 값을 주게 되면 콘텐츠는 왼쪽으로 흐르게 되고, right는 오른쪽으로 흐른다.

img{float:left; margin:10px;}
p{float:right;margin:5px;}

이렇게 줄 경우 화면이 넓어지면 이미지는 왼쪽으로 p 태그는 오른쪽으로 공간을 벌려가며 벌어져서 위치하게 될 것이다.

float는 상속이 된다.



position은 4가지 속성을 가진다.
static, absolute, relative, fixed
relation은 바로 앞에 있는 요소를 기준으로 움직인다.
absolute는 가장 강력한 포지셔닝 방법인데 요소의 절대적인 위치를 정해줄 수 있다.
absolute는 기본적으로 body 태그 기준으로 움직인다.
fixed는 absolute와 비슷하지만 스크롤을 하여도 해당 위치에 계속 고정. absolute는 스크롤이 된다.

만일 기준을 body 가 아닌 다른 태그로 잡으러면
기준으로 잡을 요소에는 relative를.. 그 요소 안에 포함돼서 절대적 위치를 조정해야 하는 요소에는 absolute를 준다.

댓글 없음:

댓글 쓰기