본문 바로가기

728x90

분류 전체보기

(20)
[CSS] reset.css (iOS 스타일 초기화) 각 브라우저마다 기본 CSS가 다르게 설정되어 있습니다. 우리가 원하는 디자인을 모든 브라우저에서 동일하게 보고 싶다면 각 브라우저의 기본 CSS를 모두 초기화시켜야 되겠죠? 그럴 때 사용하는 것이 reset.css 입니다. CSS Tools: Reset CSS (meyerweb.com) CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was disc..
[Firebase] Firebase Hosting 웹이나 앱 애플리케이션을 만들고 다른 유저들도 사용할 수 있게끔 하기 위해서는 배포를 해야 합니다. 오늘은 배포를 정말히 간단히 할 수 있게끔 도와주는 Firebase Hosting에 대해 알아보겠습니다. https://console.firebase.google.com 로그인 - Google 계정 이메일 또는 휴대전화 accounts.google.com 1. 프로젝트 만들기 위의 링크로 접속해서 로그인 후 '프로젝트 추가' 누르기. 각자 프로젝트에 맞게 프로젝트 이름 작성 구글 애널리틱스는 빼고 진행. 프로젝트 만들기 버튼 누르기 2. Hosting 모든 Firebase 기능 보기에서 Hosting을 선택 3. 이제부턴 vscode 터미널에서 1. Firebase CLI 설치 npm install -g ..
[Vue] 프로젝트 시작하기 Vue로 새로운 프로젝트를 만드는 과정을 설명드리겠습니다. 우선 Vue_Projects라는 폴더를 만들고 vscode로 열어주세요. npm install -g @vue/cli Vue CLI를 설치하는 코드인데 Vue 프로젝트 구성하는 것을 도와주는 역할입니다. Vue를 처음 시작할 때에만 설치하시면 되고 나중에 다시 새로운 프로젝트를 만들 때에는 스킵하시면 됩니다. vue create [프로젝트명] 위의 코드로 vue 프로젝트를 만드는데 아래 그림의 화면이 나오면 Vue3를 선택해주세요. cd [프로젝트명] code . 'cd'는 'change directory'의 약자로 여러분이 만든 프로젝트의 루트 디렉토리로 들어가는 명령어, 'code .' 은 현재 위치에서 vscode를 여는 명령어 입니다. 이제..
[SEO] 구글 검색 노출 직접 정성들여 만든 웹을 배포까지 했는데 유저는 없고, 백날 구글에 검색해봐도 뜨지도 않고 뭔가 이상했죠? 구글에 검색 노출시키기 위해서는 구글 서치 콘솔을 사용해야 합니다. https://search.google.com/search-console Google Search Console Search Console 도구와 보고서를 사용하면 사이트의 검색 트래픽 및 실적을 측정하고, 문제를 해결하며, Google 검색결과에서 사이트가 돋보이게 할 수 있습니다. search.google.com 1. 속성 추가 URL 접두어에 URL 전체를 입력해주세요. 2. HTML 태그 붙여넣기 메타태그를 복사해서 index.html의 에 붙여넣어 주세요. 배포까지 완료한 후 확인 버튼을 누르면 완료됩니다. 간단하죠? 네이..
[SEO] 네이버 검색 노출 직접 정성들여 만든 웹을 배포까지 했는데 유저는 없고, 백날 네이버에 검색해봐도 뜨지도 않고 뭔가 이상했죠? 네이버에 검색 노출시키기 위해서는 네이버 서치어드바이저를 사용해야 합니다. 네이버 서치어드바이저 (naver.com) 네이버 서치어드바이저 네이버 서치어드바이저와 함께 당신의 웹사이트를 성장시켜보세요 searchadvisor.naver.com 1. 로그인 후 웹마스터 도구에 들어가서 URL 입력 후 옆의 버튼 누르기 2. HTML 태그를 복사해서 index.html의 에 붙여주고 소유확인 HTML 태그를 붙여주고 배포까지 하신 다음에 소유확인 버튼 눌러주시면 됩니다. 3. robots.txt 파일 추가 public 폴더 안에 robots.txt 파일을 추가하고 User-agent: * Disall..
[Adfit] 애드핏 광고 신청 및 사용하기 Vue 프로젝트에 애드핏 광고를 넣는 과정에 대해 포스팅하려고 합니다. 애드핏은 애드센스에 비해 승인이 쉽게 되는 편이라 신경 쓸 내용이 많지 않아 잘만 따라와주시면 수익을 낼 수 있습니다. 그럼 시작하기에 앞서 Adfit 로그인을 먼저 해주세요! AdFit (kakao.com) AdFit 쉬운 정산 적립금 지급 신청 방법이 쉽고 간편하며, 확정 적립금은 현금으로 지급 신청한 후 한 달 이내에 수령 가능합니다. adfit.kakao.com 1. 매체 등록하기 Adfit 시작하기 - 광고관리 - 매체 등록을 눌러주시고 다음과 같이 내용을 채워주시고 등록을 눌러주세요. 2. 광고단위 생성 광고단위 생성 - 다음을 눌러주시면 아래와 같이 뜨는데요 배너를 선택해주세요 옵션 사항은 전부 미설정으로 두셔도 괜찮습니..
[API] 카카오톡 공유하기 API 사용하기 1. Kakao Developers 로그인 후 내 애플리케이션에서 '애플리케이션 추가하기' 버튼을 눌러주세요. Kakao Developers 내 애플리케이션 2. 아이콘, 이름, 사업자명, 카테고리를 작성해주세요 3. 플랫폼 - 플랫폼 설정하기를 눌러주세요 4. Web - Web 플랫폼 등록을 눌러주세요 web 외의 다른 플랫폼 사용시 자신이 개발하고 있는 플랫폼에 맞게 선택해주시면 됩니다. 5. 사이트 도메인을 작성해주세요 배포링크와 함께 로컬호스트도 추가해주셔야 개발 환경에서도 카카오톡 공유하기 API가 정상 작동하는지 확인할 수 있습니다! 저장을 눌러주세요. 6. 메시지 템플릿 작성 메시지 템플릿 | Kakao Developers 도구 위 링크에서 자신의 애플리케이션을 선택하고 템플릿 만들기를 눌러..
[Javascript] Query String 암호화하기 - crypto-js URL을 통해 data를 넘겨줄 때 암호화를 하지 않으면 만천하에 중요한 data를 노출하게 되기 때문에 중요한 내용을 넘겨야 하는 경우 반드시 암호화를 해줘야 한다. 백엔드가 있는 경우 백엔드 내부적으로 암호화 해주는 코드를 작성하면 되는데, 프론트엔드만 사용하는 경우 crypto-js를 사용하면 간단하게 해결할 수 있다. crypto-js 공식 페이지는 다음과 같다. crypto-js - npm (npmjs.com) crypto-js JavaScript library of crypto standards.. Latest version: 4.2.0, last published: a month ago. Start using crypto-js in your project by running `npm i cr..

728x90