CSS

ggg9_·2020년 8월 20일
0

1. position 속성

  • relative : 기본 위치(static)를 기준으로 top, bottom, left, right(좌표 프로퍼티)를 사용하여 위치 이동.
    static을 선언한 요소와는 좌표 프로퍼티의 동작 여부 차이이며 그 외 동일.

  • absolute : 부모 or 가장 가까이에 있는 조상 엘리먼트를 기준으로 좌표 프로퍼티만큼 이동(position: static; 제외).
    엘리먼트가 static인 경우 본문(document body) 기준.

  • fixed : 부모와 관계없이 viewport를 기준으로 좌표 프로퍼티를 사용하여 위치 이동.
    스크롤이 되더라도 위치 고정.

! absolute, fixed 선언 시 block 레벨 요소의 width는 inline 요소와 같이 content에 맞게 변화되므로 적절한 width를 지정하여야 한다.

2. display

  • inline

    • 줄 바꿈 없이 다른 요소와 한 행에 위치. (문장 중간에 들어갈 수 있음)
    • content 너비만큼 가로폭 차지.
    • inline 레벨 요소 뒤에 공백(엔터, 스페이스 등)이 있는 경우 space(4px) 자동 지정.
    • inline 내에 block 레벨 요소를 포함 할 수 없음.
    • width, height, margin-top, margin-bottom 프로퍼티 지정 불가. (상,하 여백은 line-height로 지정)
  • block

    • 항상 새로운 라인에서 시작.
    • 화면 전체 가로폭 차지. (width:100%)
    • block 레벨 요소 내에 inline 레벨 요소 포함 가능. (일반적)
    • width, height, margin, padding 프로퍼티 지정 가능.
  • inline-block

    • inline 레벨 요소와 같이 한 줄에 표현되면서 width, height, margin 프로퍼티 지정 가능. (inline과 block 레벨 요소의 특징을 모두 가짐)
    • 상, 하 여백을 margin과 line-height 두가지 프로퍼티 모두를 통해 제어할 수 있다.
    • content 너비만큼 가로폭 차지.
    • inline-block 레벨 요소 뒤에 공백(엔터, 스페이스 등)이 있는 경우 space(4px) 자동 지정.

3. float

  • 이미지와 텍스트 배치 용도로 등장했지만 레이아웃용으로 많이 사용.
  • value : left; right; none; inline-start; inline-end
    + clear 를 사용해 제어 가능.

0개의 댓글