WECODE TIL - css position & layout

1. position은 위치를 결정하는 CSS로 위치에 구애받지 않고 아무 위치나 구현한 수 있는 프로퍼티이다
   종류로는 ,relative, absolute, fixed가 있다.

• relative
  그 중 'relative'는 다른 위치 설정을 추가하지 않는 한 'static'과 동일한 결과를 보여준다. 여기서 주의 할 점은 말 그대로 상대적이라는 것 입니다. 자기 자신의 이전 엘리먼트 요소에 상대적으로 top, left, right, bottom 값이 잡히게 되는 것입니다. 즉, 원래 static 이었을 때를 기준으로 해서 위치가 조정 되게 됩니다.

  .relative1 {
  position: relative;
  }
  .relative2 {
  position: relative;
  top: -20px;
  left: 20px;
  background-color: white;
  width: 500px;
  }

- absolute
 절대값을 가지며 어떠한 영향을 받지 않고 위치를 고정하여 효과를 줄 수 있다. 스크롤을 내려도 변화를 주지 않는 절대적요소이다
 부모 엘리먼트를 기준으로 절대적인 위치에 둘 수 있다.  하지만 상위요소가 없으면 body를 기준으로 고정값을 갖는다. 
 
 `````
 absolute {
  position: absolute;
  top: 120px;
  right: 0;
  width: 300px;
  height: 200px;
}
``````
 - fixed
 
 고정(fixed) 엘리먼트는 뷰포트(viewport)에 상대적으로 위치가 지정되는데, 이는 페이지가 스크롤되더라도 늘 같은 곳에 위치한다는 뜻입니다. 
 relative와 마찬가지로 top이나 right, bottom, left 프로퍼티가 사용된다.
``````
.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  background-color: white;
}
``````


2. inline, inline-block, block 

- block
block요소와 inline요소의 특징을 함께 가지며 inline 요소처럼 한 줄에 배치가 가능하고 width, height 값을 지정 할 수 있다.
또한 가로 열을 모두 차지하며 block요소 다음에 등장하는 태그는 줄바꿈이 된다.


- inline
<a>, <span>, <img> 등이 inline 요소로 가로로 나열 가능하다. 한줄에 계속 나열 가능한 기능이다.


- inline-block
inline요소와 block를 결합한 요소로 한 칸안에 크기조절이 가능하다 가로로 block를 나열 할 때 쓸 수 있다. 

   > 줄바꿈이 이루어지지 않는다.
    block처럼 width와 height를 지정 할 수 있다.
    만약 width와 height를 지정하지 않을 경우, inline과 같이 컨텐츠     만큼 영역이 잡힌다.
``````
  .box2 {
  display: inline-block;
  width: 200px;
  height: 100px;
  margin: 1em;
}
  `````
  
  
  
- block vs liline
![다운로드.png](https://velog.velcdn.com/post-images%2Fkj1509%2Fed81c690-1245-11ea-bcd4-937a3e70a114%2F%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C.png)

 

  
3. float에 대해서
이미지 주변 text를 지정 할 때 쓸 수 있는 기능이다. 
  float- left: 왼쪽에 블록 박스를 생성. 텍스트는 오른쪽에 배치되며 위에서 아래로 흐름.

  float- right: 오른쪽에 블록 박스를 생성. 텍스트는 왼쪽에 배치되며 위에서 아래로 흐름.