TIL 01. - CSS

# position 속성 - relative , absolute , fixed

# inline , inline-block, block

# float

position 속성

• relative
  - absolute의 중심을 잡아주는 영역으로 absolute를 사용하는 자식태그의 부모태그에
  {position: relative;} 속성을 적용하여 자식태그의 {position: absolute;}영역을 잡아주어
  html 레이아웃 영역의 무너짐을 방지하는 속성역할. 별도로 속성을 선언하지 않을경우
  body태그가 기준됨

• absolute
  {position:absolute; top: 0; left: 20px;}

  absolute 속성을 사용할경우 relative 이내의 영역안에서 다른 태그들과의 충돌이 일어나지않으며,
  html 레이아웃 영역에서 z-index:1 를 사용한것과 같은 효과가 발생한듯 보인다.

  ---

  화면 구현일때 사이트의 축소 확대시 absolute 속성값이 이동하는듯 잡히게 되어 레이아웃에
  서 이탈하는 경우가 발생하기도하여 정확하게 상용할 레이아웃을 설정하는것이 좋다.

  ---

• fixed
  {position:fixed;}
  absolute 속성과 동일하게 구현되어지는 듯하지만, 화면 구현시 모니터 창에 고정되어진듯 하여,
  스크롤을 이동하거나 화면축소 확대를 할경우에도 모니터 화면에 고정된 그자리그대로의 값에 위치한다.

inline , block , inline-block 속성

• html & css 페이지의 내용을 상세히 설명하자면,

  같은 inline 속성들끼리는 width 값이 허용된 범위내에서 서로 한줄로 나란히 붙으려는 속성
  block 속성은 해당 태그의 width 설정값이 전체의 여유 width 값보다 적어도 무조건 한줄에 block 속성만 유지하려는 속성.
  inline-block 속성의 경우 a , img 태그들이 종종 사용되는 편이며, inline 속성을 버리지않으면서도 block 의 속성을 가지고있어, inline 속성에서 주로 사용되는 padding 값과, block 속성에서 주로 사용되는 marign 값을 적용시키려는 속성.
  

float 속성

- float 속성은 이해쉽게는 position과 비슷하나, 요즘에는 flex 속성을 주로 사용하는 편이다.

{float : left & right & top & bottom;}

속성으로 사용되며, 상위(같은 자식태그) 영역의 태그에 해당하는 width 값이 남을 경우
{float:left;}의 속성을 사용할경우 상위(같은 자식태그) 태그의 바로 옆에 붙는다.
이런경우 block의 영역이 inline 요소로 변환되어 표현된다.