CSS 레이아웃

배경 스타일

■ display

   display는 설정된 곳 안의 요소들이 어떻게 표현되는지, 어떻게 나열되는지를 결정해주는 속성이다.

   값

    none : 보이지 않음(영역이 없어짐)

    inline : 같은 라인에 연결되어 끊기지 않고 표현됨(width, higth 속성은 무시됨)

    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 처럼 보임

    inline-block : block 속성을 가진 태그에 외부 태그와의 상효작용은 inline 으로 동작하도록 함.  즉, div 에 이 속성을 걸면 width 등을 정하면서도 표시되는 건 inline 처럼 작동함.

■ block-level과 inline-level

  HTML element 를 크게 2가지로 구분해보면 head element 처럼 화면에 표시되지 않은 element가 있고 div, p, table...과 같은 element 처럼 화면에 표시되는 element로 나눌 수 있다.

  그리고 화면에 표시되는 element를 다시 두 가지로 분류하면 block-level과 inline-level로 구분할 수 있다.

  1.화면에 표시되지 않는 element 

  2.화면에 표시되는 element 

1).block-level 

      inline-level 

  - block-level과 inline-level의 구분

    1. block-level과 inline-level을 가장 쉽게 구분할 수 있는 방법은 한 라인에 복수로 올 수 있나의 여부이다.

    2. block-level element는 한 라인에 하나만 위치할 수 있다. 반대로 inline-level element는 한 라인에 2개 이상 올 수가 있다.

    3. div(block-level element)와 span(inline-level element) element를 사용해 보면 이 차이를 확실하게 느낄 수 있다.

        <div style="border:1px gray solid;">block-level element</div>

        <div style="border:1px gray solid;">block-level element</div> 

        <span style="border:1px gray solid;">inline-level element</span>

        <span style="border:1px gray solid;">inline-level element</span> 

    4. block-level element인 div element를 연속으로 2개를 넣으면 각각 한라인을 차지하게 된다. 반면 inline-level element는 한줄에 옆으로 여러개가 위치할 수 있다.

    5. block-level element가 한줄을 다 차지한다고 하더라도 자신을 포함한 element가 허용하는 한도내에서 차지한다. 만일 테이블의 셀안에 넣어버리면 그 셀의 크기가 허용하는 범위내에서 width를 차지하게 된다.

- inline과 block의 차이점을 요약

    1. inline으로 설정하면 줄바꿈이 되지 않지만, block으로 설정하면 줄바꿈 된다.

    2. inline으로 설정하면 width, height 속성을 사용할 수 없지만, block으로 설정하면 width, height 속성을 사용할 수 있다.

    3. inline으로 설정하면 상/하 margin과 padding 속성을 사용할 수 없지만, block으로 설정하면 상/하 margin과 padding 속성을 사용할 수 있다.

    4. block-level element는 inline-level element를 포함할 수 있지만 반대의 경우는 불가능하다.

■ width : 길이 | 백분율 | auto

   폭(width)을 지정한다. 음수는 허용되지 않는다. 이미지 폭 지정에 많이 사용하는데 다른 block 에서도 사용 된다.

   절대크기 : in, cm, mm, pt, pc(1pc=12pt), px

   상대크기 : em, ex

   Scripting : object.style.width [ = sWidth ]

■  height : 길이 | auto

   높이(height)를 지정한다.

   절대크기 : in, cm, mm, pt, pc(1pc=12pt), px

   상대크기 : em, ex

   Scripting : object.style.height [ = sHeight ]

■ min-height : 길이(IE 8 이상)

   최소 높이(height)를 지정한다.

   절대크기 : in, cm, mm, pt, pc(1pc=12pt), px

   상대크기 : em, ex

■ float : left | right | none

    html에서 <align=left>와 같은 기능이며 이미지에 많이 쓰인다.(초기 값 : 0) 일반적으로 텍스트 이미지에 사용하나 다른 엘레멘트에도 사용 할 수 있다.

   Scripting : object.style.float [ = sFloat ]

 

■ clear : none | left | right | both

    텍스트나 이미지가 왼쪽이나 오른쪽에 나타나지 못하도록 할 경우에 사용한다. 만약 left 값이 지정되면 왼쪽 영역에 텍스트나 이미지가 못 오고 아래로 나려간다. html에서 <br clear=left/right/all/none>과 비슷

