CSS 레이아웃

Float

Box Sizing : border-box

box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할 지를 정하는 속성이다.

box-sizing: content-box | border-box | initial | inherit

• content-box : content 영역을 기준으로 크기를 정한다.
  Final element width = right border + right padding + width + left padding + left border

• border-box : 테두리를 기준으로 크기를 정한다.
  Final element width = right border + right padding + width + left padding + left border

• initial : 기본값으로 설정한다.

• inherit : 부모 요소의 속성값을 상속받는다.

(참고 사이트 : https://www.codingfactory.net/10630)

• content-box
  

.box{
  background-color: gray;
  display: inline-block;
  
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 5px black solid;
}

• border box
  

.box:last-child{
  box-sizing: border-box;
}

• global reset

* {
  /* border-top: 10px solid #1098ad; */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Flexbox

Flexbox는 1차원 레이아웃을 구축하기 위한 관련 CSS 속성 집합이다.

• flexbox의 기본 아이디어는 컨테이너 요소 내부의 빈 공간을 자식 요소로 자동 분할할 수 있다는 것이다.
• flexbox를 사용하면 상위 컨테이너 내에서 수평 및 수직으로 항목을 서로 자동으로 쉽게 정렬할 수 있어, float를 대체하기 완벽하고 더 깔끔하다.

<style>
      .el--1 {
        background-color: blueviolet;
      }
      .el--2 {
        background-color: orangered;
      }
      .el--3 {
        background-color: green;
        height: 150px;
      }
      .el--4 {
        background-color: goldenrod;
      }
      .el--5 {
        background-color: palevioletred;
      }
      .el--6 {
        background-color: steelblue;
      }
      .el--7 {
        background-color: yellow;
      }
      .el--8 {
        background-color: crimson;
      }

      .container {
        /* STARTER */
        font-family: sans-serif;
        background-color: #ddd;
        font-size: 40px;
        margin: 40px;

        /* FLEXBOX */
        display: flex;
      }
</style>

...

<div class="container">  <!-- flex container-->
			<!-- flex items-->
      <div class="el el--1">HTML</div>
      <div class="el el--2">and</div>
      <div class="el el--3">CSS</div>
      <div class="el el--4">are</div>
      <div class="el el--5">amazing</div>
      <div class="el el--6">languages</div>
      <div class="el el--7">to</div>
      <div class="el el--8">learn</div>
</div>

• 용어 정리
  - flex container : flex item들을 포함한 상위 요소
  - flex item : flex 컨테이너의 하위 요소. 기본적으로 가로로는 각 요소가 텍스트 콘텐츠를 위해 필요한 공간을 정확히 차지한다. 세로로는 item들 중 가장 큰 요소만큼 높다.
  - main axis
  - cross axis

display: flex;

aligning & spacing

• order 를 사용하면, html 소스 코드를 변경하지 않고 요소 간 위치 순서를 바꿀 수 있다.

.el--1 { /* HTML */
        background-color: blueviolet;
        align-self: flex-start;
        order: 2;
      }
.el--2 {
        background-color: orangered;
      }
.el--3 {
        background-color: green;
        height: 150px;
      }
.el--4 {
        background-color: goldenrod;
      }
.el--5 { /* amazing */
        background-color: palevioletred;
        align-self: stretch;
        order: 1;
      }
.el--6 { /* languages */
        background-color: steelblue;
        order: -1;
      }
.el--7 {
        background-color: yellow;
      }
.el--8 {
        background-color: crimson;
      }

• 지금까지는 요소 사이에 공간을 줄 때, 같은 class명을 가진 요소들에 margin을 넣고 마지막 항목에는 margin을 없애줬다. 요소 간 공간은 원하지만 마지막 요소의 끝에 공간을 넣는 건 원치 않기 때문이다. → 이제는 gap으로 해결 가능하다.

gap

margin을 사용했을 때 (마지막 항목에도 margin이 존재한다.)

.el { /* 각 요소의 공통된 class */
	margin-right: 30px;
}

gap을 사용했을 때

.container{ /* 부모 요소 */
	/* STARTER */
	...
	/* FLEXBOX */
	...
	gap: 30px;
}

flex property

• Default

💡 .el {
      flex-grow: 0; → 안 커짐
      flex-shrink: 1; → 줄어듦
      flex-basis: auto;
}

• flex-basis

flex 아이템의 초기 크기를 지정한다. box-sizing을 따로 지정하지 않는다면 콘텐츠 박스의 크기를 변경한다.

.el {
     flex-basis: 100px;
}

→ 요소의 콘텐츠가 100px보다 작으면 100px로 만들어주고 크면 요소들이 확장된다.

💡 flex-item의 경우 width 속성이 아닌 flex-basis 속성을 사용해야 한다.

• flex-shrink

flex 아이템의 크기가 flex 컨테이너보다 클 때 사용하는 속성이다. 0이면 no, 디폴트 값인 1이면 yes로 이에 따라 flex-container 요소 내부에서 flex-item 요소의 크기가 유지되거나 축소된다.

.el {
    flex-basis: 200px;
    flex-shrink: 0;
}

• flex-grow

flex 아이템의 크기가 flex 컨테이너 내부에서 할당 가능한 공간의 정도를 선언한다.

숫자가 커질수록 차지할 수 있는 공간이 커진다.

.el{
	flex-grow: 1;
}

.el--1 {
	background-color: blueviolet;
	flex-grow: 2;
}
.el--2 {
	background-color: orangered;
	flex-grow: 1;
}

• flex

shorthand로 순서는 다음과 같다 : -grow | - shrink | -basis

(flex 관련 도움 받은 사이트:
https://choar816.tistory.com/119
https://blogpack.tistory.com/863)