프리코스 체크포인트 두번째!(이자 마지막! 어디까지나.. 사전 학습..)
질문> 1. position속성 - relative, absolute, fixe
2. inline, inline-block, block에 대해서
3. float에 대해서위 세가지에 대해 알아보고자 한다.
먼저 위의 속성들은 웹페이지를 만들기 위한 여러가지 속성이고 비슷하지만 다르고 또 다르면서 비슷한 내용으로 화면에 보여지는 내용을 '위치'시키고자 하는 녀석들이다.
먼저 position은 5가지(static, relative, absolute, fixed, sticky)의 사용 방법이 있는데 relative, absolute, fixed 세가지 속성이 가장 많이 쓰이고 있으며 설명하는 자료들은 너무 많지만 최대한 쉽게 이해할 수있도록 풀어보자면 우리가 보는 웹페이지가 비디오 카메라로 찍는 화면이라고 한번 상상해보자 카메라 란즈에 파리 한마리가 붙어있고 코알라가 아기 코알라 한마리를 앉고있다고 한번 그림으로 보자면
이런 모습이지 않을까? 파리는 카메라 렌즈에 붙어있기 때문에 카메라를 돌려도 항상 그자리에 보일것이다 fixed 속성은 카메라에 붙은 파리처럼 항상 그자리를 지키는 보통 웹페이지 오른쪽 하단에 top아이콘으로 누르면 맨 위로 올려주는 역활을 하는 녀석들을 볼 수 있을 것이다. 엄마 코알라는 relative속성으로 내가 지정해 놓은 위치에 있는 속성으로 아무것도 지정하지않으면 기본 자리에 있으며 엎혀있는 아기 코알라는 fixed와 비슷하지만 지정해놓은 위치에서 움직이지 않는 것으로 엄마코알라가 보이지 않는 화면에선 보이지 않을 것이다.
이어서 inline과 inline-block, block에 대해서 살펴보면 웹페이지는 한줄 한줄씩 구성 되어 있는데 여러가지 요소들은 그 줄에 어떻게 사용될지 속성을 갖고 있다 이를 결정하는 방법 세가지가 inline과 inline-block, block으로 이번엔 웹페이지 한줄을 지하철 의자라고 상상해 보자 사람들이 하나둘 타기 시작하고 빈자리에 앉을 것이다 보통 한자리에 한명씩 앉지만 어쩌면 살이 많이 찐 사람은 두자리를 차지할지도 모른다 이처럼 inline요소는 자기 크기 만큼 한줄에 차곡차곡 쌓이는 속성이다
반면에 block은 앉아 있으면 아무도 그 줄에 앉지 못하는 쩍벌남 무개념 지하철 민폐 승객으로 한줄에 inline요소 하나만 들어갈 수 있다.
마지막으로 inline-block은 기본적으로 inline과 갖지만 요소에 가로 세로 크기를 정할 수 있어 본래 크기보다 더 많은 자리를 차지하게 할 수 있으며 정해진 크기 이후에 한줄에 차곡차곡 쌓이는 요소로 inline에 살찐 사람은 면적이 커서 두자리를 차지하는 거라면 inline-block은 면적은 적어도 정해진 범위를 갖고 있어서 여러자리를 차지할 수 있는 것으로 범접할 수 없는 오로라를 갖고있는 분이 타고 있으면 바로옆에 앉기 부담스러운 느낌이랄까?
마지막으로 float속성은 '떠있다'는 뜻으로 요소가 상대적으로 왼쪽 오른쪽으로 떠서 영향을 받지 않는 것으로 아래 그림과 같이 본문에 왼쪽 혹은 오른쪽에 띄울 수 있는 기능이다. 
사실 좀더 다양하게 쓰이고 요즘보다 과거에 레이아웃을 짤 때 중요한 요소로 보이지만 개인적으로 어느정도만 이해한 상태여서 설명을 깊게하기 어려워 좀 더 경험적으로 사용하고 이해해봐야 할것 같다.
