var()
var() 함수로 css를 변수화 할수있다
1.글로벌 변수
//선언
:root{
--변수명 : css내용;
}// 사용
div{
background-color:var(--변수명);
}2.로컬변수
// 선언
h2{
--변수명 : css내용
}// 사용
h2{
background-color:var(--변수명);
}3.재정의 (오버라이딩)
:root{
--main: #146af0;
}
h1{
color: var(--main);
}
h2{
--sub: #ff0011;
--main: #00ff11; /* 지역변수로 재정의 */
color: var(--sub);
border-bottom: 2px solid var(--main); /* 지역변수 사용 */
}calc()함수
속성의 값을 계산을 해주는 함수입니다. + - * / 사칙연산을 지원합니다. calc 함수는 CSS3 버전부터 제공되는 함수입니다.
calc 함수는 브라우저의 크기에 따라 요소의 너비가 높이가 변화해야하는 경우 사용하기 적절합니다
#test1 {
width: calc(100% - 250px);
background-color: yellow;
}
#test2 {
width: calc(100%/2 - 100px);
background-color: blue;
}:root {
--layout-page-content-min-height: calc(100vh - 42px);
}
// 해당 --layout-page-content-min-height변수에 현재기기의 화면의 100%높이에서 -42px한 높이를 정의함vw,vh
즉, 현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환하겠다는 뜻입니다.
100vh, 100vw 가 전체 화면의 기준이 됩니다.
예를들어,
현재 스크린 크기가 height = 1000px, width = 800px 이라면
1vh = 10px / 1vw = 8px 이 될 것이고
height: 50vh;
width: 25vw;
로 설정한다면
height - 500px
width - 200px
예제
body{
min-height : calc(100vh - 10px) // *최소높이* min-height이하로 줄어들지 않는다
}만약 브라우저 창의 높이가 800px이라면,
body 요소의 최소 높이는 calc(100vh - 10px) 즉, 790px이 됩니다.
이는 브라우저 창의 높이에서 10 픽셀을 뺀 값입니다.
그러므로 페이지의 높이가 790px 미만으로 줄어들지 않습니다.
참조
Oct 9, 2023
Views 102