👨🏻‍💻 TIL

CSS 변수와 함수

calc()

calc()를 사용하면 CSS 속성의 값으로 계산식을 지정할 수 있다. +, -, /, *의 사칙연산을 사용할 수 있고, 이를 통해서 서로다른 단위끼리 계산할 수 있다.

var()

CSS를 변수값으로 지정할 수 있다. var()의 첫 번째 인수는 값을 가져올 사용자 지정 속성의 이름이고, 두 번째 인수는 대체값이다.

p {
  color: var(--main-color, blue)
}
/* p의  주 색으로 --main-color를 사용하고, 이 속성이 유효하지 않으면 blue를 사용한다.*/

:root

전역 변수를 선언해서 여러 곳에 사용할 수 있다! 코드의 중복을 줄여줄 수 있다는 점에서 매우 요긴하다.

:root {
  --main-color: salmon;
  --card-padding: 5px 20px;
}

이렇게 최상단에 전역 변수를 지정해서 필요할 때 호출할 수 있다.

min(), max()

쉼표로 구분된 () 목록에서 가장 작거나 큰 값을 선택한다.

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

clamp()

정의된 값 중에서 이상적인 값을 뽑는다.

font-size: clamp(1rem, 2.5vw, 2rem);

📗 회고

오늘은 기존 수업 시간에 배웠던 카드 UI를 flex, grid와 float을 활용한 레이아웃 만들기를 하는 시간을 가졌다. 사진과 똑같은 레이아웃 구현은 금방 했지만, 반응형 레이아웃 구현은 익숙해지기까지 시간이 꽤나 걸릴 것 같다. float은 현업에서 별로 사용하지 않는다는 이야기를 듣기도 해서 내려놓고 싶다는 생각도 잠깐 했었는데, "사용할 줄 알지만 자주 사용하지 않는 것"과 "아예 모르는 것"은 다르다고 생각하기 때문에 주말에 시간을 내서 다시 한 번 복습해야겠다.

그리고 피그마 특강도 들었는데, 개발자와 디자이너 모두에게 매우 유용한 도구라는 생각이 든다. 꾸준히 사용하고 익숙해져서 앞으로 나올 과제나 팀 프로젝트에서도 문제없이 사용할 수 있도록 해야겠다.

(수업시간에 만들어 본 grid를 활용한 카드 UI. 반응형으로 만드는 것도 조금은 익숙해져야겠다.)