워드프레스

워드프레스 필수 플러그인 4종(무조건 설치)

워드프레스 필수 플러그인 4종으로 보안, 성능 향상, SEO 최적화, 백업등 워드프레스 설치 후 무조건적으로 설치해야 하는 추천 플러그인 4가지를 간단하게 요약해 정리해 보았습니다. 워드프레스 필수 플러그인 4종 아래 4가지 플러그인은 워드프레스 설치 후 필수적으로 설치하는 것을 권해드립니다. 보안 관련 플러그인 SEO 최적화 플러그인 성능 향상(캐시 관련) 플러그인 백업 플러그인 워드프레스 보안 관련 플러그인 워드프레스 오픈 소스로 전 세계에서 가장 많은 사람들이 블로그 또는 웹사이트로 이용하고 있는 만큼 보안 취약점이 존재합니다. 워드프레스는 티스토리와 다르게 사용자가 직접 보안 관리를 해주어야 하는데요. 이를 해결하기 위해서 워드프레스 보안 플러그인으로 Wordfence Security, iThemes Security, Sucuri Security 등이 있습니다. 이 중 'Wordfence Security'가 가장 인기가 많고 많은 사용자를 보유하고 있으며 워드프레스 보안 유지를 위해 다양한 기능을 제공하고 있습니다. Wordfence Security의 주요 기능 Wordfence Security는 방화벽을 통해 웹사이트를 보호하고, 악성 코드나 해킹 시도를 차단하며 웹사이트 내에 존재하는 멀웨어를 검사해 제거합니다. 그리고 실시간 모니터링해 비정상적인 로그인 시도를 차단하고 해킹 시도나 보안 이슈를 즉시 탐지하며 보안 이슈 발생 시…

2023-02-27
자바스크립트-스크롤-맨-위로-가기-버튼

자바스크립트 스크롤 맨 위로 가기 버튼(부드럽게)

자바스크립트 스크롤 맨 위로 가기 버튼, 페이지 중간 또는 하단에서 버튼을 클릭하면 스크롤을 맨 위로 이동시키는 간단한 코드로 window.scrollTo() 메서드를 사용했으며 부드러운 이동을 위해 window.requestAnimationFrame() 메서드를 이용했습니다. 스크롤 맨 위로 가기 버튼 1. html페이지에 아래와 같이 버튼 요소를 추가합니다. <button onclick="backToTop()" id="btn-back-to-top" title="위로 가기">Top</button> 2. CSS파일에 아래 스타일 코드를 입력합니다. #btn-back-to-top { display: none; position: fixed; bottom: 20px; right: 30px; z-index: 9999; border: none; outline: none; background-color: #555; color: white; cursor: pointer; padding: 15px; border-radius: 10px; } #btn-back-to-top:hover { background-color: #333; } 3. 마지막으로 아래 코드를 자바스크립트 파일에 추가해 줍니다. // 스크롤 이벤트 리스너 window.addEventListener('scroll', () => { // 스크롤 위치가 100px 이상일 때 위로 가기 버튼을 보이게 함 if ( document.body.scrollTop > 100 || document.documentElement.scrollTop > 20 ) { document.getElementById('btn-back-to-top').style.display = 'block'; } else { document.getElementById('btn-back-to-top').style.display = 'none'; } }); // 클릭 시 페이지 맨 위로 스크롤 (애니메이션 효과 추가) function backToTop() { const position = document.documentElement.scrollTop || document.body.scrollTop;…

2023-02-20
자바스크립트-나이-계산

자바스크립트 나이 계산(만 나이)

