VanillaJS2 VanillaJS Momentum vanillaJS-momentum 🌱 - HTML, CSS, JavaScript, Github Pages 전에 해본 적이 있는 기능을 구현하는 것이었기 때문에 어렵지 않을 거라 생각했던 내 자신아 열심히 반성하고 명확하지 않은 것에 대해 다시 한 번 꼼꼼하게 짚고 공부하는 습관을 기르자는 다짐을 했다. 디자인을 어떻게 할 지도 엄청나게 고민을 했다. 사실 처음에 원했던 디자인은 벽에다가 엽서나 문장 붙이는 걸 좋아해서 이런 컨셉으로 하려 했는데 CSS grid 어떻게 하는 지 다 까먹어서... 그래서 결국은 또 심플하게 하자며 이런 식으로 바꿨다. 심플이즈베스트 아니겠냐며. 변명 그만 하고 grid 공부합시다-! 매번 CSS를 하면서 느끼는 것이지만, 배운 SCSS를 써서 코드 쓰는 양을 좀 줄입시다.... 2021. 10. 4. [Vanilla JS] input에서 선택한 이미지 미리보기 이에 대한 건 클론 트위터에서 썼던 코드인데 당시에 강의에서 봤던 걸 그대로 따라 썼던 터라 조금 더 잘 이해하기 위해 다시 한 번 정리한다. 클론 트위터에서는 리액트로 구현을 했지만, 이번에는 mdn 문서를 찾아보며 바닐라 자바스크립트로 구현해본다. 일단은 index.html에 input을 마크업해준다. input에서 type을 file로 지정하고 accept로 모든 이미지를 선택할 수 있게 정한다. 그리고 자바스크립트에서 쓸 함수를 input에 넣어준다. input 속성으로 onchange를 쓸 수 있다는 걸 처음으로 알았던 오늘... 리액트에서 onChange가 있지만, 이 이벤트가 addEventListener('change', callback function)에서 왔을 거라 생각했던 터라 mdn.. 2021. 10. 4. 이전 1 다음
