Posts

Showing posts with the label myWebsite

웹사이트를 만들고 나서 디플로이(deploy)부터 광고 붙이기까지 나만의 일 처리 순서

최근 웹사이트를 몇 개 만들었는데 웹사이트를 만들고 나서 디플로이(deploy)부터 SEO 최적화까지의 과정을 거치면서 헷갈리거나 놓치는 순간들이 있었다. 그래서 블로그에 이 과정을 정리해두고 업무 순서도처럼 참고하려고 한다. 1. 검색 엔진 최적화 (SEO 최적화)에 필요할 태그들 미리 추가하기 html 파일을 작성할 때 주로 <!DOCTYPE html> 양식으로 작성을 한다. 이 때 자동으로 생성되는 메타 태그들도 있지만, 네이버 SEO 최적화를 진행하기에는 부족하다. 그래서 웹사이트 개발을 완료하면 아래의 다섯 개 태그를 추가한다. 페이지 설명과 Open Graph 관련 태그들이다. 선호 URL을 정하는 태그도 있다. < meta   name = "description"   content = "사이트 설명" > < meta   name = "keywords"   content = "검색 키워드들, 쉼표로 구분" > < meta   property = "og:title"   content = "오픈그래프 제목"   /> < meta   property = "og:description"   content = "오픈그래프 설명"   /> < link   rel = "canonical"   href = "https://선호URL/" > 2. 위의 태그들이 추가되면 deploy한다. 요새는 조코딩JoCoding 유튜브 채널을 통해 알게 된 netlify에 사이트들을 업로드하고 있다. 무료지만 100GB까지 사이트들을 업로드할 수 있어 매우 유용하고 편리하다. 다만, 무료 버전을 사용할 시 사이트 Url이 "https://자신이 정한 주소.netlify.app/"이 되고 .com 도메인을 쓰려면 유료 결제를
Post a Comment
Read more

[자바스크립트] 입력 창 안의 텍스트 클립보드 복사 기능 구현하기

