18-2. 레이아웃의 모든 것

bab_bury·2020년 8월 20일
0

html & css

position 속성 - static, relative, absolute, fixed

01/ static(기본위치)

  • 기본위치

02/ relative(상대위치)

  • 기본위치를 기준으로 좌표 프로퍼티(top, bottom, left, right)를 사용하여 위치를 이동시킨다.

03/ absolute(절대위치)

  • 부모요소 또는 가장 가까이 있는 조상요소(static제외)를
    기준으로 좌표 프로퍼티(top, bottom, left, right)만큼 이동한다.
    즉, 나머지 프로퍼티가 선언되어 있는 부모 또는 조상 요소를 기준으로 위치가 결정되는 것이다.

04/ fixed(고정위치)

  • 부모 요소와 관계없이 브라우저의 viewport를 기준으로 좌표프로퍼티를 사용하여 위치를 이동시킨다.
    스크롤이 되더라도 화면에서 사라지지 않고 항상 같은 곳에 위치한다.

inline, inline-block, block 에 대해서

  • inline 요소는 block의 요소와 성질이 반대이다.
    말 그대로 요소끼리 서로 한 줄에, 바로 옆에 위치할 수 있다는 뜻이다.
    inline 성질을 갖도록 하는 CSS property는 display와 float이 있다.
    -><span>, <a>, <img> 태그
  • span은 오른쪽 정렬을 부여해도 오른쪽 정렬이 되지 않는다 (inline element)
    display: inline-block; 으로 하면 가능(block element의 특징을 가져옴)
  • 대부분의 HTML element(요소)는 block 요소이다.
    block 요소의 의미는, 이 요소 바로 옆(좌우측)에 다른 요소를 붙여넣을 수 없다는 뜻이다.
    -><header>, <footer>, <p>, <li>, <table>, <div>, <h1> 태그

float에 대해서

CSS를 사용하여 layout을 구성할 때에 자주 사용되는 핵심 기술은 float이다. float 속성에는 left, right, none 가운데 하나를 값으로 줄 수 있다.

0개의 댓글