자바스크립트 나이 계산 소스로 만 나이를 계산합니다. 만 나이를 계산하는 다양한 방법이 있지만 일반적인 가장 만이 사용되는 코드를 작성해 보았습니다. TIP 참고로 2023년 6월부터 한국도 세는 나이 대신 만 나이를 사용한다고 합니다. 자바스크립트 나이 계산 생년월일을 입력받아 현재 날짜를 기준으로 생일이 지났는지 여부를 판단해 만 나이를 계산하는 자바스크립트 코드 소스입니다. // 생년월일 입력 const birthdate = new Date('2000-01-01'); // 현재 날짜 생성 const now = new Date(); // 생일이 지났는지 체크 let age = now.getFullYear() - birthdate.getFullYear(); if (now.getMonth() < birthdate.getMonth() || (now.getMonth() === birthdate.getMonth() && now.getDate() < birthdate.getDate())) { age--; } console.log(age); 또 다른 방식으로 입력한 생년월일과 현재 날짜 간의 차이를 계산하고 new Date(diffInMs).getTime()을 사용하여 밀리초를 나이로 변환하는 방법입니다. // 생년월일 입력 const birthdate = new Date('2000-01-01'); // 현재 날짜 생성 const now = new Date(); // 차이 계산 (밀리초 단위) const diffInMs = now - birthdate; // 밀리초를 나이로 변환 const ageInMs = new Date(diffInMs).getTime(); // 나이 계산…

2023-02-18
자바스크립트 글자 수 세기

자바스크립트 글자 수 세기(feat. chatGPT)

chatGPT이 작성한 자바스크립트 글자 수 세기 코드입니다. 맛보기로 chatGPT에게 간단한 코드 작성을 요청해 보았는데요 직접 타이핑하는 것보다 빠르게 작성해 주네요. 주석도 달아 주고 하단에는 설명까지 친절하게 알려줍니다. 앞으로 chatGPT에게 코드 작성을 요청하고 수정해서 사용하면 생산성이 높아질 것 같네요. const str = '동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세'; const letterCount = str.length; // 글자 수 (공백 포함) const letterhWithoutSpaces = str.replace(/\s+/g, '').length; // 글자 수(공백 제외) const spaceCount = (str.match(/ /g) || []).length; // 공백 수 const wordCount = str.trim().split(/\s+/).length; //단어 수 console.log( `공백포함 글자수: ${letterCount}, 공백제외 글자수: ${letterhWithoutSpaces}, 공백 수 ${spaceCount}, 단어 수: ${wordCount}` ); // 결과 : 공백포함 글자수: 35, 공백제외 글자수: 28, 공백 수 7, 단어 수: 8

2023-02-15
구글 애드센스 계좌 등록

구글 애드센스 계좌 등록 및 추가 방법

구글 애드센스 계좌 등록 및 추가 방법을 설명합니다. 쉽고 간단한지만 비교 확인 차원으로 읽어 주시기 바랍니다. 애드센스 수익금을 지급받으려면 국내에 개설된 계좌(외화계좌 포함)를 애드센스에 등록해야 하는데요. 간단하고 쉬운 절차이지만 불안한 마음에 다른 사람들은 어떻게 했는지 확인하게 됩니다. 구글 애드센스 계좌 등록 방법 간단한 절차이니 이미지만 훑어 보시면 될 것 같습니다. TIP 참고 : 처음 계좌를 등록하는 방법과 새 계좌 추가 방법은 동일합니다. 1. 구글 애드센스 홈으로 접속해 왼쪽 메뉴 중 "결제 정보"를 클릭 후 우측에 보이는 "결제 수단 관리"를 선택해 줍니다. 2. 그리고 "결제 수단 관리"를 선택합니다. 3. "새 은행 송금 세부정보 추가"를 선택합니다. 4. 아래 이미지를 보고 빈칸에 세부 정보를 기입합니다. 입력할 곳은 붉은색으로 표시한 5곳입니다. 첫 번째 수취인 ID는 선택사항으로 입력하지 않습니다. 예금주 영문 이름 영문 은행명 은행 식별 코드(SWIFT) 계좌 번호 계좌 번호 재입력 기본 지급 수단으로 설정 "체크" 저장 버튼 클릭 영문 은행명과 은행 식별 코드(SWIFT)는 각 은행 홈페이지 또는 구글 검색으로 확인합니다. 영문 은행명과 식별…

