[Html, Css]레이아웃

1. position
   (1) relative
   position : relative ;
   아이템의 위치를 현재 위치에서 조정할 때 사용되는 속성이다.
   이것만 적용하면 바뀌는 것은 없지만 top, bottom, right, left 속성에 값을 추가하여 조정해주면 위치가 바뀐다.

버튼을 하나 만들었는데 아무것도 지정해주지 않았을 때는 왼쪽 상단에 딱 붙어있다.

button{
	position : relative;
    top : 50px;
    left : 50px;

다음과 같이 css를 추가 해주었더니 밑의 사진과 같이 버튼이 떨어진 것을 볼 수 있다.
코드를 해석해보면 현재위치에서 상단에서 50만큼 왼쪽에서 50만큼 떨어뜨린다는 뜻이다.

(2) absolute
position : absolute ;
아이템의 위치를 부모의 위치를 기준으로 조정할 때 사용되는 속성이다.
기준이 되는 부모에 relative 속성을 지정해주어야 한다.

(3) fixed
position : fixed;
아이템의 위치를 고정할 때 사용되는 속성이다.

위와 같이 버튼의 속성을 fixed로 설정하고 페이지를 다른 글들로 채워놓았다.

스크롤을 올리고 내려도 버튼창은 계속 해당 위치에 고정되어있다.

2. inline, block, inline-blcok
   (1)inline과 block속성

   inline, block, inline-block은 displayd에 적용할 수 있는 속성들이다.
   inline의 크기는 바꿀 수 없고 content의 길이에 따라 정해진다. span태그가 기본적으로 inline속성을 갖고 있다. 해당 크기가 다 채워지지 않으면 옆으로 아이템들이 쭉 나열된다.

   반대로 block은 한 줄을 통째로 차지한다. content의 크기가 아무리 작더라도 한 줄을 차지하며 다음오는 아이템은 다음줄에 자동적으로 배치된다.
   p태그가 기본적으로 block속성을 갖고 있다.

   span태그와 p태그의 비교
   
   다음과 같이 코드를 나눠서 썼을 때
   
   다음과 같이 span즉 inline속성은 옆으로 나열 p태그 즉 block속성은 밑으로 쌓이는 것을 볼 수 있다.
   
   
   별다른 css를 지정해주지 않았지만 span태그와 p태그가 inline과 block으로 지정되어있는 것을 확인할 수 있다.

   (2)inline-block
   inline-block은 자신의 크기만큼 공간을 차지한다. 한 줄에 크기이상의 컨텐츠가 쌓이면 자동으로 다음 줄로 넘어가게 된다. 눈으로 이해하기 쉽게 div를 inline-block으로 설정하고 가로 넓이가 200 세로 높이가 300인 상자 5개를 만들고 body의 넓이를 800으로 설정해두었다.
   
   코드는 다음과 같고 쌓이는 것을 확인하기 위해 여백을 0으로 설정하고 float:left;도 적용하였다.
   
   결과가 다음과 같이 나오는 것을 확인할 수 있다.

   크기가 부모영역보다 작다면 옆으로 나열되지만, 만약 부모영역보다 커진다면 다음 줄로 쌓이게된다.