TIL 06. (1주차)CSS

Position

relative

position: relative; 자체로는 위치의 변동은 없다.
top,right,bottom,left 프로퍼티를 이용하여 위치를 조정할 수 있다.

absolute

position: absolute; 특정 부모(position이 relative(일반적으론), fixed, absolute)에 대해 절대적으로 움직이게 된다.

absolute 값을 가지게 되면 inline-element 처럼 내용의 크기만큼만 가로크기가 된다.

fixed

position: fixed; 스크롤을 움직여도 화면상에서 계속 같은 위치에 고정할 수 있다.

display

inline

inline 요소는 요소끼리 서로 한 줄에, 바로 옆에 위치할 수 있다.
크기는 포함하고 있는 내용의 영역만 차지한다.

block

block 요소의 바로 옆에는 다른 요소를 붙여넣을 수 없다.
가로 크기가 부모 요소의 100%를 차지합니다.

inline-block

block 요소이지만 inline 처럼 요소끼리 서로 한 줄에, 바로 옆에 위치할 수 있다.

float

float는 주로 이미지 주변에 텍스트를 감싸기 위해 만들어진 프로퍼티이다.
요즘에는 flex 속성을 기반으로 레이아웃을 잡는 경우가 훨씬 많아졌지만 이전에는 float 속성을 이용하여 레이아웃을 잡았다.