전체 글51 [CSS] 화면에 요소 정가운데에 위치시키는 방법 (반응형!!!) + 텍스트 가운데 배치 1. flex 사용하는 방법 (개인적으론 flex방법을 선호한다ㅎㅎㅎ) 부모요소에 display:flex; justify-content:center; align-items:center; item 2. absolute & translate 사용하는 방법 자식요소에 position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); item ++ 추가 박스 안에 글자까지 가운데에 위치시키고 싶다면 자식요소에 display:flex; justify-content:center; align-items:center; 를 추가해주면 된다. item 이렇게 하면 2021. 10. 19. [CSS] grid-garden으로 재밌게 공부하는 grid flex를 처음 배울 때 flex froggy라는 https://flexboxfroggy.com/ 사이트에서 이것저것 flex를 가지고 놀았었는데 , grid도 grid-garden (https://cssgridgarden.com/) 이라는 비슷한 사이트가 있길래 여기서 grid를 가지고 놀아봤습니다. Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com Grid Garden A game for learning CSS grid layout cssgridgarden.com flex도 container를 위한 속성과 item을 위한 속성으로 나뉘는데, container 속성 : display, flex-direction, flex-wrap, ga.. 2021. 10. 19. [Typescript] 타입스크립트를 "사용해야 하는" 이유 (+ 온라인에서 연습하기) 자바스크립트는 전세계의 97% 이상의 웹사이트에서 사용되고 있는 만큼 가장 인기 있는 프로그래밍 언어 중에 하나입니다. 자바스크립트는 웹사이트를 동적으로 만들 수 있고 다른 복잡한 기능들을 구현가능하게 해주기 때문에 웹사이트에서는 거의 필수적인 존재라고 볼 수 있습니다. 하지만 타입스크립트 또한 자바스크립트 못지않게 그 인기를 빠르게 끌어 올리는 중인데요. 지금 당장 구직사이트에서 프론트엔드 개발자만 검색해봐도 많은 IT기업들은 타입스크립트 사용자를 우대하거나 필수로 하고 있는 것을 볼 수 있습니다. 타입스크립트는, 자바스크립트 기반으로 추가적인 코드작성 ( 타입 지정 등) 을 해준 후 다시 자바스크립트로 컴파일 되어 사용되어지기 때문에 자바스크립트 슈퍼셋(superset) 같은 개념입니다. 결국 자바스.. 2021. 10. 19. [ES6+] var, let, const 쉽게 이해하기! 3줄요약 + 설명 let 변수와 const는 ES6 이후 스펙에서 새롭게 등장한 변수이다. 그래서 브라우저 배포용 코드같은 경우는 아직도 var 변수만 사용되는 경우도 있다고 한다. var, let, const 를 구분하는 가장 중요한 점을 요약하자면, 1. 값 변경 가능 유무 2. 스코프 범위 3.호이스팅 가능 유무 이다. 그리고 우선순위는 const -> let -> var 이라고 하니 최대한 우선순위에 맞춰서 써야하겠다! 1. 값 변경 가능 유무 var과 let은 값이 선언된 이후에 값을 변경할 수 있지만, const는 생성할 때 선언된 초기값을 변경할 수 없다. 2. 함수스코프 vs 블록스코프 var은 함수 스코프를 가지지만, let과 const 변수는 블록 스코프{ }를 가진다. 3. 호이스팅 가능 유무 var은.. 2021. 10. 19. Vue클라이언트에서 node.js(express)서버로 axios 통해 api 통신하기 로컬서버에서 프론트+백을 동시에 다루고 싶다면 vue(프론트)와 node.js의 express(백)을 동시에 서버에 띄워줘야 한다. 만약 vue서버만 띄워놓고 express서버를 띄우지 않았을 경우 Could not proxy request from localhost:8080 to http://localhost:3000. 와 같은 에러가 날 것이다. (나는 그랬다...) 그러려면 package.json의 scripts에서 express서버와 뷰를 동시에 띄워주는 npm 명령어를 선언해줘야 한다. 나는 따로따로 띄워주기 귀찮아서 서버와 클라이언트를 동시에 실행시켜줄 수 있는 라이브러리인 concurrently를 이용했다. npm install concurrently 그 다음 package.json의 scr.. 2021. 9. 14. HTML API Drag and Drop (D&D) 활용 + Vue에 적용 해당 API는 HTML기반 API로 아래 링크에서 자세한 사항을 확인할 수 있다 https://developer.mozilla.org/ko/docs/Web/API/HTML_Drag_and_Drop_API HTML 드래그 앤 드롭 API - Web API | MDN HTML 드래그 앤 드롭 인터페이스는 파이어폭스와 다른 브라우저에서 어플리케이션이 드래그 앤 드롭 기능을 사용하게 해줍니다. developer.mozilla.org 스케쥴 관리 사이트를 Vue로 구현하기 위해 Drag & Drop 기능이 필요했는데, 처음엔 좀 더 다양한 기능이 있는 Vue.Draggable을 시도했었다가 (https://github.com/SortableJS/Vue.Draggable) 내가 원하는 기능 (item 서로 바꾸기).. 2021. 9. 12. 이전 1 2 3 4 다음
