소소리네

구글 서치 콘솔 설정을 알아보자. / 티스토리 페이지에 대한 구글 서치 콘솔 설정을 기준으로 한다. 이는 향후, 구글 애드센스 신청과 연계되는 절차로, 구글 애드센스 신청 전 선행작업으로 이해하면 된다. 본인 개개인별 티스토리 설정부터 시작하며 순시적으로 기술한다. / 아래 그림의 절차를 따라가보자. 물론! 티스토리 계정 생성을 했다는 전제 하에! 가능한 절차라는 점을 강조한다. 구글 서치 콘솔 사이트를 접속하자. / https://search.google.com/ 본인의 티스토리 웹 주소(URL)를 등록하자. 도메인 주소 기입 후, 계속 클릭 티스토리 소유권 확인 절차 방법은 여러가지 있다. HTML 태그 혹은 도메인 이름 공급업체를 활용하는 방법을 소개한다. HTML 태그를 클릭한다. 메타태그를 복사..

생활코딩 2024. 1. 18. 12:17

가비아 도메인을 생성하고 티스토리에서 생성한 블로그와 연결하자. 가비아 도메인 생성을 위해 가비아 홈페이지를 접속한다. // https://www.gabia.com/ 그리고 원하는 도메인 주소를 입력하여 자리가 남아있는지 검색하자. 사용할 수 있는 도메인 주소를 선택하고 신청하자. // 신청하기를 누르니 로그인하란다. // 계정이 없다면 회원가입을, 계정이 있다면 로그인을 해주자. 소유자 정보, 관리자 정보, 서비스 관리 정보 등 원하는 내용을 기입해 주자. 소유자 정보는 본인 개인정보를 입력하면 될 것이며, 서비스 관리 정보는 디폴트 값을 그대로 두자. 부가서비스는 신청하자. // 무료다! 동시 신청 가능 서비스는 본인이 기타 호스팅이 필요하면 신청하도록 하자. // 내가 구현하는 웹 사이트는 해당사항..

생활코딩 2024. 1. 18. 12:16

가비아 도메인을 생성하고 netlify에서 deploy한 페이지와 연결하자. 가비아 도메인 생성을 위해 가비아 홈페이지를 접속한다. // https://www.gabia.com/ 그리고 원하는 도메인 주소를 입력하여 자리가 남아있는지 검색하자. 사용할 수 있는 도메인 주소를 선택하고 신청하자. // 신청하기를 누르니 로그인하란다. 계정이 없다면 회원가입을, 계정이 있다면 로그인을 해주자. 소유자 정보, 관리자 정보, 서비스 관리 정보 등을 본인에게 해당하는 내용으로 기입해 주자. 소유자 정보는 본인 개인정보를 입력하면 될 것이며, 서비스 관리 정보는 일단 디폴트 값을 그대로 두자. // 아래 게시 글을 다 읽었다면 타사 네임서버 사용을 선택하여도 된다. 아니 해야 한다. 작업 양이 줄어든다. // 물론,..

생활코딩 2024. 1. 18. 12:15

인터넷에서는 세상을 이롭게 하는 데 대의?를 가진 코딩 능력자님들이 그들이 만든 코딩을 공유한다. 코딩뿐만 아니라, 심지어 디자인까지도 말이다. // 디자인이란 Style, 즉 CSS를 말한다. codepen.io 사이트를 소개한다. 웹 페이지 구조와 시퀀스, 그리고 디자인을 적극 활용하거나, 단순 참조하거나, 본인 입맛대로 수정해서 쓰면 된다. (지금은 오픈소스 시대가 아닌가) AaronVanston씨가 게시한 글을 참조해서 예시로 실행해 보겠다. thanks to my fellow friend, AaronVanston! 위 이미지대로 웹 페이지를 구성하기 위한 HTML, CSS, JS 코드를 모두 제공한다. 일단 무작정 따라해보자. HTML 코드는 우리가 작업하는 html 파일에서 사이에 넣어주고, ..

