position 속성

Young Thirty·2021년 11월 30일
  • relative : static(기본값)을 기준하여 상대적으로 위치를 변경한다

  • absolute : 기존 위치와 상관없이 위치를 변경할 수 있으나 부모 속성을 기준으로 위치가 변경된다.

  • fixed : 기존 위치와 상관없이 위치를 변경할 수 있으며, 부모 속성에 영향을 받지 않는다. 브라우저 화면 기준으로 위치가 변경되며 이용자가 화면의 스크롤을 내리는 등 화면이 변경되어도 위치를 고정시켜 나타낼 수 있다.

inline, inline-block, block

inline : 줄바꿈X 자식 엘리먼트의 내용만큼만 영역을 차지, 자식 엘리먼트의 내용만큼만 영역을 차지하기에 width, height를 설정 불가 _ex. span

inline-block : inline, block의 특징을 모두 가진 속성
block속성처럼 width, height를 지정 가능, inline 속성처럼 줄바꿈이 이루어지지 않으며
width, height가 지정되어 있지 않을경우 inline속성처럼 자식 엘리먼트의 내용만큼만 영역을 차지합니다.

block : 가장 많이 쓰이는 속성 중 하나입니다.
display: block; 으로 지정된 엘리먼트들은 자식 엘리먼트의 내용과 관련없이 새로운 줄에서 시작해 영역을 차지할 수 있을 만큼 차지합니다.
또한 width, height를 지정할 수 있습니다._ex. div, p, form, header, footer, section 등이 이에 속합니다.

0개의 댓글