음악, 삶, 개발

www.npmjs.com/package/color npm i color

stackoverflow.com/questions/20626685/better-way-to-set-distance-between-flexbox-items?page=1&tab=votes#tab-top #parent { position : absolute; width : 500px; height : 500px; background-color: tomato; display : grid; grid-auto-flow : column; padding : 10px; /* 나와 자식간에 10px 의 gap 을 만들어줘! */ box-sizing : border-box; /* 하지만..날 늘리지말고, 자식을 10px 줄여줘! */ } #child { background-color: green; marg..

padding 속성은 부모와 자식간에 간격을 의미한다. 이때 이 간격은 상,하,좌,우 모두이다. #parent { width : 500px; height : 500px; padding : 20px; } padding 속성은 margin 과 달리, 부모 css 에서 정의되어야한다. padding 의 디폴트는, 값에 따라 부모의 크기를 늘린다. 따라서 위와 같이, 500px 500px 에, padding 이 20px 이라면 부모의 크기는 540px 540px 이 된다. 40px 이 늘어나는 이유는, 상.하 그리고 좌.우 (20px x 2 ) 이기때문이다. 하지만 부모의 크기를 유지한채, 자식의 크기를 줄여주는 속성이 있는데, 바로 box-sizing 의 border-box 이다. #parent { width..

div { margin : 10px; } margin 속성은 위와 같이, 실제 이벤트가 작동하는 범위를 줄인다. 즉, 해당 요소의 크기가 실제로 줄어든다. 하지만, margin 영역에도 마우스 이벤트가 발생했으면 할수있다. 이럴때는 inline border 를 만들어 marigin 처럼 보이게끔 할수있다. div { box-sizing : border-box; border : 12px solid black; } 이벤트가 margin 영역 (실제로는 border 영역) 에도 발생한다.

#container { position : absolute; width : 200px; height : 200px; background-color : rgb(10, 10, 10); display : grid; grid-auto-flow : column; /* 책꽂이 */ } #one { background-color: red; } #two { background-color: green; } #three { background-color: blue; } #four { background-color: yellow; }

https://stackoverflow.com/questions/36993834/add-vue-js-event-on-window 위와 같이, 드래그를 시작하면, 창 바깥으로 나가도 드래그는 작동해야한다. drag 이벤트는 불행히도, drag & drop 을 위한 이벤트여서 mousedown, mouseup, mousemove 를 조합해야한다. 이때 중요한것은 @mousedown 만이 태그안에 들어가 호출되고, mousedown 이 되었을대, mousemove 과 mouseup 의 이벤트 리스너가 내가 만든 함수로 등록되고, mouseup 에서는 해당 리스너들을 다시 제거해주어야한다.

props 를 정의할때는 camelCase props 를 사용할때는 kebab-case 또한, props 를 설정하였다면 사용하기위해 반드시 setup(props) 와 같이 인자로 props 를 넘겨야한다. Hello World 로 정의후.. 에서 사용.

Hello World

reative 함수의 인자로 넘어가는 데이터는, 이 데이터의 어딘가가 변경되었을때, 해당 데이터를 사용하는 DOM 을 다시 랜더링하게 한다. click {{ state.value }}