■ 주의

    한글은 자동으로 줄바꿈처리가되는데 숫자나 영어는 자동줄바꿈이안되고 한줄로 길게 늘어져서 div길이를 넘어가면 잘려나오는 현상이있다. 그럴때는 최상위 div태그에

    style="word-break:break-all;"

  

■ clip

   Positioning 된 4각형 Block Box를 지정하는 수치만큼 가려서 안 보이도록 해 주는 Property. clip 되는 Box는 반드시 { position : absolute }로 지정되어 있어야 함.

   값

     auto:초기 값으로서 clip이 되어서 가려지는 부분이 없이 몽땅 보여주고, 4면을 모두 auto로 지정할 때는 auto 한 번만 지정해 주면 됨

   shape

     rect(top right bottom left) 로 지정. rect는 rectangular의 약자로 4각형이라는 뜻. 그런데 여기서 지정하는 값이 약간 헷갈리므로 주의해야 됨.

     top : 지정한 길이만큼 위에서 아래로 가려서 안 보임.

     right : 지정한 길이만큼 왼쪽에서 오른쪽으로 보여 줌.

     bottom : 지정한 길이만큼 위에서 아래로 보여 줌.

     left : 지정한 길이 만큼 왼쪽에서 오른쪽으로 가려 줌.

   Scripting : object.style.clip [ = sClip ] 

■ position

   출력 위치를 어떤 방식으로 위치 될 것인지를 정하게 된다.

   값

    static : 그냥 있는 그대로 위치되는 것이다. top bottom 등의 값을 정하지 않는다.(default)

         - top, left 같은 속성이 무시된다. 즉, x, y 좌표를 설정할 수 없다. 

         - element를 기본 display 속성에 따라 배치한다. 즉, display가  block 이면 한줄을 다 차지하고, inline 이면 컨텐츠의 너비만큼만 차지하는 등 각 속성에 따른다.

        - 최초 좌표시점을 부모 element 의 좌표를 따라간다.

        - 부모자식간의 관계에서는 부모의 시작점이 자식의 시작점이 된다.

    relative : 자신을 담고 있는 것 안에서 비례해서 위치(현재 위치에서 부터의 좌표)

         - relative 의 속성은 기본적으로 위의 static과 거의 동일하다.  하지만 static에서 무시되었던 top, left 가 적용 가능해진다.

    absolute : 화면의 좌측 상단 에서 부터의 좌표

        - 부모로부터는 상대적이나 ( 부모의 left, top 이 자식의 left - 0, top - 0 지점이다. ), 형제끼리는 서로 간섭을 받지 않음.

        - inline, block 속성이 무시된다.

        - 기본적으로 서로 겹치게 되며, z-index 가 높은 순서로 사용자에게 보이게 된다. 

    fixed : scroll이 일어나도 항상 화면상의 지정된 위치에 고정. Netscape에서만 가능

        - 부모자식간의 노드에 영향을 받지 않고 화면의 좌측 상단으로부터 left, top  이 셋팅된다. 

        - 화면의 좌측 상단이란 말은 , 스크롤에도 영향을 받지 않고 항시 같은자리에 있다는 뜻이다.

    inherit : inherit 은 부모 엘리먼트의 속성을 물려받는다.

■  z-index

   화면으로 볼 때 앞, 뒤, 그 뒤 등을 정할 수 있는 속성으로 position 값이 정해져있는 것 한에서 사용 된다.

   형식 : {position:속성 ; z-index:번호순서}

   번호순서

     음수, 0, 양의 정수, auto

   Scripting : object.style.zIndex [ = sIndex ] 

■  visibility

   객체형태 보이게 / 안보이게 조정(영역은 그대로 있음)

   형식 : {visibility: inherit | visible | hidden}

   초기 값 : inherit

■  overflow

    스타일로 넘치는 부분 표시

    형식 : {overflow : visible | hidden | scroll | auto}

    값

       visible : 크기에 무관 모두 보여줌

       hidden : 할당된 공간만 보여줌. 나머지 자름.

       scroll : 항상 스크롤 바.

       auto : 넘칠 때 스크롤 바.

   형식 예

      p {overflow:속성값}

      p {overflow-x:속성값}

      p {overflow-y:속성값}

