CSS 레이아웃

Kyungoh Kang·2020년 11월 18일
0
  1. position 속성

    fixed = 스크롤과 상관 없이 정해진 좌표에 위치 고정
    absolute = 절대 좌표에 위치 지정
    relative = 원래 있던 좌표 기준으로 위치 지정

    *absolute와 fixed를 이용해 위치를 지정했을 때는 block의 특성(width="100%")이 사라진다.

    *relative에 포함된 absulte는 relative의 위치를 기준으로 위치 지정.

  2. inline, inline-block, block

    inline = 줄 바꿈 없이 한줄에 쭉 이어지는 요소들 (span, a,...)
    *inline 요소들은 width height 값을 줘도 무시된다. margin과 padding 값도 좌우 값만 반영된다.

    inline-block = 한 줄에 쭉 이어지는 요소들이지만 inline 요소들과는 다르게 width height 값 및 margin padding 상하 값도 지정 가능하다.

    block = 요소가 한 줄에 쭉 이어지지 않고 하나의 요소가 하나의 줄을 차지한다. ex)p, h1, ,..
    *width height margin padding 값 모두 지정 가능

  3. float

    = 컨테이너의 옆에 inline요소들이 감쌀 수 있게 요소를 배치하는 것

    float: left;
    float: right;
    float: none; (기본값)
    float: inline-start; (컨테이너의 시작부분에 설정)
    float: inline-end; (컨테이너의 끝부분 설정)
    float: inherit;(부모로부터 상속)
    float: initial;(기본값으로 설정)

0개의 댓글