Position

• 요소의 위치 지정 방법의 유형(기준)을 설정해주는 속성입니다.
  top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정합니다.

static

• 일단 모든 태그들의 default값은 deposition: static 상태입니다.
  그리하여 기본적으로 static이라 따로 써주지 않아도 되며, 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓입니다.

relative

.box {
  position: relative; /* 기준 + 배치 */
  top: 50px;
  right: 100px;
}

• 요소 자신을 기준으로 배치합니다. 위의 값 같은 예로 배치의 용도로 활용하는 것을 권장하지 않습니다

absolute

<div class="parent-box">
  <div class="child-box"></div>
</div>

.parent-box {
  position: relative; /* 기준 */
}
.child-box {
  position: absolute; /* 배치 */
  top: 50px;
  right: 100px;
}

• 위치 상 부모(조상) 요소를 기준으로 배치하며 위치 상 부모요소에 static을 제외한 position 속성의 값이 꼭! 존재해야 합니다.
  위치 상 부모 요소에 미리 적용된 position 속성의 값이 없는 경우에는, 위에서 살펴본 relative 값을 적용합니다.

<div class="grand-box">
  <div class="parent-box">
    <div class="child-box"></div>
  </div>
</div>

.grand-box {
  position: relative; /* 기준 */
}
.parent-box {
  /* 기준 아님 */
}
.child-box {
  position: absolute; /* 배치 */
  top: 50px;
  right: 100px;
}

• 위의 모습처럼 position 속성의 값이 없다면 조상(상위)요소로 올라가면서 위치 상 부모 요소를 찾아 기준하게 되는거죠!

fixed

• 이번에 알아볼 것은 fixed 입니다. 사용자의 브라우저 창을 기준으로 배치하는게 특징입니다.

sticky

• 스크롤 영역 기준으로 배치하며 IE에서는 지원이 불가하다고 하네요?
  처음 알았습니다ㅎㅎ

Display

• 요소의 박스 타입(유형)을 설정합니다.
  속성으로는 block, inline, inline-block, flex, none등이 있는데요!
  중요한 몇가지를 설명해보겠습니다!

block

• 우선 block 요소입니다 말그대로 block 값을 가진건데요!
  저희가 잘 아는 div,p 태그 등이 있겠습니다.

display: block;

a {
  width: 100px;
  height: 100px;
  background: red;
  display: block;
}

• 위의 예를 들어보면 < a>요소는 inline 특성이기 때문에 width,height값을 지정할 수 없지만, display 속성 값을 block 으로 설정하면 width,height값을 지정할 수 있게되는거죠!

inline

• 대표적인 태그로는 span을 예로 들 수 있는데, text 크기만큼만 공간을 점유하고 줄바꿈을 하지 않습니다.
  
  위의 block요소와 다르게 width, height 값을 적용할 수 없으며, margin과 padding의 top/bottom이 적용 안 된다고하네요!

inline-block

• inline-block 속성은 inline 속성의 특징과 block 속성의 특징 둘 다 가지고 있는 속성으로서, 기본적인 특징은 inline 속성(줄바꿈을 하지 않고, 동일한 라인에 작성가능)과 같지만 inline속성에서는 할 수 없던 width, height 값을 지정할 수 있습니다!
  물론 margin과 padding의 top/bottom 값도 적용이 되겠죠?!

etc

• Flex : 사실 etc에 넣기에는 정말 각 요소를 정렬할 수 있는 효율적인 방법을 제공하는 속성입니다. 이 글에서 다루기에는 양이 너무 방대해지므로 최대한 빨리 기회를 내서 display: flex 를 다뤄보도록 하겠습니다!
  
  ps : 게임하고 있으면 시간은 금방 지나갈거에요 >>> 게임하기

• none : 적용된 태그의 자기영역을 지워버립니다. 말 그대로 없던 태그마냥 웹 문서 상에서 보이지 않게 되는거죠!