음악, 삶, 개발

button 태그를 사용하지않고도 div 로도 button 을 만들수있다. :active 클래스를 추가하게되면, 마우스가 눌렸을때 일어날 변화를 설정할수있다. .rect { background-color: red; } /* mouse 가 눌렸을때 */ .rect:active { background-color: green; }

developer.mozilla.org/ko/docs/Web/CSS/box-shadow CSS 의 box-shaow 속성은 해당 요소의 하단 레이어를 만들어주는 속성이다. box-shadow 의 값으로는 5가지가 들어갈수있다. .rect { background-color: red; box-shadow: 50px /* x */ 10px /* y */ 0px /* blur */ 0px /* spread */ blue; /* color */ } 반드시 위의 값 순서를 맞춰야한다. x, y, blur, spread, color 순이다. 여기서, 값의 가장 앞에 inset 을 추가하게되면 inner layer 가 된다. .rect { box-shadow: inset 50px /* x */ 10p..

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 로 정의후.. 에서 사용.