생활코딩 2024. 1. 18. 12:14

내 웹페이지에 SNS 기능을 추가해 보자. 구글에서 addthis를 검색한다. 그리고 상단에 노출되는 링크를 클릭하자. Get Started, It's free 클릭 // 역시 공짜가 최고다. Share Buttons를 클릭하자. // addthis에서는 기능을 많이 제공한다. 그 중에서도 우리의 목적은 SNS이므로, Share Button을 클릭한다. addthis 기능을 어떻게 시각화할지 등을 설정하는 화면이다. SNS 매체 수를 선택할 수 있고, SNS 매체를 클릭하는 아이콘의 모양과 크기를 설정할 수 있다. 기능을 하나씩 눌러보고 본인 기호에 맞는 SNS UI를 설계해 보자. SNS UI 설계를 마무리하였다면, Activate a Tool을 선택하자. 나는 이미 Tool을 활성화하였기 때문에 Ac..

생활코딩 2024. 1. 18. 12:14

내가 만든 웹 페이지를 이용하는 유저에게 댓글 서비스를 제공해 보자. 구글에서 disqus를 검색하자. 그리고 상단에 보이는 링크를 따라가 보자. // https://disqus.com/ GET Started 클릭 I want to install Disqus on my site 클릭 내 홈페이지 이름을 유일한 값, 그러니까 고유값으로 설정한다. (일반 플랫폼의 계정 아이디의 정책과 같다) 그리고 웹 페이지의 성격이 무엇인지, // 엔터테인먼트, 게임 등 마지막으로 disqus의 언어 환경을 무슨 언어로 할 지를 선택한다. // 내가 만든 홈페이지는 10개의 언어로 구현했으므로, 영어로 하겠다. 선택사항에 한글도 있다! Plan을 선택해야 한다. Plan이 여러 가지 있는데, 나는 무료버전인 Basic을 ..

생활코딩 2024. 1. 18. 12:13

html 페이지를 코딩으로 구현할 때 각 시퀀스별, function별 gtag를 설정함으로써 내 웹 페이지에서 유저들이 어떤 기능을 많이 썼는지 추적할 수 있는 기능이 있다고 한다. (아직 내가 만든 웹 페이지는 공식런칭하지 않아서 gtag 데이터가 쌓이는 것을 보지 못 하였기 때문에. 아마 그런 기능 따위일거라고 추측하는 바이다.) function gaReload1() { gtag('event', '다른 사진으로 재시도 1차', { 'event_category': '다른 사진으로 재시도' }); } function gaReload2() { gtag('event', '다른 사진으로 재시도 2차', { 'event_category': '다른 사진으로 재시도' }); } 이를 활용한다면 사용 빈도가 높은 기..

생활코딩 2024. 1. 18. 12:12

우리가 애써 만든 웹 페이지는 홍보하지 않으면 그리고 특정 검색어가 노출되지 않으면 아무도 오지 않는다. 홍보는 차치하고 검색어 노출이라도 시켜보자. 이를 Search Engine Optimization, 통칭 SEO라고 일컫는다고 한다. 네이버에서 서치어드바이저를 검색해 보자. 그리고 최상단에 뜨는 링크를 타서 들어가 보자. (로그인은 필수) 스크롤이 조금 내려보면 아래와 같은 링크가 있을 것이다. 클릭! 본인이 만든 site의 URL을 기입하자 Visual studio code에서 본인이 작업한 코딩에 사이에 아래 그림상 빨간 네모로 표시한 HTML 태그를 붙여 넣자. 그리고 소유확인 버튼 클릭. 사이트 소유 여부가 확인되었다. 사이트 목록을 확인하니 사이트 등록이 완료되었다. 상단의 간단체크를 클릭..

생활코딩 2024. 1. 18. 12:12