JavaScript를 통해서 동적 엘리먼트(element)를 생성 시에 함수 인자에 따옴표를 추가해야 하는 일이 종종 있다. 이럴 때 아래와 같은 방법으로 따옴표 안에 따옴표를 추가하였다. 결론부터 작성하자면 넣고자 하는 따옴표(') 앞에 \ 를 붙여주는 것이다. (ex : var text = '';) 아래는 예시코드 이다. 1. HTML 동적 도큐먼트 생성하기 button 을 클릭 시 test(div)에 element를 추가. 2. JavaScript function addElement(){ var text = "테스트"; var str = ''; str += '동적Element 생성하기';= str += ''; $("#test").append(str); } function testing(text1, ..

현재 보고 있는 페이지를 클립보드와 카카오 API를 사용해서 공유하는 방법을 적용해보도록 하겠습니다. 1. 카카오 Developer 설정 1-1. 카카오 개발자 사이트 가입하기 - 카카오톡에 공유하기 위해서 카카오 API(카카오링크)를 사용하도록 하겠습니다. - 카카오 개발자사이트를 접속하여 가입을 진행합니다. 1-2. 어플리케이션 생성 - 자세한 정보는 카카오 개발자사이트를 참고하셔도 됩니다. - 가입이 완료되었다면, 우측 상단에 [내 어플리케이션]을 클릭합니다. - [어플리케이션 추가하기]를 클릭하여, 정보를 입력하여 생성합니다. - 정상적으로 생성이 되었다면, 해당 애플리케이션을 클릭하여, 앱 키를 확인합니다. 참고!!! 앱키는 각 애플리케이션의 고유 값이므로, 잘 보관하도록 합니다. 1-3. 플랫..

프로젝트를 진행하다보면 모바일에서도 확인이 가능해야 할 페이지가 존재한다. 예를 들어, 에러페이지인데 이미지를 보여준다던가.... 각각의 모바일마다 해상도가 다르기 때문에, 이미지 비율을 유지하여 보여주도록 해야하는데, 이때 간단하게 css로만 설정하여 반응형으로 만들어 적용해봤다. 1. CSS .container { height: 100vh; width: 100vw; } .img_item { width: 100%; height: 100%; margin: 0 auto; background-image: url("이미지URL"); background-repeat: no-repeat; background-position: center center; backgorund-size: 100% 100%; } 2. h..

해당 글은 인프런에서 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex 를 듣고 작성하였습니다. 개발환경 IDE : VS Code OS : MAC OS Vue : 4.5.12 Npm : 6.14.11 Node : v14.16.0 해당 글의 코드는 여기에서 확인 가능합니다. 1. 프로젝트 생성하기 - 로컬PC에서 Vue.js 프로젝트를 생성할 디렉토리를 만듭니다. - VS Code로 생성한 폴더를 열고, 터미널을 실행합니다. - 아래 2가지 방법 중 원하시는 방법으로 vue 프로젝트를 생성합니다. vue create 프로젝트명 vue init webpack-simple 프로젝트명 vue create 사용 Default ([Vue 2] ...) 를 선택합니다. vue init..

카카오톡을 통해서 어떠한 정보를 공유하기 위해서 URL을 공유하는 일이 많이 있다. 카카오톡에 URL을 공유하게 되면 위의 그림과 같이 썸네일 이미지와 제목, 내용 등을 보여주게 되는데, 이는 어떻게 보여주게 되는지 확인해보고자 한다. 1. OG(Open Graph), 오픈그래프 - 오픈그래프는 페이스북이 기존의 메타 데이터 표기방법을 참조하여 만들었습니다. - 어떠한 HTML 파일의 메타정보를 쉽게 표시하기 위해서 메타정보에 해당하는 제목, 설명, 이미지 등 다양한 요소들을 통일해서 사용할 수 있도록 정의해놓은 프로토콜 입니다. 오픈그래프 기본 태그 og:title - 사이트의 제목 og:type - 사이트의 종류 예) website og:image - 사이트를 나타낼 대표 이미지(미리보기 이미지) o..