▶ :root
- 전역 CSS 변수를 선언한다.
- 하이픈 2개(--) 다음 속성이름을 적어주고 (콜론) 뒤에 속성값을 적는다.
- 다크 테마, 화이트 테마 전환 설정에 사용된다.
:root{
--main-color:royalblue;
--pane-padding: 5px 40px;
}▶ var()
- CSS 변수 값을 다른 속성 값으로 지정한다.
- 첫번째 인수: 가져올 사용자 지정 속성 이름 / 두번째 인수: 대체값
strong{
color:var(--main-color, blue);
}▶ calc()
- CSS 속성 값으로 계산식을 지정한다.
- +, -, *, / 사칙연산 가능.
- 서로다른 단위끼리 계산할 수 있다.
▶ min(), max()
- 쉼표로 구분된 () 내 목록에서 가장 작은(min) 또는 가장 큰(max) 값을 설정한다.
width:calc(100% - 80px);
/* 부모 엘리먼트의 50% 너비를 차지하되, 최대 1000px까지만 넓어진다. */
width: 70%;
max-width: 1000px;
width: min(70%, 1000px);▶ clamp()
- '범위 제한, 고정시키다'라는 사전적 의미.
- 최소값, 이상적인 값, 최대값 세가지 값을 입력한다.
- 익스플로러 지원을 하지 않는다.
/* 넓이의 최소 값은 350px, 최대값은 500px,
중앙의 50% 동안만 크기가 조정된다. */
width: clamp(350px, 50%, 500px);
/* 반응형 폰트를 설정할 때 사용할 수 있다. */
font-size: clamp(1rem, 2.5vw, 2rem);▶ 피그마 & CSS 함께 알고가기
- inside 테두리 : box-sizing:border-box;
- outside 테두리 : box-sizing:content-box;
생각 더하기
+ 변수 사용은 유지보수에 좋다.
+ 반복작업 보완에는 SASS 학습이 도움이 된다.
일일 회고
함수 이해에 어려움이 있었지만 복습에 긴 시간을 투자해 이해할 수 있었다 🥲
강의 시간에 바로 이해하는 건 여전히 어렵지만... 1주차와 다르게 이번주부터는 이론 이해-정리-복습뿐만 아니라 실습 내용 복습까지 하루 안에 끝내게 되었다는 것에 조금은 성장했다고 나 자신을 칭찬해주고 싶은 마음 (조바심 내지 말고 꾸준하게 나아가자! 💃🕺)
특강으로 피그마를 배웠는데 이전에 사용했던 디자인 툴과 사용법이 크게 다르지 않아 쉽게 적용할 수 있었다
강사님의 수업 진행도 너무너무 재미있어서...! 웃으면서 정말 즐겁게 임했다
피그마는 디자이너-개발자 간의 협업에 중요하게 쓰인다고 함!
익숙하게 다룰 수 있도록 익혀놓자!
