[230309] CSS 변수, 함수 | float, flex, grid 실습 | 피그마 특강

윤지수·2023년 3월 9일
0
post-thumbnail

🎨 CSS 변수, 함수

--

:root{
	--main-color: royalblue;
	--pane-padding: 5px 40px;
}

전역 CSS 변수를 선언할 수 있다(:root 선택자 사용)
하이픈 2개 -- 다음 속성 이름을 적어주고 콜론 : 뒤에 속성값을 적는다

var()

CSS 변수값으로 지정할 수 있다
함수에 전달하는 첫번째 인자는 가져올 사용자 지정 속성 이름, 두번째 인자는 대체값

strong{
	color: var(--main-color, blue);
}

calc()

CSS 속성값으로 계산식을 지정할 수 있다
서로 다른 단위끼리 계산할 수 있다
사칙연산+, -, *, / 이 가능하다

width: calc(100% - 80px);

💡 연산자 좌우 공백 꼭 넣기

min(), max()

쉼표로 구분된 () 내 목록에서 가장 작은(min) 또는 가장 큰(max) 값을 설정한다

clamp()

설정된 이상적인 값을 기준으로 상한과 하한 사이의 값을 고정한다
최소값, 이상적인 값, 최대값 세가지 값을 전달한다
폰트를 반응형으로 설정할때 사용할 수 있다

제가 폰트를 반응형으로 처리하기위해서

최소는 14px, 최대는 40px 로 설정하되,

최대너비값(1000px)을 기준으로 해서 40px;

화면이 500px , 즉 반으로 줄어들었을땐 폰트도 반으로 20px 로 되었으면 해서

저러한 계산 수식을 만들어서 사용하고 있습니다!

그래서 화면 창을 줄이고 해당 폰트 크기를 확인해보면 20px임을 알수 있습니다.

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

💻 Card UI list 실습

float, flex, grid
https://github.com/yoonmallang22/HTML-CSS/tree/main/practice%F0%9F%92%BB/card-UI-list


아직 반응형은 코드를 보고 이해는 잘 하지만 코드를 짜는 것까지는 어려운 상태였는데 반응형까지 생각해보는 실습이어서 좋았다:)

🖌 피그마 특강

단축키

  • UI 숨기기/보기 : Ctrl + \
  • Multiplayer cursors 숨기기 : Ctrl + Alt + \
  • 커서챗 하기 : /
  • Comment 남기기 : C
  • 컨버스 확대/축소하기 : + / -, Crtl + 마우스 스크롤
  • 컨버스 내에서 이동하기 : 스페이스바
  • 그룹 요소 선택 : Ctrl + Shift + 클릭
  • 요소 복사/붙여넣기 : Alt + 드래그, Ctrl + C / Crtl + V, Alt + Shift + 드래그
  • 복제하기 : Ctrl + D
  • 색상 스포이드 : I
  • 레이어 뒤로/앞으로 보내기 : Ctrl + [ / Ctrl + ]
  • 레이어 맨 뒤로/맨 앞으로 보내기: [ / ]

피그마와 CSS

  • 디자인 요소를 코드로 추출할 수 있는 기능을 제공한다
  • corner radius UI는 border-radius 단축 속성값 순서와 같다
  • inside Stroke : box-sizing: border-box;
    outside Stroke : box-sizing: content-box;

실습할 때 피그마를 사용해서 반 년만에 피그마를 다시 만났다..ㅎ
많이 잊어버렸었는데 특강으로 기억을 더듬더듬 찾아갈 수 있었다
피그마가 프론트엔드 개발자에게도 스펙이 될 수 있다고 하니 간간히 공부해두는게 좋을 것 같다!
할 게 참 많다..ㅎ 뽜쟈쟈🔥

0개의 댓글