Image
 입력 창 안의 텍스트를 사용자가 클립보드에 복사할 수 있게 하는 기능은 매우 유용합니다. 가장 대표적인 목적을 예로 들자면, 자신의 웹사이트 이용자에게 웹사이트 공유를 부탁하며 링크를 편하게 복사할 수 있도록 해줄 수도 있습니다.  제가 만든 웹사이트의 경우, 사용자가 직접 입력 창을 필요한 문자로 채우고 이를 복사해서 필요한 곳에 사용할 수 있게 하였습니다. 아래 캡쳐 화면을 보시면 이해가 쉬울 것입니다. 나열된 문자 중 필요한 문자를 클릭하면 상단의 입력 창에 모여서 글 복사 버튼을 누르면 알림이 뜨는 방식입니다. 포스팅 내에 입력 창과 이 입력 창 안의 텍스트를 복사할 수 있도록 하는 버튼을 직접 구현해 보겠습니다. 코드는 그 아래에 적어 놓을테니 마음에 드신다면 가져 가서 쓰시면 되겠습니다. 복사 버튼을 활용하는 데에는 대표적으로 두 가지 경우가 있을 것 같습니다. 입력 창이 비어져 있어서 웹 사용자가 직접 입력 창을 채우고 복사해 가는 경우, 그리고 개발자가 미리 입력 창에 원하는 텍스트를 채워 놓고, 사용자는 이 텍스트를 그대로 복사해 가는 경우. 전자의 경우를 먼저 알아 보겠습니다. 글 복사 버튼 입력 창 안에 원하는 텍스트를 직접 입력하고 글 복사 버튼을 클릭해 보세요. 버튼 안의 텍스트도 직접 정할 수 있습니다. 위 기능의 코드는 아래와 같습니다. .html 파일 <input id="something" name="Subject" size="40" type="text" /><br /><br /><button onclick="myFunction()"> .js 파일 function myFunction() {     var copyText = document.getElementById("something");     copyText.select();     copyText.setSelectionRan
Post a Comment
Read more

내가 만든 웹사이트에 카카오 애드핏 넣어보기_매우 간단

Image
 안녕하세요? 어쩔수입니다. 최근에 웹사이트를 세 개를 만들었고, 2개는 승인이 됐고, 1개는 반려가 됐습니다. 우선, 반려 사유는 한 페이지에 동일 광고 단위로 2개 이상의 광고를 삽입했기 때문입니다. 이 이야기는 글 말미에 자세히 이야기하기로 하고 일단, 카카오 애드핏 광고를 넣는 과정을 알아보겠습니다. 1. 카카오 애드핏에 로그인한 뒤 이용약관에 동의합니다.  그럼 아래 같은 화면이 나오는데, 광고 관리에 커서를 대면 '광고 관리' 탭이 나옵니다. 이 광고 관리를 클릭합니다. 2. 다음에 나오는 화면에서는 '+새 매체'를 클릭합니다. 클릭 후 나오는 화면에서는 매체명과 매체URL을 입력하면 되는데요. 매체명은 자신이 구별할 수 있는 이름을 자유롭게 지어주면 됩니다. 사이트 이름으로 정하는 것이 무난합니다. 매체 URL에는 자신의 웹사이트의 링크를 정확하게 입력해줍니다. 이 글을 작성하는 김에 이 구글 블로그스팟을 카카오 애드핏에 등록해보겠습니다. 광고 단위명에도 간단히 이름을 지어줍니다. 원하는 광고 유형을 선택합니다. 현재 다음과 같은 광고 유형들이 있습니다. 다양한 배너 모양이 있네요. 배너를 선택했으면 '스크립트/SDK 발급'을 클릭합니다. 3. 이제 가장 중요한 과정입니다. 발급 받은 스크립트와 SDK를 원하는 위치에 입력하여 줍니다. 저는 이 문장 바로 아래에 삽입해 보겠습니다. 꼭 광고가 승인되어 여러분이 이 글을 볼 때 쯤이면 광고가 보이는 중이었으면 좋겠습니다.  알고보니 게시글 안에 광고가 삽입이 되면 안 된다고 합니다. 블로거의 레이아웃 섹션에서 html, 자바스크립트 설정을 통해 삽입해야 합니다. 앞서 말씀드린대로 저는 한 페이지에 동일한 광고 단위의 광고가 2개 이상 들어가면 승인이 보류됩니다. 두 개 이상의 광고를 한 페이지에 넣고 싶다면 꼭 다른 광고 단위를 발급 받아야 한다는 것을 유념하시기 바랍니다.
Post a Comment
Read more

자바 스크립트 입문자가 매우 간단한 영어 가상 키보드를 만든 방법

Image
 안녕하세요? 어쩔수입니다.  저는 자바 스크립트를 배우기 시작한 지 아직 한 달이 되지 않은 자바 스크립트 입문자입니다. 비록 초보인 제가 만들어서 미흡한 점이 많지만 다른 초보들이 간단한 가상 키보드를 만드는 데에 작은 도움이 될 수 있을 것 같아 만든 방법을 공유하려고 합니다. 저도 방법을 찾느라 많이 찾아보고, 헤맸거든요. 다만, 영어 버추얼 키보드라서 한글 키보드를 만드시려는 분께는 큰 도움이 안 될 것 같습니다.  위의 캡쳐 화면이 제가 만든 가상 온스크린 키보드입니다. 버튼 클릭을 통해 인풋 박스에 입력되면 복사 버튼을 눌러서 클립보드에 복사하는 프로그램입니다.  프랑스어, 스페인어 등 악센트 마크가 있는 알파벳이 포함된 언어를 사용하는 국가에 있는 사람들이 키보드에 악센트 마크가 없을 때 간단히 복사 붙여 넣기 할 수 있도록 만든 사이트입니다.  통화 기호를 모아 놓은 페이지도 있습니다. 웹에서 직접 보고 싶으신 분은 링크를 타고 들어가 주세요. https://accentmark.netlify.app/ 제가 위의 사이트에서 사용한 코드 중 일부를 여기에서 이 페이지에 직접 구현해보겠습니다. 아래의 '감사합니다' 버튼을 눌러보세요. 감사합니다 아래는 제가 쓴 코드입니다. .js 파일 function addText1() {     var input = document.getElementById('something');     input.value = input.value + '감사합니다'; } .html 파일 <button id="URGENT" onclick="addText1()" type="button"><h2>감사합니다</h2></button>
Post a Comment
Read more