position - relative, absolute, fixed
float는 css에서 정렬하기 위해 사용되는 속성이다.
-문서나 이미지 등 레이아웃을 정렬하거나 배치할때 사용한다.float 속성값
-none : 띄우지 않음
-left : 왼쪽에 띄움
-right : 오른쪽에 띄움
-initial : 기본값으로 설정
-inherit : 부모 요소로부터 상속
ex)
img{ float: left; }
float :realative
-위치 계산 시, 현재 위치에서 상대적인 offset 속성을 줄 수 있다.
float :absolute
-부모 중에 static이 아닌 요소의 위치를 기준으로 상대적인 offset 속성을 줄 수 있다.
float :fix
-스크롤에 영향을 받지 않고 고정된 위치를 설정할 수 있다.
ect) offset 속성 : top, left, rigth, bootom
inline, inline-block, block 에 대해서
inline
display 속성이 inline으로 지정된 요소는 줄바꿈 없이 한 줄에 다른 요소들과 나란히 요소가 배치된다.
inline 요소를 사용할 때 주의할 점은 width,height 값을 따로 주더라도 이 값을 무시되고, margin,padding 속성은 좌우 값만 반영되고, 상하 값은 반영되지 않는다.
대표적인 inline 속성의 태그는 <span>,<a> 등이 있다.
또한 이 태그들이 아니더라도, display:inline을 사용하면 해당 요소의 속성을 inline으로 바꿀 수 있다.
inline-bolck
inline-block 은 inline이 적용시키지 못했던 margin, width 등의 속성 값을 적용 가능하게 해주는 속성.
Ex)
<button>, <select> ect...
block
display:block으로 설정된 요소는 전 후 줄바꿈이 들어가 줄 전체를 자치하게 된다.
뿐만 아니라 inline 요소와 달리 width, height, margin, padding 속성이 모두 반영 가능.
Ex)
<div>, <p>, <h1> ect...
float
float는 css에서 정렬하기 위해 사용되는 속성이다.
-문서나 이미지 등 레이아웃을 정렬하거나 배치할때 사용한다.float 속성값
-none : 띄우지 않음
-left : 왼쪽에 띄움
-right : 오른쪽에 띄움
-initial : 기본값으로 설정
-inherit : 부모 요소로부터 상속
