CSS

수직분할 : 수평의 선으로 나뉜 컨텐츠를 수직 방향으로 배치한다.
수평분할 : 수직의 선으로 나뉜 컨텐츠를 수평 방향으로 배치한다.

css로 화면을 구분할 때 수직 수평순으로 분할을 한다.
클래스의 이름에 맞게 css를 구현하는것을 Atomic CSS방법론이라고 한다.
CSS Architcture: Atomic CSS을 확인해보자.

레이아웃 리셋

body 태그는 약간의 여백을 기본적으로 가지고 있다. 그것이 레이아웃을 짜는데 방해가 될 수도 있다. 브라우져마다 기본여백이 다를수도 있고 width, height의 길이가 여백을 포함하지 않기때문에 client환경마다 레이아웃이 바뀔 수 있다. 그러므로 레이아웃의 리셋이 필요하다.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

Flex box 로 레이아웃 잡기

flex는 유연한이라는 뜻을 가지고 있다. 그에따라 레이아웃을 유연하게 좌우, 상하로 조절이 가능하다.

display : flex

부모박스 요소에 display : flex를 적용하여, 자식박스의 방향과 크기를 결정하는 레이아웃 구성방법이다. 기본값으로, display: flex가 적용된 부모 박스의 자식 요소는 왼쪽부터 차례대로 이어 배치됩니다.

부모박스에 적용하기.
자식요소에는 flex: 0 1 auto 와 같은 flex의 속성값만 적용한다.

flex-direction

flex-direction은 flex박스의 방향을 결정하는 속성이다.
기본값으로 row를 가지고 column을 사용할 수 있다.

flex : 0 1 auto;

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
//따로 입력도 가능.

flex : grow(팽창 지수), shrink(수축 지수), basis(기본 크기)
자식 박스에 어떠한 속성도 주지 않으면, 왼쪽에서부터 오른쪽으로 콘텐츠의 크기만큼 배치됩니다. 자식 요소의 flex 속성을 추가하지 않으면, 다음과 같은 기본값이 적용됩니다.

grow, shrink 속성은 단위가 없고, 비율에 따라 결과가 달라집니다. 부모 박스 안에 n개의 자식 박스가 있다고 가정합니다. 각 자식 박스가 갖는 grow값의 총 합이 n이라면, grow 속성의 값을 1로 설정하는 것은 1/n 가로 또는 세로길이를 적용한다는 의미입니다. grow 속성의 값을 2로 지정하면, 2/n의 길이를 의미합니다.

grow

flex-grow 속성의 값을 1로 변경합니다. target 클래스를 가지고 있는 첫 번째 자식박스는, 부모 박스의 가로 길이 중에서 남은 빈 영역만큼 늘어납니다. 위 설명대로라면 전체 자식요소가 가진 grow 값의 합은 1+0+0 = 1이므로, target 클래스를 가지고 있는 자식 박스의 가로 크기는 1/1 = 100% 입니다. 그러나 다른 자식 박스 안에 이미 콘텐츠가 존재하므로, 다른 자식 박스안의 콘텐츠가 담긴 길이를 제외한 나머지 가로 길이가 target 클래스를 가진 자식박스의 가로 길이입니다.

grow를 각 자식요소에 1로 설정하면 1/3으로 각각 공간을 차지하게 된다.

grow는 비율을 뜻하기 때문에 자식요소들의 grow 값이 똑같이 증가하면, 서로의 비율은 계속 같을 것이기에 위의 이미지와 계속해서 똑같이 렌더링된다.

하지만 위 사진과 같이 2 + 1 + 1 로 설정을하면 총길이 4 에서 2만큼을 차지하기때문에 50%의 비율을 .box target요소가 차지하고 나머지가 25%씩 렌더링된다.

shrink

shrink는 grow와 반대로, 설정한 비율만큼 박스 크기가 작아집니다. 그러나 flex-grow 속성과 flex-shrink 속성을 함께 사용하는 일은 추천하지 않습니다. 비율로 레이아웃을 지정할 경우 flex-grow 속성 또는 flex: grow 1 auto와 같이 grow 속성에 변화를 주는 방식을 권장합니다. flex-shrink 속성은 width나 이후 설명할 flex-basis 속성에 따른 비율이므로 실제 크기를 예측하기가 어렵기 때문입니다. flex-grow 속성으로 비율을 변경하는 경우, flex-shrink 속성은 기본값인 1로 두어도 무방합니다.

basis

자식 박스가 flex-grow나 flex-shrink에 의해 늘어나거나 줄어들기 전에 가지는 기본 크기입니다. flex-grow가 0일 때, basis 크기를 지정하면 그 크기는 유지됩니다.

/* grow를 0으로 설정해줘야 100px 이상으로 늘어나지 않습니다. */
.left {
  flex: 0 1 100px;
}
/* 우측 박스는 grow를 1로 설정해 나머지 공간을 채워줍시다 */
.right {
  flex: 1 1 auto;
}

우측 박스는 flex-basis 속성이 auto로 설정되어 flex-grow 속성의 영향을 받습니다. 그러므로 좌측 박스의 flex-basis의 100px을 제외한 나머지 공간에 대해서 우측 박스가 차지하게 되는 렌더링이 성립됩니다.
(flex-grow 속성의 값이 0인 경우에만 flex-basis 속성의 값이 유지. 하지만 flex-grow 속성의 값이 1 이상인 경우, flex-basis 속성에 적용한 값보다 커질 수도 있습니다.)

참고

width와 flex-basis를 동시에 적용하는 경우, flex-basis가 우선됩니다.
콘텐츠가 많아 자식 박스가 넘치는 경우, width가 정확한 크기를 보장하지 않습니다.
(flex-basis를 사용하지 않는다면) 콘텐츠가 많아 자식 박스가 넘치는 경우를 대비해, width 대신 max-width를 쓸 수 있습니다.

여기 벨로그에 좋은 참고할 사이트들이 많다.
https://velog.io/@jun7867/프론트엔드-개발을-도와줄-꿀-사이트-추천