(특강:소울곰님) 피그마 특강 && float flex grid

---

📚 What is TIL?

레이아웃을 잡을 때 유용한 함수들

:root | var()

• 전역 CSS 변수 선언

• :root로 html 태그를 선택하게 된다

  💡 var() 변수를 처리하면 유지보수나 수정사항이 발생했을 때 빠르게 대처할 수 있다

calc()

• CSS 속성 값으로 계산식을 지정한다
• 사칙연산이 가능하다

float로 정렬된 box의 width값을 계산하는 TIP

calc((100% - (gap의 너비 * 전체너비에서 gap의 갯수)) / 요소의 갯수)

ex) width: calc((100% - (24px * 2))/3)
gap의 너비(24px)와 gap의 갯수(2)만큼 곱하여 전체 너비(100%)에서 뺀 나머지를 box의 개수(3)로 나눠준다

min(), max()

• 쉼표로 구분된 () 목록에서 min 또는 max값을 설정한다
• calc() 도 같이 이용하면 더욱 유용하다

ex) width: min(var(–max-width), calc(100% - var(–plane-padding)*2))
var(–plane-padding)*2 는 양옆 여백을 위한 설정이다

clamp()

• 설정된 이상적인 값을 기준으로 상한과 하한 사이의 값을 고정한다
• 폰트를 반응형으로 처리하기위해서 사용한다 clamp(최소값 | 이상적인 값 | 최대값)

ex) font-size: clamp(14px, 40 / 100 * 10vw, 40px)
반응형 글꼴 크기를 설정하는 데 일반적으로 사용되는 수식으로
최대너비값을 기준으로 해서 화면이 반으로 줄어들었을때 폰트도 정확히 반으로 설정하기 위한 설정이다

grid flex float 순으로 레이아웃 구현하기

grid

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
  gap: 32px 24px;
  width: min(1224px, calc(100% - 60px));
  margin: auto;
}

flex

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 24px;
  margin: auto;
  padding: 24px;
  width: min(1224px, calc(100% - 60px));
  margin: auto;
}

.container article {
  width: calc((100% - (24px * 3)) / 4);
}

@media (min-width: 641px) and (max-width: 1024px) {
  .container article {
    width: calc((100% - (24px * 2)) / 3);
  }
}

@media (min-width: 501px) and (max-width: 640) {
  .container article {
    width: calc((100% -24px) / 2);
  }
}

@media (max-width: 500px) {
  .container article {
    width: 100%;
  }
}

float

.container {
  width: min(1224px, calc(100% - 60px));
  margin: auto;
}

.container::after {
  content: '';
  display: block;
  clear: both;
}

.container article {
  float: left;
  width: calc((100% - (24px * 3)) / 4);
  margin: 0 0 32px 24px;
}

@media (min-width: 1025px) {
  .container article:nth-child(4n-3) {
    margin-left: 0;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .container article {
    width: calc((100% - (24px * 2)) / 3);
  }
  .container article:nth-child(3n-2) {
    margin-left: 0;
  }
}

/* @media (641px <= width <= 1024px){} */
@media (min-width: 501px) and (max-width: 640px) {
  .container article {
    width: calc((100% - 24px) / 2);
  }
  .container article:nth-child(2n-1) {
    margin-left: 0;
  }
}

@media (max-width: 500px) {
  .container article {
    width: 100%;
    margin-left: 0;
  }
}

---

🔗 TIP

flex-item에 사용하는 속성들 더 살펴보기

flex-basis

• flex-item의 기본 사이즈를 지정하는 속성
• 여백의 공간이 아닌 전체 공간을 분할하는 속성

• 기본값이 auto이다

• flex-basis는 주축에만 적용되기 때문에 flex-direction이 column이라면
  flex-basis는 height을 제어하게 된다

flex-grow

• 부모의 컨테이너 내부에서 할당할 수 있는 공간의 정도를 지정할 수 있는 속성
• 남은 여백을 채우기 위한 속성
• 형제 요소인 아이템들이 같은 flex-grow값을 가지면, 동일한 공간을 할당받는다

flex-shrink

• 아이템의 크기를 고정하거나 축소할 때 사용한다
• 값을 0을 줄 경우 줄어들지 않는다.
• 기본값이 1이다

➕

💡 flex-basis:0 을 주게 되면 여백공간이 아니라 전체 공간을 분할한다?

• flex-basis 속성이 없는 경우의 flex-item 공간

  • (전체공간 중 요소들의 크기를 뺀 나머지 여백 / 요소들의 flex-grow 속성값의 합 * flex-grow의 값) + 요소의 크기
    245(첫번째 자식 item의 크기) === (500 - 30 / (2+1+1) * 2) + 10

• flex-basis 속성이 있고 0인 경우의 flex-item 공간

  • 여백이 아닌 전체 공간 / 요소들의 flex-grow 속성값의 합 * flex-grow의 값
    250(첫번째 자식 item의 크기) === 500 / (2+1+1) * 2

• flex-shrink 속성이 0이 아니고 부모요소의 크기를 넘을 경우

  • 요소의 공간 - (부모요소를 넘는 공간의 크기 / 요소들의 flex-shrink 속성값의 합)
    183.33 === 200 - 100 / 6

See the Pen Untitled by tjqehd23 (@tjqehd23) on CodePen.

---

✨ Today is …

소울곰님의 피그마 특강

전에 프로젝트를 하기에 앞서 페이지를 설계하는 과정에서 피그마를 다룬 적이 있다
근데, 아무것도 모르고 포토샵을 만지는 느낌이었다 ㅜ
내가 만들고 싶은것만 뚝딱 만들기엔 뭐가 무슨 기능인지도 모르겠고 어려웠었다 😢
그래서 막연하게 도형으로 프레임을 만들었던 기억이…

a부터 z까지 알려주시는 소울곰님 덕에 본격적으로 피그마를 배울 수 있었다
너무 친절하게 설명 해주셔서 왜 이걸 몰랐을까 싶기도 했다… 감사합니다 👏

💡 피그마는 프론트엔드 개발자에게 ‘스펙’ 으로 가져갈 수 있다고 한다

디자이너와 가장 인접한 프론트엔드 개발자가
디자이너가 쓰는 툴을 다룰만한 실력이 있다는 것은… 분명 큰 스펙일 것이라고 생각한다..!
곧 사이드 프로젝트를 만들어볼 예정인데 피그마로 작업해봐야겠다 💡