레이아웃 관련 display 관련 그리고 positioning, 즉 위치 정하는 속성들을 보겠습니다.

  • float

    float 은 지금까지 써오던 align 과 같습니다. float 은 흐름이라는 뜻으로 효과는 이미지를 align:left 로 했을때에 왼쪽으로 붙게되면서 옆으로 글들이 정렬되는 것을 상상하시면 이해하시기 편하실겁니다.
    left, right, none 이 3가지 값입니다. center 가 없죠? :)

    예) float: left;

  • clear

    float 속석을 없에주는 멋진 속성입니다. none, left, right, both 값들이 있으며
    left는 왼쪽에 float 이 붙지 않도록 해주는것,
    right은 오른쪽에 float이 붙지 않도록 해주는 것입니다.

  • max-height, min-height

    max-height 은 최대 길이 라는 뜻입니다. max-height: 300px; 로 되어있다면 300px 이상으로 늘어나지 않겠죠. 반대로, min-height:300px; 이라면 최소길이가 300px 이기때문에 아무리 높이길이가 준다고 해도 300px 이하로 내려가지 않습니다.

    width 에도 똑같이 min-width, max-width 가 존재합니다.

    예) max-height: 300px;
    min-height: 300px;

  • position

    위치가 방식으로 위치될것인지를 정하게 됩니다. 4가지 종류에서 결정이 가능한데,
    static = 그냥 있는 그대로 위치되는것입니다. top bottom 등의 값을 정하지 않습니다.
    relative - 자신을 담고 있는것 안에서 비례해서 위치합니다.
    absolute - 아무것도 소속되지 않고 위치합니다
    fixed

    중에서 고르시면 되겠네요.

    예) position:absolute;

  • visibility

    보이는지 안보이는지를 결정할수 있습니다. 3가지 값, visible, hidden, collapse 가 있고
    visible은 말그대로 보이게, hidden은 숨기게, collapse 는 테이블에서 그 칸,cell이 다른 column 이나 row 에게 넘겨줄때 씁니다. 칸이 합쳐지는것이죠. 테이블 말고 다른데에서 쓸데에는 hidden 과 같은 값으로 인식됩니다.

    예) visibility: hidden;

  • display

    display는 설정된곳 안의 요소들이 어떻게 표현되는지, 어떻게 나열되는지를 결정해주는 속성입니다. 여러가지 결정할수가 있는데요 그 리스트들을 보면
    none = 보이지 않슴
    inline = 같은 라인에 연결되어 끊기지 않고 표현됨
    block = 단어당, 블록당 끊어줌
    list-item = 리스트 처럼 보여주게 됩
    run-in = 표현되는곳 안의 환경에 따라 끊거나 이어줌.
    compact = 위와 같슴
    table = 테이블처럼 표현이 됨
    inline-table = 테이블처럼 표현이되며 끊기지 않고 연결함
    table-row-group = 테이블의 열 처럼 보이게됨
    table-header-group = 여러개의 열이 모여서 보이게됨
    table-footer-group = 여러개의 열이 모여서 보이게됨
    table-row = 테이블의 열 처럼 보이게됨
    table-column-group = 여러줄의 행 처럼 보이게됨
    table-column = 테이블의 행 처럼 보이게됨
    table-cell = 테이블의 한 cell, 칸처럼 보임
    table-caption = 테이블의 한 caption 처럼 보임

    이렇게 있습니다.

  • cursor

    마우스 커서의 형태,모양을 조절합니다. 이부분도 익숙하시는 분들이 꽤 되시리라 생각합니다. 마우스를 대보시면 나옵니다 :)
    url
    auto
    crosshair
    default
    pointer
    move
    e-resize
    ne-resize
    nw-resize
    n-resize
    se-resize
    sw-resize
    s-resize
    w-resize
    text
    wait
    help

    예) cursor: ne-resize;

밑은 어떠한 요소의 위치를 정할수 있는 속성들입니다.

  • vertical-align

    위아래 정렬입니다. 이보다 직접 위치를 선정해 주는것도 괜찮더군요. left, bottom, top 등을 써서 말이죠. 아무튼 위아래 정렬 값들입니다.
    baseline = 아래줄로 보이지 않게 정해져 있는 밑선에 정렬을 합니다.
    sub = subscript 와 같이 정렬을 합니다. subscript는 글씨가 작게 표현된것을 말합니다. H20 할때 20 가 작아지는 식으로요.
    super = 반대로 커진 글씨를 말하며 그처럼 정렬을 하게 됩니다.
    top = 위로 정렬됩니다.
    text-top = 그 안의 글씨의 위쪽과 정렬됩니다.
    middle = 가운데로 정렬됩니다.
    bottom = 밑으로 정렬됩니다.
    text-bottom = 글씨의 밑부분과 정렬이 됩니다.

    예) vertical-align: sub;

  • overflow

    단어 그대로 안의 내용이 넘쳤을때의 반응을 정할수 있습니다.
    visible = 보입니다.
    hidden = 안보입니다.
    scroll = 스크롤할수 있게 합니다
    auto = 자동으로 조절되게 합니다.

    예) overflow: visible;

  • left, right, top, bottom

    각각의 값을 정할수 있습니다. 홀로 쓰이거나 2가지가 같이 쓰일수 있습니다. 즉, 좌우의 값중 하나와 상하의 값중 하나를 같이 쓸수 있습니다. 예를 들어 top: 10px; left: 0px; 이 쓰일수 있지만 top:10px; bottom:10px; 이 같이 쓰일수는 없다는 것입니다. 그렇겠죠 위쪽의 위치의 값을 정하면서 아래쪽 위치 값도 정할수 없겠죠.

    위치값은 %나 auto 혹은 길이 값으로 정할수 있습니다.

    예) left: 10%

    예2) bottom: 50px; right: 10px;

  • clip

  • z-index

    화면으로 볼때에 앞, 뒤, 그뒤 등을 정할수 있는 속성입니다.
    z-index: 1; 이렇게 정해줄수 있겠죠
    단, position 값이 정해져있는 것 한에서 이루어 집니다.
    예로 position: absolute; 이 정해졌을때죠.

    z-index 에는 auto 도 가능하며 -1, -2 등의 음수도 가능합니다.

    예) z-index: -5;