2023-02-02
구글 블로그 제목 태그

구글 블로거 포스팅 제목 태그 h1로 수정하기

구글 블로거 포스팅 제목 태그를 h1로 수정하고 블로그 제목은 메인 홈에서는 h1태그 유지 포스팅이 있는 페이지에서는 div태그로 변경합니다. TIP 아래 설명은 블로거 테마에 따라 다를 수 있으며 해당 내용은 기본 테마 중 "Essential"를 기준으로 작성되었습니다. 블로거에서 제공하는 기본 테마(구형제외)들은 거의 대동소이하니 참고하시길 바랍니다. 구글 블로거 포스팅 제목 태그 포스팅 제목 태그부터 수정해 보도록 하겠습니다. 관리자 페이지로 접속해 메뉴 중 "테마"를 선택합니다. 그리고 "맞춤설정"을 클릭 후 "백업"부터 하고 아래 "HTML편집"을 선택해 줍니다. "HTML편집" 페이지로 이동되면 단축키 "Control + F"키를 누른 후 post-title entry-title를 입력해 찾아줍니다. 대략 줄번호 3866번째 줄에 있으니 참고하세요. 아래 원본 코드를 다음 코드로 수정합니다. <h3 class='post-title entry-title'> <!-- 중략 --> </h3> 수정할 코드 <b:tag expr:name='data:view.isSingleItem ? "h1" : "h3"' class='post-title entry-title'> <!-- 중략 --> </b:tag> 최종적으로 변경된 코드는 아래 이미지와 같습니다. 구글 블로거 블로그 제목 태그 블로그 제목 태그도 수정하도록 하겠습니다. 블로그 제목 태그는 홈(메인) 페이지에서는 h1태그를 그대로 유지하고 포스팅이 있는 페이지에서만 div태그로 변경해 h1태그가 2개가(중복) 되는 것을…

2023-01-10
갤럭시 버즈 맥북 연결 방법

갤럭시 버즈 맥북 연결 방법(버즈 인식 페어링)

갤럭시 버즈 맥북 연결 방법, 맥북과 삼성 갤럭시 버즈 연결 방법으로 충전기 뚜껑을 닫았다 열여는 방법으로 인식이 되었는데 맥OS 업데이트 후 이 인식이 되지 않아 새로운 방법을 찾았습니다. 갤럭시 버즈 맥북 연결 맥북 시스템 환경 설정을 열고 블루투스를 선택 후 갤럭시 버즈를 양쪽 귀에 끼고 3초간 누르고 있으면 맥북 블루투스 설정 화면에 갤럭시 버즈가 인식된 걸 확인할 수 있습니다. 맥북 시스템 환경설정 갤럭시 버즈 인식 맥북 시스템 환경 설정 열기블루투스 선택버즈를 3초간 누름(양쪽 귀에 낀 상태)버즈 인식 후 연결

2022-10-05
깃허브 계정 만들기

깃허브 계정 만들기 회원 가입하기

깃허브 계정 만들기, 깃허브 계정은 이메일 주소만 있으면 쉽게 가입 후 계정을 만들 수 있습니다. 깃허브 가입 과정을 나열해 보았습니다. 깃허브 계정 만들기 깃허브 홈페이지로 접속 후 상단에 "Sign up" 버튼 선택합니다. 로그인 계정으로 사용할 이메일 입력 후 "Contiuue" 버튼을 클릭 후 비번과 유저명 등을 순서대로 입력합니다. TIP 깃허브 페이지로 블로그를 개설할 예정이라면 사용자 이름(username)이 블로그 주소가 되니 이점을 고려해 사용자 이름을 정하세요! 공지사항 및 업데이트 사항 수신 여부에 "y" 또는 "n"를 입력합니다. 확인을 클릭합니다. 이미지 중 "나선은하를 고르십시오"에서 붉은색으로 표시된 나선은하를 선택해 줍니다. 이 질문은 항상 동일한 것 같습니다. 완료가 되면 하단 "Create account" 버튼을 클릭합니다. 몇 가지 설문에 대해 답변 후 계속 진행합니다. 특별한 의미는 없으니 대충 해도 됩니다. 저는 개인적으로 사용할 거라 무료 버전을 선택했습니다. 마지막으로 이메일로 이동해 확인 코드를 확인 후 입력해 줍니다. 깃허브 가입이 끝났으니 프로필 설정을 하거나 새로운 저장소 또는 깃허브 페이지를 이용한 블로그를 만들 수 있습니다.

