CSS LAYOUT

27 Oct 2020 in Programming on HTML/CSS

CSS 포지셔닝과 속성들

1. box-sizing 속성

• width 속성값을 어디에 줄 것인지 정한다.

  

  • box-sizing : content-box는 content-box의 width 가 width 속성값을 가진다. (default setting)

  • box-sizing :border-box;는 border,padding과 content-box가 width 속성값을 가진다.

    아래는 모두 width:500px; 을 가지는 div 요소들이다. 설정에 따라 크기가 달라진다.

  

    <style media="screen">
      div.a{
        width: 500px;
        height: 100px;
        background: pink;
        box-sizing: content-box;
        border: 10px dotted black;
        padding: 20px;
        margin: 5px;
      }
      div.b{
        width: 500px;
        height: 100px;
        background: orange;
        border: 10px dotted black;
        padding: 20px;
        margin: 5px;
        box-sizing: border-box;
      }
      div.c{
        width: 500px;
        height: 100px;
        background-color: skyblue;
        margin: 5px;
      }
      </style>
  

  계산하기 귀찮으면 box-sizing : border-box;를 주면 될 것 같다. 성능면에선 어떤지 찾아보기..

2. Float 속성

• 요소들은 기본적인 흐름에 따라 배치된다. (block은 상하, inline 은 좌우)

  //float속성만 표시, DEFUALT
  .container {}
  .A{}
  .B{}
  

  

• float 속성은 이런 기본 흐름에서 벗어나도록 한다. 이 속성은 요소가 독자적인 공간을 만들어 그곳에 배치됨.

• 텍스트는 따라 올라가지 않는다. one 박스에 style = “ float : left” 속성을 주면, 아래와 같이 된다. A박스와 B박스가 겹쳐져 있다. (float은 화면에 떠있는 요소라서, one자리를 two가 차지하게 된다.) 그러나 텍스트는 따라 올라가지 않는다.

  //float속성만 표시
  .container {}
  .A{float : left}
  .B{}
  

  

• 부모요소는 자식요소가 사라진 것처럼 느낀다. 따라서 A,B 박스 둘 다에 float속성을 주었을 때, 다음과 같이 된다.

  //float속성만 표시
  .container {}
  .A{float : left}
  .B{float : left}
  

• A,B 다음에 다른 블록 요소를 넣었을 때, 아래 그림과 같이 A,B와 겹쳐지게 된다. A,B는 화면상 떠있기 때문에 그 아래 자리를 차지하고 들어가는 느낌?

  

  이걸 원하지 않는다면, clear 속성을 이용해 float 속성을 해제할 수 있다. clear 속성에는 none, left, right, both 값이 있다. 아래는 clear:left ;속성을 사용했다.

      div.d{
        width: 200px;
        height: 200px;
        background-color: yellow;
        clear: left;<!--clear 속성 추가-->
      }
  

  하면 다음과 같이 된다!

3. Position 속성

• 각 요소들이 위치리를 기존에 가지고 있는 성질과 상관없이 배치시키는 속성 static, absolute, relative, fixed, sticky, initial, inherit

  • static: defualt, 요소들이 normal flow에 따라서 배치

    

  • absolute : 가장 가까운 조상요소 중 position 속성이 relative인 요소를 기준으로 offset에 따라 배치. 부모 요소가 없을 경우, body가 부모가된다. normal flow의 흐름에서 벗어나 배치 가능. (그 뒤 요소가 영향을 받음) . 폭을 주지 않으면 폭이 없어져버린다.

    4번 박스에 position: absolute 속성을 주었다. 폭이 사라진 것을 볼 수 있다.

    

    top : 0 , left :0 의 속성을 추가 하였다. 부모 요소 중 absolute와 relative 가 없어서 문서의 시작점에 붙는 것을 볼 수 있다.

    

  • relative : 자신이 있어야할 곳을 기준으로 offset을 먹인다. 부모 요소의 position 영향을 받지 않는다. container이 줄어들지 않고 3번 공간을 그대로 가지고 있다. (그 뒤 요소가 영향을 받지 않음)

    

  • fixed: View port를 기준으로 offset에 따라 배치. 부모 요소가 없을 경우, body가 부모가된다. normal flow의 흐름에서 벗어나 배치 가능. (그 뒤 요소가 영향을 받음) 아래 그림처럼 화면 특정 좌표에 고정되어있다.

    

• z-index : 정수값; 으로 z축 값으로 생각하면 된다. Z index가 높을수록, 더 앞쪽에 배치된다.

  

        div.b1{
          top: 100px;
          left : 100px;
          z-index: 3;
        }
        div.b2{
          top: 70px;
          left : 70px;
          z-index: 1;
  
        }
        div.b3{
          top: 50px;
          left : 120px;
          z-index: 2;
  
  
        }
  

