[CSS] CSS Layout의 모든 것

c0zyb1ue·2022년 9월 20일
0

1. position 속성 - relative, absolute, fixed

absolute: 절대 좌표와 함께 위치를 지정해 줄 수 있습니다.
relative: 원래 있던 위치를 기준으로 좌표를 지정합니다.
fixed: 스크롤과 상관없이 항상 문서 최 좌측상단을 기준으로 좌표를 고정합니다.

  • 좌표를 지정 해주기 위해서는 left, right, top, bottom 속성과 함께 사용
  • position을 absolute나 fixed로 설정시 가로 크기가 100%인 block 태그의 특징이 사라지고 inline-content가 됨.
  • relative 인 컨테이너 내부에 absolute인 객체가 있으면 절대 좌표를 계산할 때, relative 컨테이너를 기준점으로 잡게 됩니다. (없다면 전체 문서가 기준)

Learn CSS Layout

CSS3 Layout

CSS2 Box Model

2. inline, inline-block, block 에 대해서

display라는 웹페이지의 표시형식을 나타내는 property의 값에 해당하는 표시형식

1. block

한 영역을 차지하는 박스형태, 기본적으로 width는 100%로 설정됨.

width, height 지정 가능 / margin, padding 지정 가능

width를 지정해도 남은 영역을 모두 차지 한다.

2. inline

inline은 기본적으로 컨텐츠가 존재하는 영역만 차지한다.

그러므로 width와 height를 지정할 수 없다.

3. inline-block

inline-block 속성은 block속성과 inline의 속성을 섞어놓은 것 같다.

width와 height를 지정 할 수 있지만,

지정하지 않으면, inline 처럼 콘텐츠가 존재하는 영역만 차지한다.

0개의 댓글