■ 스크롤 바(IE)

   형식

    {scrollbar-face-color: 컬러_값;

      scrollbar-shadow-color: 컬러_값;

      scrollbar-highlight-color: 컬러_값;

      scrollbar-3dlight-color: 컬러_값;

      scrollbar-darkshadow-color: 컬러_값;

      scrollbar-track-color: 컬러_값;

      scrollbar-arrow-color: 컬러_값;}

  속성 값

    scrollbar-face-color : 스크롤막대기 색

    scrollbar-shadow-color : 스크롤막대기 그늘 색

    scrollbar-highlight-color : 스크롤막대기 밝은 쪽 색

    scrollbar-3dlight-color : 스크롤막대기 밝은 쪽 3차원 색

    scrollbar-darkshadow-color : 스크롤막대기 뒷 쪽 색

    scrollbar-track-color:green : 스크롤막대기 이동레일 색

    scrollbar-arrow-color : 화살표 색

■ 스크롤 바(Webkit : Safari, Chrome)

  - 가상 요소 종류

    ::-webkit-scrollbar  → 스크롤 바 영역 전체

    ::-webkit-scrollbar-button → 상하, 좌우 화살표가 포함된 부분

    ::-webkit-scrollbar-track → 화살표를 제외한 몸통 부분

    ::-webkit-scrollbar-track-piece → 몸통 부분에서 실제 움직이는 부분을 제외한 나머지 길

    ::-webkit-scrollbar-thumb → 몸통 부분에서 실제 움직이는 부분

    ::-webkit-scrollbar-corner → 상하/ 좌우 스크롤 바가 만날 때 오른쪽 아래 공간

    ::-webkit-resizer → corner 공간으로 크기를 변경할 수 있음

  - 가상 선택자 종류

    :horizontal → 좌우 스크롤 바의 모든 요소에 적용

    :vertical → 상하 스크롤 바의 모든 요소에 적용

    :decrement → 스크롤 바에서 윗쪽, 왼쪽 방향 button, track 요소에 적용

    :increment → 스크롤 바에서 아래쪽, 오른쪽 방향 button, track 요소에 적용

    :start → thumb 이전에 위치한 button, track 요소에 적용

    :end → thumb 이후에 위치한 button, track 요소에 적용

    :double-button → 상하 화살표가 붙어 두 개가 한꺼번에 표시된 요소에 적용 (좌우도 같음)

    :single-button → 상하 화살표가 아래 위 따로 나뉘어 표시된 요소에 적용 (좌우도 같음)

    :no-button → 화살표 button이 없는 요소에 적용

    :corner-present → 스크롤 바 corner가 있는 요소에 적용

    :window-inactive → 지금 활성화된 창의 스크롤 바에 적용

■ 커서

   커서 모양 변경

  형식 : {cursor:커서모양;}

  커서모양

    auto : 커서모양이 자동으로 바꿈.

    nw-resize : 커서의 화살표 방향이 북서쪽을 향함.

    ne-resize : 커서의 화살표 방향이 북동쪽을 향함.

    sw-resize : 커서의 화살표 방향이 남서쪽을 향함.

    se-resize : 커서의 화살표 방향이 남동쪽을 향함.

    help : 커서의 모양을 ?(물음표)로 바꿈.

    move : 커서의 모양을 이동 모양으로 바꿈. 

    e-resize : 커서의 모양을 동쪽 방향으로 향하게 함.

    n-resize : 커서의 모양을 북쪽 방향으로 향하게 함.

    s-resize : 커서의 모양을 남쪽 방향으로 향하게 함.

    w-resize : 커서의 모양을 서쪽 방향으로 향하게 함.

    text : 커서의 모양을 텍스트 입력상태로 바꿈.

    crosshair : 커서의 모양을 십자가 모양으로 바꿈.

    wait : 커서의 모양을 모래시계(대기 상태 의미)로 바꿈.

    pointer(hand) : 커서의 모양을 손(클릭할 곳 의미)모양으로 바꿈.

■ max-height, min-height

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