1. Position의 속성
쉽다. 말 그대로 어디 위치하게 해주냐 이말이다.
Position 속성에는 대표적으로 relative, absolute, fixed, static 이 있다.
(# static은 기본값이므로 잘 사용하지 않아 서술하지 않겠다)
●relative : 기본적으로 표시된 위치를 기준으로 새로운 위치로 지정된다. 하지만 top, botto, left, right 로 값을 지정해 주지 않으면 아무 변화가 없다.
●absolute : 부모요소가 절대적 기준으로 위치가 지정된다. 일반적으로, absolute 사용시, 부모요소에 position: relative를 부여한다.
●fixed : 지정한 위치에 고정하면 스크롤을 움직여도 항상 그 자리에 위치해 보인다.
2. Display의 속성 - block, inline, inline-block
화면상에 어떻게 보여줄지에 대한 속성이다.
●block : div, p, li, h1 등이 대표적인 block 요소에 해당하는 태그들이다. block은 무조건 한 줄을 점유하여 바로 옆에 다른 요소를 붙일 수가 없다.
●inline : span 이 대표적인 inline 요소에 해당하는 태그이다. inline은 텍스트 크기만큼만 점유하여 바로 옆에 다른 요소를 붙일 수가 있다.
●inline-block : inline 형식으로 배치되지만 크기 조절이 가능한 속성이다. 쓸데없는 공간을 차지 않는다는 장점이 있어 inline 보다 주요하게 사용된다.
3. Float
display가 block 속성인 요소들을 레이아웃 시킬때 사용하는 속성이다.
●float:none : 기본 속성으로 적용되지 않는다는 의미의 속성값이다.
●float:left : 적용된 태그에 대해서 왼쪽 정렬 하는 속성값이다.
●float:right : 적용된 태그에 대해서 오른쪽 정렬 하는 속성값이다.
<추후 수정 예정>
