CSS,SCSS2 SCSS mixin css에 반복적으로 사용되는 속성들을 묶어 함수처럼 호출하는 방식 선언 @mixin name{ // code } // 또는 @mixin name($arg, $arg1, $arg2, ...) { // code } 호출 div{ @include name; } // 또는 div{ @include name(arg1, arg2, arg3, ...); } 예제 기본값 셋팅도 가능! // 기존 css div { padding: 0 24px; color: green; background-color: blue; } // mixin을 사용하면 // 선언 @mixin name($arg, $arg2: red, $arg3: blue){ padding: $arg; color: $arg2; background-color: $arg.. 2022. 8. 1. ios chrome 100vh 오류 ios 크롬에서 100vh를 사용하면, 디바이스 높이보다 더 큰 화면이 잡혀 원치 않는 스크롤이 생기는 경우가 발생한다. 스크립트와 css를 섞어서 활용하면 디바이스 크기에 딱 맞는 높이를 지정할 수 있다. let vh = window.innerHeight * 0.01; document.documentElement.style.setProperty('--vh', `${vh}px`); - script에서 현재 디바이스 높이를 기준으로 계산해서 --vh 라는 css 변수를 생성해준다. min-height: calc(var(--vh, 1vh) * 100); - css에서 필요에 따라 min-height 또는 height를 위 코드처럼 설정해주면 디바이스별, 브라우저별 높이를 따로 css에서 신경쓰지 않아도 된다! 2021. 11. 3. 이전 1 다음
