음악, 삶, 개발

이 사이트가 (https://grid.kiwiberry.nz/) 가상 스크롤의 가장 적절한 예제를 보여주고있다. Vue 로 구현되어있지만, 나는 vanilla HTML 에서 구현해보려한다. 위의 사이트를 스크롤하며 콘솔을 열어 확인해보니 대략 아래와 같은 로직을 확인할수있었다. 1. scroll 을 구현할 div 를 먼저 부모 div 로 감싼뒤 overflow: auto 를 설정한다. 2. 이 div 안에 scroll 을 담당할 div 를 넣고, height 를 item 갯수 * itemHeight 로 매우 길게 생성한다. (이게 중요) (item 갯수가 100000개라고 가정하면 50px 이라해도 500백만 px 이 나온다) 3. 이제 이 scroll 할 div 에 첫 부모 container (view..

1. classNames 라는 아래 함수를 생성한다. export const classNames = (...classes: (false | null | undefined | string)[]) => { return classes.filter(Boolean).join(" ") } 2. VSCode 의 setting.json 에 아래의 요소를 추가한다. /* setting.json */ { "tailwindCSS.experimental.classRegex": [ ["classNames\\(([^)]*)\\)", "'([^']*)'"] ] } 3. 사용한다

TailWind 에서 tailwind.config.js 파일을 연뒤에, exports 안에 theme 안에 colors 객체를 만든뒤 아래와 같이 리터럴로 작성한다. /* tailwind.config.js */ module.exports = { theme: { colors: { 'myOwnColor' : 'black', 'myAnotherColor' : 'white' }, } } 그러면 html 에서 Hello 와 같이 사용할수있다. 이런 점이 TailWind 에서 너무 편한것이다. 색만 정의해놓으면 css 파일열고 backgroundColor 니 color border-color 이딴거 신경쓸 필요없이 바로 조합해서 사용할수있게된다. 심지어 inline style 도 아니며 jit 컴파일된다. 수정) ..

마우스를 더블클릭하거나 드래그하는와중에, button 속에 text 가 선택된다. 이것을 방지하기위해 css 에서 아래와 같이 작성한다. button { user-select : none; }

항상 html 에서 레이아웃을 만들때 1D 형태를 쓰게되면 Flexbox 를 사용해야한다라는 강박관념이 있었지만, 1D 도 Grid 가 우월하다. 이에 관해 많은 검색을 해보았는데, 다른 이들도 Grid 가 할수없는 레이아웃이 필요하지않은 이상은 1D 도 Grid 를 default 로 사용하라고 권장한다. https://www.reddit.com/r/web_design/comments/7uxldi/should_i_be_using_a_css_grid_or_flexbox_or_a/ Grid 가 Flexbox 보다 압도적으로 뛰어난 점은 자식 요소의 css 작성을 줄여준다는것이다. 대부분의 경우 자식 요소에서 아무것도 작성하지않아도 될때가 많다. 반면 Flexbox 는 자식 요소에서 무언가를 굉장히 많이 해주..

Grid 를 Flex 보다 우선적으로 사용하는 이유는 무엇보다도 자식 요소에 아무런 css 태그가 들어가지않아도, 부모가 자식의 width 나 height 를 결정할수있다는것이다. 더 놀라운 사실은, 부모 css 에서 Grid 를 건드리면 자식 요소를 숨길수도있다. 보통 자식 요소를 숨기기위해서는 display: none 을 사용하지만, Grid 를 사용하면 훨씬 유연하게 dynamic layout 을 구현할수있다. .parent { display: grid; grid-template-columns: 1fr 1fr 1fr; } .parent-hide-2nd-child { grid-template-columns: 1fr 0 1fr } 위에서 보이는것처럼, 2번째 자식 요소의 column 크기를 0 으로 주..

HTML5 의 canvas 는 보통 div 안에 넣어서 아래와 같이 사용을 한다. 이 상황에서의 문제점은, browser 크기를 조절할때 canvas 는 가만히 있게 된다. 이 부분에 대해 window.addEventListener('resize') 를 활용하여, 브라우저 크기가 변할때마다 cavas.width 와 canvas.height 을 변경하는 JS 코드를 작성했었으나, 퍼포먼스는 매우 처참했다. 엄청나게 느리게 브라우저 크기가 조절이 된것이다. 이것저것 해본 결과 결론을 내었다. 1. canvas 를 꽤나 크게 만든다. canvas.width = 2000 canvas.height = 2000 2. css 를 사용해 div 에 맞춰 stretch 한다. .parent { position: rela..

이 부분이 작업할때마다 매번 해깔려서 다시 정리해놓으려한다. 위와 같은 상황에서, grid 를 사용하면 자식은 전혀 건들지않고, 부모의 css 에서 자식의 넓이를 결정할수있다. .parent { height: 100%; /* 반드시!! 안하면 자식이 안줄어서 y 스크롤바 생김 */ display: grid; grid-auto-flow: column; grid-auto-columns: 5rem; /* 자식 넓이 */ overflow: auto; } 이렇게만 하면 자식의 css 는 전혀 설정할 필요없다. 위의 코드를 보다시피, 반드시 height 를 100% 로 해줘야한다. 이는 자식의 height 로 inherit 되기때문이다. 부모의 height 이 설정되지않은 경우, scroll-bar 가 생긴만큼 자..

그동안 px 만 사용하다가 responsive layout 을 구현하게되면서 큰 벽에 부딛혔고, 하루종일 구글링을 하며, 각 property 에 적합한 unit 을 찾아보았다. "적절히 잘 써야한다" 는 개발할시 날 매우 혼란스럽게 만들기에, 많은 글들을 보여 조금 결론을 내보았다. width : % font-size : rem padding : em @media query : px px 를 사용하는 위치는 media query 이외에는 거의없지만, box-shadow 나 border 또한 px 로 사용한다. 대부분 1px ~ 4px 매우 작은 단위이기때문. .container { width: 100%; /* % */ font-size: 1rem; /* rem */ padding: 0.1em; /* em..

1 2 3 4 5 6 7 8 위와 같이, 1 -> 2 -> 3 -> 4 -> ... 8 을 화면에서는 거꾸로 쌓이게끔 해보자. .container { display: flex; flex-direction: column-reverse; } flex-direction 속성에서 column 또는 row 뒤에 -reverse 를 붙여주면된다. 또한, 각 item 들을 stretch 해주기위해 item 들의 속성에 flex-grow 를 1로 설정한다. .item { flex-grow: 1; } 결과물.