2022-09-19
구글 검색 결과 새창에서 열기

구글 검색 결과 새창에서 열기 설정(크롬, 엣지, 웨일, 사파리, 파이어폭스 등)

구글 검색 결과 새창에서 열기, 구글은 검색 후 검색 결과를 클릭하면 현재 창에서 열리게 되어 있어 다시 검색 결과를 보려면 뒤로 가기를 해야 하는 불편함이 있습니다. TIP 구글 크롬 브라우저를 비롯해 엣지, 웨일, 파이어폭스, 사파리 등 모든 브라우저의 설정 방법이 동일하게 합니다. 구글 검색 결과 새창에서 열기 우선 구글로 접속합니다. 구글 : https://www.google.com/ 브라우저 하단에 "설정"을 클릭 후 "검색 설정"을 선택합니다. 위에 링크된 주소로 접속해야 하단에 설정 링크가 보입니다. 또는 검색 페이지 오른쪽 톱니바퀴 모양 아이콘을 클릭 후 빠른 설정에서 "모든 설정 보기"를 선택해도 됩니다. 검색 설정 페이지에서 스크롤을 밑으로 내려 "검색 결과 여는 창"을 찾아 "선택한 검색 결과를 새 브라우저 창에서 열기" 앞에 체크를 해줍니다. 그리고 마지막으로 저장 버튼을 클릭합니다.

2022-09-19
워드프레스 재사용 가능 블록

워드프레스 재사용 가능 블록(서식 관리)

워드프레스 재사용 가능 블록, 티스토리에서는 서식 관리라고 하죠. 반복적으로 사용하는 것을 서식 화해서 필요할 때 불러와 사용할 수 있어 편리한데요. 간략하게 "재사용 가능 블록" 사용 방법을 알아보겠습니다. TIP 워드프레스는 각 문단을 비롯해 테이블, 리스트, 이미지 등 각각이 하나에 블록단위로 이루어진 블록들의 집합이라고 생각하시면 이해가 편할 것 같습니다. 워드프레스 재사용 가능 블록 티스토리는 관리자 페이지 메뉴에 "서식 관리"가 있지만 워드프레스는 관리자 페이지에 "재사용 가능 블록"으로 접속할 수 있는 링크가 별도로 있지 않습니다. "재사용 가능 블록" 페이지로 접속하려면 본문 글 쓰기 에디터에서 이동하는 방법과 아래 주소를 이용해 바로 접속하는 방법이 있습니다. 재사용 가능 블록 바로가기 주소 https://도메인주소/wp-admin/edit.php?post_type=wp_block 본문 글 쓰기 에디터에서 이동하려면 상단 메뉴 오른쪽 끝에 옵션 아이콘을 클릭 후 "재사용 가능한 블록 관리"를 클릭하면 바로 이동됩니다. "재사용 가능 블록" 관리 페이지로 이동되면 상단에 "새로 추가" 버튼을 클릭해 재사용 블록을 추가할 수 있습니다. "재사용 가능 블록"은 본문 글 작성 중에도 추가할 수 있는데요. 해당 블록을 클릭하며 상단에 메뉴 바가 나타나는데요 오른쪽 끝…

2022-09-19