position 속성

CSS 포지션에는 5가지가 있다.

static, relative, absolute, fixed, sticky

static

기본값.

relative

top,right,bottom,left를 통해 기본위치에서 이동시킬수있음.(display 속성을 주지않으면 동작하지않음.)

absolute

절대적인 위치에 고정시킴. 항상 그위치에 고정됨.(전체HTML기준)

부모요소가 있을때만 고정됨, 부모요소가 없으면 fixed와 동일한기능.

fixed

한위치에 고정시켜줌 스크롤을 내려도 그자리에 고정됨.

sticky

맨처음 보일때는 안붙어있지만 스크롤을 내리다보면 상단에 고정됨.

display 속성

Display 속성중 none을 제외한 종류는 3가지가있다.
block, inline, inline-block

block

첫번째 블록은 한줄을 전부다 차지하게 해준다.
원래 span태그는 한줄을 차지하지않고 텍스트가 있는부분만 차지하게되는데, 그span태그에 display속성을 block을 주게되면 한줄을 전부 차지하도록 바뀜.

기본 block태그 : h1,h2... 등 제목태그들, div태그 등등

inline VS inline-block

inline

위에 말했던 span태그의 성질이다 content와 text의 크기만큼만 차지하고 바로뒤에 다른 요소가 붙음.
특징 :

• width/height 적용 불가
• margin/padding-top/bottom 적용 불가
• line-height 원하는 대로 적용 불가(span에 적용안되고 감싸고 있는 div 전체 크기에만 영향 등)

inline-block

위에처럼 똑같이 다른요소가 붙지만

• width/height 적용 가능
• margin/padding-top/bottom 적용 가능
• line-height 원하는 대로 적용 가능(span에 적용안되고 감싸고 있는 div 전체 크기에만 영향 등)
  이런 부가적인요소가 사용 가능하다.

참고사이트 : https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=leesd88&logNo=220682157303