CSS - Element가 배치되는 방법들

CSS - Element가 배치되는 방법

1. display : 기본적으로 Element의 배치 형식을 설정

  1) display :  block;

    :block 형식은 벽돌을 쌓은 것처럼 위에서 아래로 순서대로 채워짐
    (기본적으로 block인 태그: div, p , ...)
    예시:http://jsbin.com/xabafaxasi/1/edit?html,css,output

  2) display : inline;

    : 기본적으로 왼쪽에서 오른쪽으로 가지만 크기를 초과할 경우 다음 라인으로 넘어감
    (아주 기본적인 스타일)
    예시: http://jsbin.com/mefebos/2/edit?html,css,output
    (기본적으로 inline인 태그: span,a ,...)

2. position

  1) static

    :기본값, 그냥 순서대로 배치

  2)absolute

    : 기준점에 따라서 위치 top(필수), left(필수), right, bottom 사용
    * 기준: 상위 Element중 static이 아닌 position을 가진 Element

  3)relative

    :원래 자신이 위치해야할 곳을 기준으로 top, left, right, bottom을 사용해 이동

  4)fixed

    :스크롤을 내리든 말든 항상 정위치, viewport(전체화면)를 기준으로 위치 조절가능
  예시: http://jsbin.com/mesoqaf/edit?html,css,output

3. margin

  :근처의 엘리먼트와의 간격을 설정가능
  top, left, right, bottom을 사용함

4. float

  :엘리먼드가 둥둥뜨게 만드는것?
  ( 한 엘리먼트를 float처리하면 다른 엘리먼트는 이 엘리먼트가 없는것 처럼 행동)
  예시: http://jsbin.com/lecigox/1/edit?html,css,output

5. box-model

  :블록 엘리먼트의 경우 box의 크기와 간격으로 배치를 추가 결정할수 있습니다.
  1)margin: 위 처럼 Element간의 간격을 설정할떄 사용합니다.
  2)border: 블럭 엘리먼트를 감싸는 테두리를 뜻합니다.
  3)padding: 실제 블럭안의 내용(content)과 border간의 간격을 top, left, right, bottom을 사용해 결정합니다.
  자세한 예시: https://www.w3schools.com/css/css_boxmodel.asp
  *기본적인 박스의 크기: 부모의 크기를 만큼 가지게 됩니다.

6. box-sizing & padding

  : 기본적으롶 padding 속성을 늘리면 box 사이즈가 같이 늘어납니다.
  이를 컨트롤하기 위해서 box-sizing속성을 사용합니다.
  예시: http://jsbin.com/wosuwop/edit?html,css,output
  box-sizing:content-box; : 기본값
  box-sizing:border-box; : box 사이즈를 최대한 고정하려고 합니다. but padding이 너무 크다면 늘어날 수 있습니다.

*팁!: CSS는 1을 앞에 줘서 주석처리가 가능, w3w3schools에는 자세한 예시와 설명이 나와있습니다.(근데 영어입니다.ㅠㅜ)

출처:http://www.edwith.org/boostcourse-web/lecture/16677/