• offset은 top left bottom right 으로 한다.

4. Visibility 속성

• visibility 속성에는 hidden, visible, collapse 의 속성값이 있다.

  • visible : 화면에 요소를 표시한다. 기본 값이다.
  • hidden : 눈에는 보이지 않지만 공간은 그대로 차지한다.
  • collapse : table 요소에만 줄 수 있다. 화면에 보이지도, 공간을 차지하지도 않는다.

• 디스플레이에서 DOM(Document Object Model)이라는 트리를 만드는데, visibility:hidden을 하면 이 트리에 포함시키지 않는다.

  

  hidden 값 준 후

  <div>
    1st
  </div>
  <div style = "visibility : hidden">
    2nd
  </div>
  <div>
    3rd
  </div>
  

  

  CSS LAYOUT2

다단으로 편집하기

• 다단 관련 속성은 브라우저 별 접두사를 붙여서 사용해야한다.

크롬, 사파리 : -webkit-
파이어폭스 : -moz-
오페라 : -o-
인터넷 익스플로러 -ms-

column-width

• 다단의 너비를 정하면 화면의 크기에 따라 단의 개수는 변하게 된다.

.dan{
-webkit-colum-width : 120px;
-moz-column-width:120px;
column-width: 120px;
}

column-count

• 다단의 수를 정한다. 화면 크기에 따라 너비가 달라진다.

  

  

.dan{
-webkit-colum-count : 3;
-moz-column-count:3;
column-count: 3;
}

column-gap

• 단의 갭 너비를 줄 수 있다.

.dan{
column-count: 3;
column-gap : 10em;
}

column-rule

• column-rule : width style color; 형식으로 쓴다. width style color 따로 따로 줄 수 있지만, 그러면 귀찮으니까 한번에 다 주는 걸로..

.dan{
column-count: 3;
column-rule : 1px dotted black;
}

break-after

• break-after, break-before, break-inside가 있다.
• 각각 특정 요소 앞, 특정 요소 뒤, 특정 요소 안에 속성값인 column과 avoid-column으로 칼럼을 넣거나 없앨 수 있다.
• break-before전

• break-before후

.dan{
    column-count: 3;
}
h3{
    break-before : column;
}

column-span

• 여러 단을 하나로 합친다. 첫번째, 두번째, 세번째 h3 태그에 적용을 시켰다. 다음과 같이 되었다.
• column-span : all;하면 합쳐지고, column-span : 1;은 그냥 기본 값이다.

.dan{
    column-count: 3;
}
h3{
    column-span : all;
}

표 스타일

caption-side

• 표 제목의 위치를 정할 수 있다.

caption-side: top; // 캡션을 표 위에 표시한다.
caption-side: bottom; // 캡션을 표 아래에 표시한다.

border

• 표를 사용할 때 테두리 설정을 할 수 있다.

border : width style color; 형식으로 준다.

border-collapse

• < table> 과 <td> 에 border을 다 주면, 두줄로 표시된다. 이 때 border-collapse를 이용하면 두 테두리가 하나로 합쳐진 게 된다.

  

border-collapse : collapse; //테두리를 하나로 합쳐 표시한다.
border-collapse : separate; //기본값

table{
      border: 1px solid black;
      border-collapse: collapse;
    }

border-spacing

• 셀 테두리 사이의 거리 지정. 값이 하나면, 수평 수직 거리 동시에. 두개면 수평거리 수직거리를 의미한다.

table{
    border: 1px solid black;
    border-spacing: 10px 20px;
}

empty-cells

• 빈 셀의 표시 여부를 결정한다. show 가 기본값이고, hide하면 빈 셀이 표시되지 않는다.

  

table{
border: 1px solid black;
empty-cells:  10px 20px;
}

width height

• 셀의 너비와 높이를 정한다. 너무 기초니까 스킵!

table-layout

• 콘텐츠에 맞게 셀 너비를 지정한다. 셀 안의 내용 양에 따라 셀이 커질 수도, 아니면 상관없이 계속 같은 값을 가질 수도 있다.
• word break를 해야지 셀 밖으로 내용이 삐죽삐죽 튀어나가지 않게 할 수 있다..

table{
border: 1px solid black;
table-layout: fixed;
width: 130px;
word-break: break-all;
}

align

• text-align은 수평 정렬(left,right,center) , vertical-align은 수직 정렬(baseline, top,bottom, ..)이다.

• 다른 속성들은 다 table 태그에 줬는데 , 이건 td태그에 준다.

  

td{
    width: 200px;
    height: 200px;
    border: 1px solid black;
    text-align: left;
    vertical-align: bottom;
}