[css] - Layout

- position 속성

1. static

• html에서 static은 기본값이다. html이 작성되어진 순서대로 나열 되어있는 형태를 의미한다.
• relative, absolute, fixed 속성을 사용해서 원하는 위치에 요소를 배치할 수 있다.

2. relative

• 추가 속성을 설정하지 않을 경우에 동일하게 기존값이랑 동일하게 적용되고, 설정(top, left, right, bottom)할 경우, 상대적 위치에 존재하는 요소의 특성은 그것의 정상 위치로부터 떨어져서 조정하게 된다.

  .relative {
  	position: relative;
     top: 20px;
     left: 20px;
     width: 300px;
  }
  > ```
  > 

3. absolute

• 브라우저의 기준이 아니라 가장 가까운 부모 요소를 기준으로 해서 움직이게 된다.
  (부모 요소 => position: relative;)
• 혹시 기준을 정할 부모 요소가 없다면 body태그에 기준을 삼고 그럴경우에는 fixed와 비슷하게 작동된다.

.relative {
	position: relative;
    width: 300px;
    height: 200px;
}

.absolute {
	position: absolute;
    top: 20px;
    left: 0px;
    width: 100px;
    height: 150px;
}

4. fixed

• 스크롤을 하여도 정해진 자리에 고정이되서 움직이지 않게한다. 보통 움직이지 않고 고정시킬 top버튼, 문의하기 등 서비스 사용자에게 지속적으로 노출해야하는 요소를 브라우저에 삽입할 때 사용된다.

  .fixed {
   position: fixed;
   top: 0;
   right: 9;
   width: 100%;
   background: green;
  }

- display

1. inline

• 다른 요소들과 같은 줄에 배치되고 넓이만큼의 영역을 차지한다.
• css에서 width, height, margin 속성값이 적용되지 않는다.

2. block

• 요소가 한 줄 전체를 차지하게 된다. 화면 크기으 전체 가로폭으로 차지한다는 특징이 있다.
• width, height 속성을 부여해주면 그 넓이만큼의 영역을 차지한다.

3. inline-block

• inline과 block속성의 특징을 모두 가지고 있다.
• 한 줄에 표시될 수 있고, 넓이와 높이를 설정할 수 있다.

- float

• 이미지와 텍스트를 함께 배치하여 띄울 때 사용한다.
• 기본 html페이지 layout은 수직 흐름인데, float을 사용해서 수평으로 바꿔 줄 수 있다.

1. inherit

• 부모 요소에서 상속된다.

2. left

• 왼쪾에 박스 생성, 페이지 내용은 박스 오른쪽에 위치하게 되고, 위에서 아래로 흐르게한다.

3. right

• 오른쪽에 생성하고, 페이지 내용은 박스 왼쪽에 위치하게 되고, left와 똑같이 위에서 아래로 흐르게한다.

4. clear

• float속성을 사용하고 나서 더이상 사용하고 싶지 않을 때 clear: both; 속성을 이용하면 float을 해제할 수 있다.