[TIL] CSS 3: Display and Positioning

Positioning

1. Position

위치 속성

  • Static 기본값.
  • Relative
    위에 40px의 공간을 설정하면 아래로 40px 만큼 이동한다.
  position: relative;
  top: 40px;
  • Absolute
    설정한 영역이 가장 상단에 나타난다.
  position: absolute;
  width: 100%;  
  • Fixed
    스크롤을 내려도 위치가 고정된다.

2. Z-Index

영역이 겹칠 때 웹페이지의 앞/뒤에 나타날 영역을 정한다.

z-index값(정수)이 큰 영역이 값만큼 앞에 나타난다.

.box-top {
  background-color: Aquamarine;
  position: relative;
  z-index: 2;
}
.box-bottom {
  background-color: DeepSkyBlue;
  position: absolute;
  top: 20px;
  left: 50px;
  z-index: 1;
}

Display

1. Display

  • {display: inline;}
    줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치한다.
    대표태그: span, a, strong, img, br, input, select, textarea, button

    • width, height, margin-top, margin-bottom 지정이 불가능 하다.
    • line-height로 상하 여백 지정만 가능하다.
    • 요소 뒤에 공백이 있는 경우, 4px가 자동 지정된다.
  • {display: block;}
    항상 새로운 라인에서 시작한다. width, height, margind, padding 지정이 가능하다.
    대표태그: div, h1~h5, p, ol, ul, li, hr, table, form

  • {display: inline-block;}
    Inline과 같이 한 줄에 표현되면서 너비 및 높이를 지정할 수 있다.

2. Float

  • Float
    이미지와 텍스트가 함께 있을 때, 이미지 주위를 텍스트로 감싸기 위해 만든 것이다. 왼쪽/오른쪽 정렬.
    {float: left;}

    clear속성 또는 overflow 속성을 같이 이용한다.

  • Clear
    레이아웃이 겹치지 않도록 영역을 비운다. left, right, both, none
    clear: both;}

좋은 웹페이지 즐겨찾기