음악, 삶, 개발

지금까지 id 나 classname 뒤에 _1, _2 식으로 원하는 글짜를 추가한뒤에, 다시 event listener 에서 파싱하는 귀찮은 작업을 했었는데, 사용자 정의 속성을 정의할수있다는것을 알았다. data-속성명 으로 html 태그안에 아래와 같이 넣어준다. 이때 중요한것은 속성명은 절대 camelCase 가 아닌 kebab-case 로 작성되어야한다. html 은 kebab-case 를 기본으로 사용하며, 만약 camelCase 를 사용하는 경우 react 에서는 에러가 난다. 속성명이 길다면 - 를 사이에 껴넣어서 표현해야한다. 이렇게 속성을 저장하였다면, 반대로 event listener 로 가져오는 방법도 알아야한다. const data = e.target.dataset dataset 이..

event listener 를 사용할때 대부분 div 의 id 나 classname 으로 어떤 버튼이 눌렸는지 추적하게되는데, 이때 div 내부에 대부분 다른 자식들이 존재하게된다. 이 자식들이 div 라면 괜찮지만, text 를 넣기위한 span, svg 를 넣기위한 svg 그안에 path 가 추적되는 경우가 발생한다. 이때 이들이 event listener 의 target 으로 잡히지않도록 css 에서 설정할수있다. /* Disable event listener catches this elements */ span, svg, path { pointer-events: none; }

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption..

Grid 의 column 의 width 를 px 로 고정한 상태에서 scroll bar 를 grid 에서 사용하는 방법이다. 먼저 html 작성시, 먼저 item 들을 묶어주는 div에 다시 scroll-bar 를 보여줄 div 로 감싸야한다. #scroll-box { position: relative; width: 100%; height: 100%; overflow: auto; } #items { position: absolute; width: 100%; height: 100%; display: grid; grid-auto-columns: 30px; /* 반드시! */ grid-auto-flow: column; /* row 를 가지지않을거라면 반드시! */ } 위에서 grid-auto-columns 를..

/* 반드시 overlay 여야함!! */ .test { overflow: overlay; } .test::-webkit-scrollbar { width: 1vw; } .test::-webkit-scrollbar-thumb { background-color: hsla(0, 0%, 42%, 0.49); border-radius: 100px; } scroll 바의 default 인 뒷배경을 날릴려면, 반드시 overflow 가 overlay 여야한다. overflow : scroll 인 상태에서 아무리 ::-webkit 을 지지고볶고해도 배경은 변하지않는다.

stackoverflow.com/questions/10765755/how-to-apply-multiple-transforms-in-css

@mixin layer { .layer { display: grid; grid-template-columns: 1fr; * { grid-column-start : 1; grid-row-start : 1; } } } @include layer; 이렇게 해놓으면, 자식 요소에는 아무런 처리를 해주지않아도, 부모 크기에 맞춰 100% 100% 가 되고, 포토샵처럼 완전 같은 위치에 레이어할수있다.

CSS 에서는 -- 를 앞에 붙임으로써 변수를 선언할수있다. 또한 CSS 변수는 다른 클래스안에서 재설정할수있다. .rect { --bg-color : black; background: var(--bg-color); } .red { --bg-color : red; } .blue { --bg-color : blue; } .green { --bg-color : green; } .purple { --bg-color : purple;} 위와 같이 작성하면, JS 에서 inline-style 을 접근하여 귀찮게 변경하지않고, 그저 클래스를 갈아끼움으로써 해당 변수가 다르게 적용되게끔 할수있다. 이 변수는 linear-gradient 같은 CSS 함수의 내부 인자로 전달될수있다. JS 에서 지지고볶지말고 클래스를 ..

^#[^@}]+} // id ^\.[^@}]+} // class Vscode 말고, Sublime Text 에서 해야함.

tailWind css 를 사용하면서, 내가 직접 CSS 라이브러리를 짜보고싶다면 욕심이 생겼다. 이를 위해 필요한것이 SCSS 이다. SCSS 는 CSS 의 단점을 보완하기위해 나온 언어이다. SCSS 를 사용하면 CSS 안에서 for loop 를 하여, 여러 클래스를 순차적으로 생성해낼수있다. SCSS 는 pre-processor 이기때문에, 빌드하고나면 plain CSS 가 된다. 먼저 vite 환경 터미널에서 npm install -D sass 를 통해 설치를 한다. 이제 사용해보자. /* test.scss */ $len : 100; @for $i from 1 through $len { .text-size-#{$i} { color : yellow; font-size : $i + px; } } 위의..