:root{
--main-color: royalblue;
--pane-padding: 5px 40px;
}
전역 CSS 변수를 선언할 수 있다(:root
선택자 사용)
하이픈 2개 --
다음 속성 이름을 적어주고 콜론 :
뒤에 속성값을 적는다
CSS 변수값으로 지정할 수 있다
함수에 전달하는 첫번째 인자는 가져올 사용자 지정 속성 이름, 두번째 인자는 대체값
strong{
color: var(--main-color, blue);
}
CSS 속성값으로 계산식을 지정할 수 있다
서로 다른 단위끼리 계산할 수 있다
사칙연산+
, -
, *
, /
이 가능하다
width: calc(100% - 80px);
💡 연산자 좌우 공백 꼭 넣기
쉼표로 구분된 () 내 목록에서 가장 작은(min) 또는 가장 큰(max) 값을 설정한다
설정된 이상적인 값을 기준으로 상한과 하한 사이의 값을 고정한다
최소값, 이상적인 값, 최대값 세가지 값을 전달한다
폰트를 반응형으로 설정할때 사용할 수 있다
제가 폰트를 반응형으로 처리하기위해서
최소는 14px, 최대는 40px 로 설정하되,
최대너비값(1000px)을 기준으로 해서 40px;
화면이 500px , 즉 반으로 줄어들었을땐 폰트도 반으로 20px 로 되었으면 해서
저러한 계산 수식을 만들어서 사용하고 있습니다!
그래서 화면 창을 줄이고 해당 폰트 크기를 확인해보면 20px임을 알수 있습니다.
font-size: clamp(1rem, 2.5vw, 2rem);
float, flex, grid
https://github.com/yoonmallang22/HTML-CSS/tree/main/practice%F0%9F%92%BB/card-UI-list
아직 반응형은 코드를 보고 이해는 잘 하지만 코드를 짜는 것까지는 어려운 상태였는데 반응형까지 생각해보는 실습이어서 좋았다:)
Ctrl + \
Ctrl + Alt + \
/
C
+
/ -
, Crtl + 마우스 스크롤
스페이스바
Ctrl + Shift + 클릭
Alt + 드래그
, Ctrl + C
/ Crtl + V
, Alt + Shift + 드래그
Ctrl + D
I
Ctrl + [
/ Ctrl + ]
[
/ ]
border-radius
단축 속성값 순서와 같다box-sizing: border-box;
box-sizing: content-box;
실습할 때 피그마를 사용해서 반 년만에 피그마를 다시 만났다..ㅎ
많이 잊어버렸었는데 특강으로 기억을 더듬더듬 찾아갈 수 있었다
피그마가 프론트엔드 개발자에게도 스펙이 될 수 있다고 하니 간간히 공부해두는게 좋을 것 같다!
할 게 참 많다..ㅎ 뽜쟈쟈🔥