■ 사용 기술 1. Vue.js 2 2. html 3. sass 전반적으로 아주 아주 아주 기초의 Vue.js 프로젝트였음 난이도 : ★☆☆☆☆ 따라하기 쉬움 실용성 : ★★☆☆☆ 본업에서 딱히 도움될만한 내용은 없음 sass 지식을 살짝 얻어감 (sass를 사용 안했었기 때문에) 대충 이런거 만듬(모바일 크기) pc버전

FrontEnd/Vue.js 2021. 12. 9. 15:42

부모 요소에 display: flex를 사용하고 자식 요소를 원하는 영역을 배치하던 와중, 이렇게 child2 에 특별히 지정하지 않은 남은 영역을 모두 할당하고 싶을 때 사용하면 된다. child2 를 예시로 들어보면, .child2 { flex: 1; } 을 해주면 남은 영역이 모두 할당된다. 맨 위 사진의 코드 예시) parent div child1 child2 이상

FrontEnd/css 2021. 12. 9. 14:31

querystring을 받아왔는데 JavaScript get 방식으로 값을 받아오는 방법 // Query String 데이터 출력 function searchParam(key) { // key를 매개변수로 받고, value를 리턴 return new URLSearchParams(location.search).get(key) } 함수로 생성해놓고 사용하는 것이 편합니다. // url = www.example.com?page=12 const page = searchParam('page') console.log(page) // 12 출력 key: value 형태이다보니, key 값을 매개변수로 넘겨주어야 value가 출력됩니다.

FrontEnd/JavaScript 2021. 12. 6. 17:38

부트스트랩 cdn을 사용하던 와중 해당 에러가 지속적으로 발생하였다. 이 문제는 아주 단순한 내용이다. 스크립트의 순서 때문. 이런식으로 boostrap과 jquery cdn을 삽입하였는데, 순서를 바꿔주자 그렇다면 새로고침을 해주어 콘솔창을 확인하면 에러가 사라졌음을 알 수 있다. jQuery가 먼저오고, bootstrap이 그 다음에 와야 해당 에러가 발생하지 않는다. 이상입니다.

FrontEnd/JavaScript 2021. 12. 6. 13:57

html 태그 내에서 enter 를 입력 시 javascript로 원하는 이벤트를 발생시키는 방법 input 태그 내에 를 작성해주도록 한다. enter = keyCode 13

FrontEnd/JavaScript 2021. 12. 2. 16:44

PHPMailer를 통해 이메일을 송신하곤 했는데, 불편하기도 하고 읽기 불편해서 찾아보게 된 EmailJS. 자바스크립트 기반으로 이메일을 보낼 수 있다. parameter 를 통해 원하는 내용을 전달할 수 있어서 더 좋다. (역시 js) Google에 검색하면 1순위로 나오는 웹사이트 (광고 아님) Send email from Javascript - no server code required | EmailJS Send email directly from your client-side Javascript code – no server side code required. Add static or dynamic attachments, dynamic parameters, captcha code and mor..

FrontEnd/JavaScript 2021. 12. 2. 11:46

자바스크립트로 css 를 제어할 수 있습니다. 보고있는 화면의 크기에 따라 클래스를 추가하고, 제거할 수 있듯이 말이죠. 대신 하나하나 클래스를 지정하거나 스타일을 지정해주어야합니다. css 로는 @media ( width: 1000px ) { } 이런 식으로 작성합니다. JavaScript 로는 matchMedia(`(max-width: 1000px)`) 메서드를 사용합니다. ■ 기본 이렇게 matchMedia( ) 메서드를 통해 화면이 변하는 것을 인지할 수 있는데, 해당 내용을 콘솔에 입력해보았습니다. 콘솔창에 출력된 내용을 확인, max-width:992px 기준으로 작성이 되어있는 것을 확인할 수 있습니다. ■ 응용 MediaQuery를 다루려면 MediaQuery 내 match라는 녀석을 활용..

FrontEnd/JavaScript 2021. 12. 1. 16:15

chart.js 를 사용할 때, canvas의 크기(width, height)를 조절하고 싶다. 아주 간단하다. canvas를 감싸고 있는 div 태그를 하나 만들고, div 태그에 position: relative를 적용한 뒤, width, height 를 작성하면 된다. 예시) Your browser does not support the canvas element 그러면 변한 사이즈를 확인할 수 있다. 물론 class 등을 사용하여 css 태그로 적용할 수 있는 방법이 있다.

FrontEnd/JavaScript 2021. 12. 1. 00:01