position

position의 속성

• HTML 문서에서 요소들의 위치를 배정해주는 역할을 함
• position:static(아무것도 정해주지 않은 기본값) 일 경우를 제외하곤 left,right,top,bottom 이 함께 사용 됨

position의 종류

• static -요소를 문서 흐름에 맞추어 배치.
  이전 요소(주로 부모 요소)에 자연스럽게 연결하여 위치를 지정.

• relative - 이전 요소(주로 부모 요소)에 자연스럽게 연결하여 위치를 지정.

• absolute - 원하는 위치를 지정해 배치. 

•  fixed - 지정한 위치에 고정하여 배치.

•  sticky- 위치에 따라서 동작방식이 달라짐. 요소가 임계점(scroll 박스 기준) 이전에   는 relative와 같이 동작. 그 이후에는 fixed와 같이 동작.

position: static

postion 속성을 부여해주지 않으면 생기는 기본 값. 즉, html에 입력된 순서대로 표시되는 것 을 뜻하며, left, right, top, bottom은 함께 이용될 수 없음

position: relative

HTML에서 지정된 위치를 기점으로 이동시킬 수 있는 속성.
예를들면 이미 지정된 위치에서 left:30; top:30; 을 하면 기존 위치에서 저 만큼 이동 하는 것

position: absolute

특정 부모에 대해 절대적인 위치에 둘 수 있음 ( 부모중 position이 relative, fixed, absolute 하나라도 있으면 그 부모에 대해 절대적으로 움직임)
보통 relative를 가진 부모와 함께 쓰임

position: fixed

말 그대로 화면을 움직여도 그 위치에 요소들을 고정시키는 속성

position: sticky

요소를 일반적인 문서 흐름에 따라 배치하고, 테이블 관련 요소를 포함해 가장 가까운, 스크롤 되는 조상과, 표 관련 요소를 포함한 컨테이닝 블록(가장 가까운 블록 레벨 조상) 을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용함. 오프셋은 다른 요소에는 영향을 주지 않음.

inline, inline-block, block 에 대해

CSS에서 display는 레이아웃을 제어하기 위한 가장 중요한 프로퍼티임.
모든 요소에는 각각의 기본값이 있는데, 대부분의 기본 값은 inline 과 block 임.

inline

display 속성이 inline으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다. 대표적인 inline 엘리먼트로 < span >이나 < a >, < em > 태그 등을 들 수 있습니다.

예를 들어, 여러 개의 inline 엘리먼트 다음과 같이 마크업하면 줄바꿈 없이 순서대로 한 줄에 보이게 됩니다.

block

display 속성이 block으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지합니다. 대표적인 block 엘리먼트로 < div >이나 < p >, < h1 > 태그 등을 들 수 있습니다.

예를 들어, 여러 개의 block 엘리먼트 다음과 같이 마크업하면 매번 줄바꿈 되어 여러 줄에 보이게 됩니다.