object-fit
이미지나 비디오 등 컨텐츠가 사용된 높이와 넓이에 따라 설정된 부모요소에
어떻게 맞춰져야 하는지 결정한다.
웹 문서에서 이미지나 비디오 같은 시각 요소는 반응형으로 크기가 바뀌면
원래 이미지나 비디오의 가로 세로 비율을 그대로 유지하기 어렵다.
object-fit을 사용하면 컨텐츠(이미지나 비디오)의 가로 세로 비율을
유지하면서 해상도에 맞게 크기를 조절할 수 있다.[속성]
- fill
: 기본값으로 컨텐츠의 원래 비율을 무시하고 요소의 전체 영역을 채운다.
- contain
: 비율을 유지하면서 요소의 전체 영역에 맞출 수 있을 만큼 확대한다.
영역을 모두 채우지 못할 수 있다.
- cover
: 비율을 유지하면서 요소의 전체 영역에 맞출 수 있을 만큼 확대한다.
영역을 채울때 컨텐츠의 일부를 자를수도 있다.
- none
: 컨텐츠의 원래 크기를 유지한다.
- scale-down
: none과 contain중 크기가 더 작아지는 값으로 설정한다.:root 선택자
css가 처음 등장했을때에는 단순한 스타일링만 가능했다. 예를들어 색상이나
글꼴 줄간격 등 사이트의 겉 모습만 제어하는 속성만 제공했다.
하지만 웹페이와 애플리케이션이 점점 더 복잡해지면서
스타일을 더 세밀하게 제어할 방법이 필요해졌다.
그렇게 등장한 것이 css함수이다.
css함수는 특정 기능을 말하며 ()안에 올바른 값을 넣어 실행한다.
:root선택자는 문서의 최상위 요소를 가리킨다. 즉, html태그를 말하는 것이다.
:root를 사용하는 이유는 css에서 '변수'라는 것을 사용하기 위해서이다.
:root는 웹문서에서 사용할 스타일들을 전체적으로 선언하는 공간으로,
일종의 '스타일 가이드'로 사용한다.
:root안에 사용할 스타일을 변수로 선언하면 일관적인 디자인을 쉽게 유지할 수 있다.CSS변수
변수란 필요할때마다 값을 저장해놓고 사용하는 데이터 그릇을 말한다.
이 데이터가 바뀌어야 한다면 그 값을 바꿀 수도 있다.
css에서 사용하는 변수는 마치 피그마의 컴포넌트처럼 일관적인 디자인을 유지하기 위해
미리 웹 문서에서 사용할 스타일에 이름을 붙여서 저장하는 역할을 한다.
css변수를 쓰는 방법은 :root의 {}안에 하이픈 두개를 앞에 붙여 변수 이름을 지어서 사용한다.
단, 변수 이름을 지을때에는 소문자로만 지어야 한다.[기본값]
:root{
--변수이름 : 값;
}var()
변수에 저장했던 값을 표시하는 함수이다.
값을 표시할때에는 var()소괄호 안에 '--변수이름'을 넣으면 그에 해당하는 값이 적용된다.[기본형]
선택자{
color : var(--변수이름);
}
Hi