Web Dev/ELICE

74 :: 2차 팀 프로젝트, 구세주 clamp()

HJPlumtree 2022. 2. 11. 23:21

엘리스 SW 엔지니어 트랙 74일차

팀 프로젝트 9일차

 

 

오늘도

프론트, 백 페어로 각 페이지 개발 삼매경

👨‍💻👩‍💻👨‍💻👩‍💻👨‍💻👩‍💻

 

개발 맑음

기능 세분화하고 To do 만들어서

하나씩 구현하고

컴포넌트로 나누며 의존성 떨어뜨리고

테스트까지 착착

 

스타일 흐림뒤 맑음

그려놓은 피그마에 따라 만들어야 되는데

생각대로 안되고, 값을 이리저리 변경해보다가

한 속성의 파워로 스타일 구현은 물론

기본적인 반응형도 가져가게 되었다

 

그 속성 이름하야 clamp()

width: clamp(0px, 100%, 600px);

clamp(최소크기, 지금크기, 최대크기)

간단하게 최소크기, 보통일 때 크기, 최대 크기 지정하는 것

항상 지정하는 버릇 들이면

나중에 미디어 쿼리 작성이 줄어들 듯!

 

아무튼 구세주 clamp()로 깔끔하게 정리하고

스타일도 To do로 나눠서 착착

 

 

내일은

공통으로 들어가는 스타일, API 명세에 대해 이야기 해봐야겠다

 

 

참고링크

clamp()

=> https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()