TIL#145 CSS 레이아웃

css 포지셔닝

box-sizing

box-sizing: content-box | border-box

• content-box : width 속성 값을 콘텐츠 영역 너비 값으로 사용한다.
• border-box : width 속성 값을 콘텐츠 영역에 테두리까지 포함한 박스 모델 전체 너비값으로 사용한다.

<style>
  .box1 {
    box-sizing: content-box;
    width: 300px;
    height: 150px;
    margin: 10px;
    padding: 30px;
    border: 2px solid red;
  }
  .box2 {
    box-sizing: border-box;
    width: 300px;
    height: 150px;
    margin: 10px;
    padding: 30px;
    border: 2px solid red;
  }
</style>

<div class="box1">box-sizing="content-box"</div>
<div class="box2">box-sizing="border-box"</div>

box1 클래스를 가진 div는 box-sizing이 content-box이기 때문에 콘텐츠 영역이 300px이고 총 너비는 width:300px + padding:30px(총 60px) + border:2px(총 4px) = 364px 이 된다.
box2 클래스를 가진 div는 box-sizing이 border-box 이기 때문에 총 너비는 300px 이고 좌우 패딩 각 30px 과 좌우 테두리 각 2px을 뺀 236px이 콘텐츠 너비가 된다.

float 속성

float: left | right | none

float:left, float:right 를 지정하면 너비 값은 콘텐츠를 표시할 때 필요한 만큼만 차지하고 다른 요소가 들어올 만큼의 공간을 비워둔다.
예를 들어 박스를 왼쪽에서부터 차례로 위치하게 하고 싶다면 모든 박스들에게 float: left를 걸어주면 차례로 왼쪽에서부터 위치된다.

clear 속성

float 속성을 이용해 웹페이지 요소를 배치하게 되면 다음에 넣는 다른 요소들에게도 같은 속성이 전달된다. 같은 속성을 이용하고 싶지 않다면 사용하는 속성이 clear 속성이다. float: left 를 사용하여 왼쪽으로 배치했다면 clear: left 로 속성을 종료하고 float: right 를 사용하여 오른쪽으로 배치했다면 clear: right 로 속성을 종료한다. left나 right 상관없이 무조건 기본상태로 되돌리고 싶다면 clear: both 를 사용한다.

position 속성

position: static | relative | absolute | fixed

• static
  요소를 문서의 흐름에 맞추어 배치한다. position 속성의 기본 값이다. 요소를 나열한 순서대로 매치하며 top, right, bottom, left 같은 속성을 사용할 수 없다. float 속성을 이용해 좌우로 배치할 수만 있다.
• relative
  static 처럼 나열한 순서대로 배치되지만 top, right, bottom, left 속성을 사용할 수 있으며 좌푯값을 사용해 위치를 지정할 수 있다.
• absolute
  문서의 흐름과 상관없이 left, right, top, bottom 속성값을 사용해 요소를 원하는 위치에 배치할 수 있다. 이때 기준이 되는 위치는 가장 가까운 부모 요소나 조상요소 중 position 속성이 relative인 요소이다. 자유자재로 요소를 배치하기 위해서는 반드시 부모 요소가 relative로 지정되어 있어야 한다.
• fixed
  absolute 처럼 문서의 흐름과 상관없이 위치를 좌표로 결정하지만 부모요소가 아닌 브라우저 창이 기준이 된다. 브라우저 창의 왼쪽 위 꼭지점을 원점으로 두고 좌표가 계산되며 한 번 배치되면 브라우저 창을 스크롤하더라도 계속 고정되어 나타난다.

z-index 속성

z-index: <숫자>

요소위에 요소를 쌓을 때 쌓는 순서를 지정하는 속성이다.
값이 작을수록 아래에 쌓이고 값이 클수록 작은 요소보다 위에 쌓인다. z-index 값을 명시하지 않을 경우 웹문서에 맨 먼저 삽입하는 요소가 z-index: 1 값을 가지며 그 후에 삽입하는 요소들을 값이 점점 커진다.