CSS(2) - Diplay와 Position

Diplay : 각 태그들이 가지고 있는 inline, block 특성을 바꿀 수 있다.

• inline : tag내 content 자체만을 꾸며준다.
  tag에 지정해준 width, height는 무시하고 content의 크기에 맞춰 한 줄에 나열한다.
• inline-block : 한 줄에 block단위로 (content의 크기엔 상관없이) 적용한 스타일에 맞춰 나열한다.
• block : 한 줄에 하나씩만 나열한다.

 

Position(default : static)

• static : html에 정의된 순서대로 브라우저 상에 자연스럽게 보여지는 것.
• relative : item이 원래 있어야 할 위치에서 설정한 (top, left, bottom-left 등) 스타일에 맞춰 보여지는 것.
• absolute : item이 담겨있는 가장 가까운 box의 위치를 기준으로 설정한 스타일에 맞춰 보여지는 것.
• fixed : item의 위치에서 벗어나 윈도우 안에서(기준으로) 설정한 스타일에 맞춰 보여지는 것.
• sticky : 스크롤링이 되어도 item의 원래 위치에 계속 보여지는 것.

 

유용한 사이트 (속성 사용 가능 여부 확인)

 - can I use - up-to-date browser support tables for support of front-end web

---

참고

- 드림코딩 앨리 - CSS 레이아웃 정리 display, position 완성 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript