전체 글29 구글검색엔진 API 구글검색엔진 API 사용하기 https://www.googleapis.com/customsearch/v1?key=키1&cx=키2&q=검색어 구글 검색엔진의 API 를 사용하기 위해서는 두가지의 키가 필요합니다. 1. 구글개발자 페이지 접속 - https://developers.google.com/custom-search/v1/overview?hl=ko#api_key Custom Search JSON API | Programmable Search Engine | Google Developers 이 페이지는 Cloud Translation API를 통해 번역되었습니다. Switch to English 의견 보내기 Custom Search JSON API 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠.. 2023. 1. 26. CSS Grid 정렬 CSS Grid 정렬 {display : grid }는 컨텐츠를 화면의 원하는 영역에 정렬하기 위해서 사용되는 방법 입니다. grid-template-column 과 grid-template-rows 로 행과 열을 지정해 줌으로써 정렬합니다. .container { display: grid; grid-template-rows: 50px auto 50px; } .box { grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: 150px; grid-gap: 10px; } repeat() CSS에서 Grid를 사용할 때 Grid 내부의 셀의 길이를 지정할 때 repeat() 함수를 사용할 수 있습니다. 예를 들어 12개의 같은 길이를 같은 열을 만들고 싶다면 .grid .. 2023. 1. 20. git 코드 버전관리 코딩을 하다가 몇일전으로 코드를 되돌리거나 집에서 짠 코드를 다른곳에서 계속 작업을 이어나가기 위해서는 어떻게 해야할까요? 가장 단순한 방법으로는 날짜별로 코드를 모두 저장하고 USB에 담아서 작업할 수도 있지만 이러한 것이 번거롭다면 git이라는 버전관리 프로그램을 사용하면 됩니다. https://git-scm.com/downloads Git - Downloads Downloads macOS Windows Linux/Unix Older releases are available and the Git source repository is on GitHub. GUI Clients Git comes with built-in GUI tools (git-gui, gitk), but there are several.. 2022. 12. 26. CSS종결자 Vuetify CSS종결자 Vuetify Vuetify는 디자인 요소를 꾸미기 힘들어 하는 사람에게 꼭 필요한 vue 프레임워크의 CSS라이브러리 입니다. 1. Vuetify 시작하기(설정 방법) 🔵 vue프로젝트를 설치합니다. vueify 버전3이 있으나 오랜시간동안 안정성이 검증된 vuetify2 를 설치하기 위해 vue2 버젼으로 vue프로젝트를 설치합니다. vue create myapp 🔵 vue프로젝트 설치후에 곧바로 vuetify 패키지를 vue프로젝트에 추가합니다. => vue add vuetify 2. Vuetify 사용 방법 Vuetify가 설치되면 'v-' 로 시작하는 새로운 Vuetify 태그를 이용할 수 있습니다. Vuetify태그는 그 자체로 디자인 속성이 적용이 된 태그이기때문에 복잡한 CSS.. 2022. 12. 25. Vue 설치 설정 Vue를 처음 설치할때 설치옵션으로 선택을 해야하는 것 들이 많습니다. 그중에 vue create myproject 형태로 기본 프로젝트를 선택 합니다. > npx vue create myproject ? Please pick a preset: Manually select features ? Check the features needed for your project: (*) Babel ( ) TypeScript (*) Progressive Web App (PWA) Support (*) Router (*) Vuex (*) CSS Pre-processors >(*) Linter / Formatter ( ) Unit Testing ( ) E2E Testing ? Use Babel alongside TypeS.. 2022. 12. 16. VSC 확장프로그램 VSC가 개발도구로 특히 인기가 많은 이유는 스마트폰에 필요한 앱을 설치할 수 있듯이 VSC프로그램의 기존의 기능을 확장시킬 수 있는 확장프로그램을 추가로 설치할 수 있는 막강한 기능이 있기 때문입니다. VSC에서 유용하게 사용되는 확장프로그램을 소개합니다. VSC 아이콘 / 폴더 색 변경 - 파일의 종류에 따라 아이콘을 해당파일의 특색에 맞추어 꾸며주는 역할을 하는 기능으로 한눈에 어떤 파일인지 알아볼 수 있어 편리합니다. 태그명 자동 변경 - 태그명을 수정할 일이 생길때 열린태그명을 수정하면 자동으로 닫힌 태그의 이름도 동시에 바꿔줍니다. 기본적으로 여는 태그와 닫는 태그를 일일이 입력해야 하던 것을 만 입력을 해도 가 자동으로 닫힌태그가 완성됩니다. 띠어쓰기된 부분을 색상별로 보기좋게 구분해 줍니다.. 2022. 12. 16. VSC 시작하기 비쥬얼스튜디오코드(VSC) 장난감을 조립할때 드라이버를 사용한다면 자동차와 같은 규모가 큰 물건을 만들때는 전동드라이버와 같이 더 강력한 도구를 이용해 하듯이 프로그램을 만들 때 보다 효과적으로 생산성을 높일 수 있는 필수 도구가 있습니다. 가장 많은 사람들에게 인기가 많은 마이크로소프트 사에서 만든 Visual Studio Code(VSC) 라는 도구 입니다. https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applicatio.. 2022. 12. 16. JS 이벤트 함수 자바스크립트에서 이벤트 함수는 '마우스클릭' 등과 같은 어떤 일이 발생했을때 특정 기능이 실행하도록 명령을 내릴대 사용됩니다. 이벤트 종류는 매우 다양하지만 일반적으로 자주 사용되는 이벤트 함수는 아래와 같습니다. onclick 해당 객체를 클릭 했을 때 이벤트 onmouseover 해당 객체에 마우스가 올라왔을때 이벤트 onmouseout 해당 객체에서 마우스가 나갔을 때 이벤트 onload 브라우저가 페이지 load를 끝냈을 때 onchange 객체가 바뀌었을 때(select 같은 태그에서) 2022. 12. 13. VUE 시작하기 가장 쉬운 프레임워크 Vue 시작하기 프레임워크는 자바스크립트의 복잡하고 길이가 긴 코드를 좀더 쉽고 간편하게 사용할 수 있게 해주는 언어입니다. 웹프로그램을 만들때 많은 사람들이 순수 자바스크립트로 작성하기 보다는 쉽게 프로그램을 만들수 있는 프레임워크 언어를 대부분 사용합니다. 자바스크립트의 프레임워크 언어는 React, Vue, Anglur 등이 있는데 그중 에서 Vue는 사용하는 방법도 쉽고 성능도 강력합니다. 설치방법 1. VUE를 사용하기 위해 두 가지 프로그램 설치 nodejs 최신버전 설치 - VS code 에디터 설치 2. 새로운 폴더를 만들고 VS 코드로 오픈 3. 터미널 열고 npm install -g @vue/cli 입력 터미널은 에디터 상단 Terminal - New Termina.. 2022. 12. 11. HTML 데이터 속성 만들기 HTML 데이터 속성 만들기 HTML 태그에 표준이 아닌 개발자가 추가적으로 필요한 정보를 넣을 수 있습니다. 사용방법은 원하는 태그에 'data-' 라고 표시하고 'data-' 뒤에 속성이름을 붙여주면 화면에는 보이지 않는 추가정보를 HTML요소에 담아 놓고 CSS나 JS에서 불러올 수 있습니다. JS에서 데이터속성에 접근하기 let banana= document.querySelector('.banana'); let item = banana.dataset.number; CSS 에서 데이터속성에 접근하기 .banana[data-number='2000']{ color:yellow } 2022. 12. 11. 이전 1 2 3 다음
