workbook

스크립트를 최소화해서 volume bar 만들기. 얼마 전 작업하는 프로젝트에서 오디오 관련 스펙이 추가되어 volume bar UI 가 필요했는데, 이것저것 참고해서 내 방식대로 만들어 보았다. UI 1. HTML - DOM 구성 2. CSS - volume bar 기본 블록 만들기 1) 회색 배경을 깔아주고 2) 흰색 - 투명색이 반복되는 linear-gradient를 위에 얹어서 회색블록을 만들어 준다. 블록이 잘려서 나오지 않도록 값을 이리저리 바꿔보면서 적용했다. 회색 블록(투명색)과 간격(흰색)을 6:4 비율로 적용했다. .volume-bar { position: relative; width: 300px; height: 15px; // 높이 지정 background-color: #ddd; } ..

rgba with SCSS rgba 값은 콤마로 나누어진 4개의 숫자 값만 유효해서 SCSS rgba function 은 CSS variable을 오류로 인식한다. border: 1px solid rgba(#000, 0.1); // valid - SCSS function border: 1px solid rgba(0, 0, 0, 0.1); // valid - CSS rgba --color-black-hex: #000; --color-black-rgb: 0, 0, 0; border: 1px solid rgba(--var(color-black-hex), 0.1); // invalid - SCSS function border: 1px solid rgba(--var(color-black-rgb), 0.1); //..

Issue 어드민이 지정한 색상을 반투명한 그라데이션에 넣어야 하는데, color 와 currentColor 를 사용해서 상속시키는 방법을 사용했다. 일반적인 방법으로 그라데이션을 적용했을때 Safari 에서는 그라디언트에 투명색(transparent)을 적용할 수 없는 버그가 있었다. Example See the Pen KKMdjwZ by Kei (@kei_) on CodePen. // 상위 div 에 color: orange 를 적용했을때 background: linear-gradient(to bottom, currentColor 82.17%, transparent); Chrome (O) 의도대로 부모 색상을 사용한 투명한 그라데이션이 생긴다. Safari (X) Safari 에서 transparen..