음악, 삶, 개발

https://iconify.design/ https://github.com/unocss/unocss

https://stackoverflow.com/questions/9943771/adding-a-favicon-to-a-static-html-page

1. 구글검색결과 https://www.google.com/search?q=input+range+styling&tbm=isch&ved=2ahUKEwiT2PaPsZf6AhVOx5QKHZDcAl4Q2-cCegQIABAA&oq=input+range+styling&gs_lcp=CgNpbWcQAzIGCAAQHhAIMgQIABAYMgQIABAYUABYAGD_A2gAcAB4AIABkgGIAZIBkgEDMC4xmAEAqgELZ3dzLXdpei1pbWfAAQE&sclient=img&ei=EWkjY9OLOM6O0wSQuYvwBQ&bih=1176&biw=1024&rlz=1C5CHFA_enKR938KR938 2. w3c 의 브라우저간 표준화에 대한 issue https://github.com/w3c/csswg-drafts/i..

https://coolors.co 한 Juce 개발자가 추천해줌.

그동안 Web UI 를 개발해오면서 진짜 다양한 시도를 해보았다고 생각한다. 내가 느낀건 생산성 성능 은 절대 비례 관계가 아니라는것이다. 사실 거의 반비례 관계 같기도했다. 음악 관련 UI 들 특징이 버튼을 하나 눌렀을때 동시 다발적으로 여기저기서 변화가 일어나게된다. 심지어 내가 만든 App 에서는 버튼 하나를 누르면 128개의 색깔이 변경되어야하는것도 있다. 이는 곧 동시에 여러가지 DOM 의 변화가 일어난다는것이다. 이 부분에서, 모든걸 캔버스에 그려버리는 Pixi.js 를 선택했었는데 결과적으로 나쁜 선택은 아니었으나, 그다지 엄청 좋은 선택도 아니어서 2달간 시도후 DOM 으로 돌아오게되었다. (이에 대한 이야기는 따로 정리하겠음). 하여튼 React 나 Vue 같이 생산성이 좋은 경우 대부분..

span 은 grid 선을을 기준으로 늘리는것이다. 이때 span 의 위치는 시작일수도있고 끝일수도있는데, 의미가 다르다. grid-colum 의 경우 span 의 오른쪽에 올 경우 우측 방향으로 , 즉 width 가 우측으로 늘어나며, span 이 먼저 오는 경우는 오른쪽에서 왼쪽으로 width 가 늘어난다. span 이 먼저 오는 경우가 조금 사용을 안하는데, 마치 right: 0 으로 두고 width 을 증가시키는것돠 비슷한 원리이다. #foot { grid-column : 1 / span 4; /* line 1 에서 우측 방향으로 4만큼 이동하라. */ } #foo { grid-column: span 4 / 10; /* line 10 에서 왼쪽으로 4칸. right: 0 과 비슷한 원리 */ }

그동안 HTML & CSS 를 많은 UI 를 디자인해보면서, 가장 시간이 많이 잡먹는것이 레이아웃인데, 가장 깔끔한 최고의 방법은 #container { grid-template: repeat(128, 1fr) / repeat(128, 1fr) } 이렇게 하면 매우 조밀하게 형성되기때문에 쓸데없는 wrapper 요소들을 생성하지않아도 된다. 이렇게까지 하는 이유는 wrapper 요소로 중첩 depth 가 깊어질수록 성능이 매우 크게 저하되는것을 확인했기때문.

https://css-tricks.com/animating-number-counters/ @property, counter-reset, counter() /* body { background-color: black; } */ @property --num { syntax: ''; initial-value: 0; inherits: false; } #foo { transition: --num 20s; counter-reset: num var(--num); } #foo:hover { --num: 100000000; } #foo::after { content: counter(num); }

pseudo 요소는 DOM 요소가 아니라서 직접적으로 변경할수없고 약간 우회해야한다. dataset 속성의 값을 삽입해준다. document.getElementById ("foo").dataset.label = "Label" 위와같이 한뒤 HTML 을 확인해보면 이런식으로 html 에 저장이된다. 이제 이 dataset 을 CSS 에서 "attr" 이라는 css 함수를 통해 읽어드린다. attr 는 css 에서 사용할수있는 calc() 과 비슷한 css 전용 함수이다. #foo::before { content: attr(data-label); }