1. position 속성 - relative, absolute, fixed

• relative

position : relative; 

이 자체로는 특별한 의미가 없기 때문에 위치에 변화는 없다.
위치를 이동시켜주는 top,right,bottom,left프로퍼티가 있어야 원래의 위치에서 이동할수가 있다.

• absolute

position : absolute;

이름대로 절대적인 위치에 둘 수 있다.
특정 부모에 대해서 절대적으로 움직임을 따르게된다.
부모 중에 position이 relative,fixed,absolute 하나라도 있으면 그 부모에 대해 절대적으로 움직이게 된다.
일반적으로 absolute를 쓸 경우, 절대적으로 움직이고 싶은 부모에게 position:relatve를 부여해주면된다.

• fixed

position : fixed;

말그대로 고정시키겠다는 의미이다.
fixed는 부모선택자도 필요없이 원하는 요소를 화면에 고정시킬 때 쓰는것이다.
설정을 해두면 눈에 보이는 브라우저 화면 크기 만큼 화면 내에서만 움직인다. right:0; 으로 해두면 오른쪽에서 0떨어져있다는 의미로 오른쪽에 딱 붙어있게된다.

2. inline, inline-block, block 에 대해서

• block

  • 요소들이 수직 방향으로 하나씩 쌓인다.
  • 너비와 높이를 가질 수 있다.
  • 100%의 너비를 가진다.

• inline

  • content가 포함하고 있는 내용만큼만 너비를 차지한다.
  • 줄바꿈이 일어나지 않는다.
  • 너비와 높이를 가질 수 없다. (height, width)
  • margin과 padding이 가로 방향으로만 적용된다.

• inline-block

  • inline 같은 외관을 가지고 있지만, block 같은 특징을 가지고 있다.
  • [Like inline]
    • content의 크기만큼만 공간을 차지한다.
    • 줄바꿈이 일어나지 않는다.
  • [Like block]
    • 너비와 높이를 가질 수 있다.
    • margin과 padding을 적용할 수 있다.

3. float에 대해서

"float"란 떠오르다라는 의미를 가지고 있다.
신문 레이아웃에서 볼 수 있는 것처럼 텍스트 내부에 float하는 이미지를 포함하고, 해당 이미지의 좌우측 주변으로 텍스트를 둘러싸는 레이아웃을 구현할 수 있다.

• Float와 함께 사용하는 clear
  레이아웃이 겹치지 않도록 영역을 비운다.
  텍스트와 이미지의 높이가 동일하지 않을 때, 튀어나온 단락에 clear 속성을 추가하여 정리할 수 있다.

• Float와 함께 사용하는 overflow
  상자 밖으로 유출되는 contents를 hidden/scroll/visible 할 수 있다.