라벨이 인 게시물 표시

background vs background-color 차이가 무엇인가요?

background나 background-color 모두 색상을 설정할 수 있는 것으로 보입니다. 그렇다면 두 속성 간의 차이가 무엇인가에 대해 궁금증이 있는 분이 계실 것입니다. 어떤 부분에서 차이가 있는지 간략히 확인해 봅시다. 차이점을 한 마디로 정의하면 background 속성은 백그라운드에 관한 모든 속성을 한 번에 설정할 수 있도록 지원하고, background-color 속성은 백그라운드 중에서도 색상 설정에 관한 기능만을 제공한다는 것입니다. 그리하여 둘 다 컬러를 설정할 수 있는 부분에서 비슷하거나 똑같은 것으로 착각하는 경우가 있는 것입니다. background-color 백그라운드 컬러를 특정한 색상, 헥스, RGB, 또는 HSL을 표기하는 것을 통해 지정할 수 있습니다. brown과 같이 알려진 색상 명칭으로 설정하는 방법 #000과 같이 헥스로 설정하는 방법 RGB(r, g, b)로 설정하는 방법 => 빨간색(red), 초록색(green), 파란색(blue) 삼원색으로 설정하는 방법입니다. RGB는 각각 0부터 255 사이의 정수 HLS(h, l, s)로 설정하는 방법 => 색상(hue), 채도(saturation), 명도(lightness)로 설정하는 방법입니다. 색상은 0부터 360까지 색상환 기준으로 설정하며, 채도와 명도는 각각 0%부터 100%로 표기합니다. RGB와 HLS는 알파를 추가로 설정할 수 있는 함수를 제공합니다. 각각 RGBA, HLSA background-color: brown; background-color: #000; background-color: rgb(255, 128, 128); background-color: hsl(50, 40%, 30%); background 백그라운드 속성은 백그라운드 컬러를 포함한 모든 관련 속성을 한 번에 설정할 수 있도록 지원합니다. 속성에는 색상, 이미지, 원점, 크기 또는 반복 방법과 같은 값이 있습니다. 다음과 같이 컬러 속성을 단독

[JavaScript] fadeOut without jQuery 추가하는 방법

$(Element).fadeOut(); 함수를 사용하려고 하는데 오류가 발생하셨나요? 아마 웹페이지에서 jQuery를 사용하지 않을 가능성이 높습니다. 순수 자바스크립트만으로 페이드아웃을 구현하려면 다음과 같이 스크립트를 추가해 주세요. 기호에 따라 가공하시면 된답니다. [JavaScript] fadeOut without jQuery 페이드아웃 함수를 추가합니다. 레벨 변수는 1로 주었으며 -0.1씩 10회에 걸쳐 페이드아웃을 진행할 예정입니다. 타이머 인터벌은 100으로 하겠습니다. function fadeOut(target) { var level = 1; var outTimer = null; outTimer = setInterval( function() { level = fadeOutAction(target, level, outTimer); }, 100); } 인터벌마다 진행하는 페이드아웃액션 함수입니다. changeOpacity 함수를 호출하여 점점 흐려지도록 하겠습니다. 그리고 투명도가 마이너스에 도달하면 스타일 none을 추가하겠습니다. opacity만 -인 값을 가지고 있으면, 개체가 계속 남아있어서 해당 부분에 대한 클릭이 잘 안 되는 현상이 있어서 추가했습니다. function fadeOutAction(target, level, outTimer) { level = level - 0.1; changeOpacity(target, level); if(level < 0) { target.style.display = 'none'; clearInterval(outTimer); } return level; } opacity와 filter를 레벨*100 만큼 알파값으로 합니다. 투명도가 점점 높아져서 타이머가 다 되면 안 보이게 됩니다. function changeOpacity(t

구글 블로그 테마 스크립트 해석하기 (패킹과 언패킹)

이미지
구글 블로그 테마를 수정하다 보면, 알 수 없는 스크립트가 보이기도 합니다. 해당 코드는 언패킹을 통해 해석할 수 있답니다. 패킹 var _0x35d7=["\x24\x28\x64\x6F\x63\x75\x6D\x65\x6E\x74\x29\x2E\x72\x65\x61\x64\x79\x28\x33\x28\x29\x7B\x34\x20\x31\x3D\x30\x3B\x24\x28\x77\x69\x6E\x64\x6F\x77\x29\x2E\x73\x63\x72\x6F\x6C\x6C\x28\x33\x28\x29\x7B\x34\x20\x32\x3D\x24\x28\x74\x68\x69\x73\x29\x2E\x73\x63\x72\x6F\x6C\x6C\x54\x6F\x70\x28\x29\x3B\x69\x66\x28\x32\x3E\x31\x29\x7B\x24\x28\x27\x2E\x35\x27\x29\x2E\x36\x28\x27\x37\x27\x29\x2E\x38\x28\x27\x39\x27\x29\x7D\x65\x6C\x73\x65\x7B\x24\x28\x27\x2E\x35\x27\x29\x2E\x36\x28\x27\x39\x27\x29\x2E\x38\x28\x27\x37\x27\x29\x7D\x31\x3D\x32\x7D\x29\x7D\x29\x3B","\x7C","\x73\x70\x6C\x69\x74","\x7C\x6F\x73\x74\x7C\x63\x4F\x73\x74\x7C\x66\x75\x6E\x63\x74\x69\x6F\x6E\x7C\x76\x61\x72\x7C\x74\x6F\x70\x62\x61\x72\x7C\x61\x64\x64\x43\x6C\x61\x73\x73\x7C\x66\x69\x78\x65\x64\x32\x33\x7C\x72\x65\x6D\x6F\x76\x65\x43\x6C\x61\x73\x73\x7C\x64\x65\x66\x61\x75\x6C\x74\x32\x33","\x72\x

구글 블로그 내 페이지뷰 계산 제외하기

이미지
구글 블로그 통계는 기본적으로 내 페이지뷰가 계산됩니다. 그리하여 테스트 용도, 또는 필요에 의해 나의 글을 보았을 때도 페이지뷰가 계산되는 현상이 있답니다. 내 페이지뷰를 제외하고 통계를 확인하고 싶을 때 조치하는 방법에 대해 안내해 드리겠습니다.

티스토리 페이지가 작동하지 않습니다. 문제가 계속되면 사이트 소유자에게 문의하세요. HTTP ERROR 400 해결 방법, 인터넷 사용 기록 삭제

이미지
HTTP ERROR 400 해결하기 티스토리를 이용할 때, 로그인 상태를 유지한 상태에서 즐겨찾기로 이동하다 보면 간혹 발생하는 현상이 있습니다. 해당 현상은 티스토리에 접속이 불가하며 "페이지가 작동하지 않습니다. 문제가 계속되면 사이트 소유자에게 문의하세요."라는 메시지를 표시해 드립니다. 또한, 오류코드는 400과 더불어 "HTTP ERROR 400"이라는 문구가 아래에 위치합니다. 오류코드 400 Bad Request는 티스토리 서버에서 클라이언트의 오류를 감지하여 요청을 처리하지 않는 상태를 뜻합니다. 보통 클라이언트의 쿠키와 관련하여 접속이 되지 않는 경우가 많습니다. 다음을 따라해 보시면 웬만하면 해결이 가능할 것입니다. 저는 3번 정도 해당 현상이 발생했는데 모두 이 방법으로 처리를 완료하였습니다. 먼저 크롬 맞춤설정 및 제어로 이동합니다. 해당 기능은 보통 크롬 브라우저 오른쪽 위에 있습니다. 그리고 설정 화면으로 이동합니다. 설정에 보면 개인 정보 보호 및 보안 탭이 있으니 선택하여 이동해 주세요. 이제 인터넷 사용 기록 살제를 클릭한 다음에 쿠키 및 기타 사이트 데이터를 선택하고 인터넷 사용 기록 삭제를 진행해 주세요. 다음과 같이 바로 방문기록에 들어가서 삭제하는 방법도 있습니다. 맞춤 설정 및 제어 => 방문기록(단축키 Ctrl + H) => 인터넷 사용 기록 삭제 => 쿠키 및 기타 사이트 데이터 인터넷 사용 기록 삭제 그리고 다시 티스토리로 이동하면 로그인이 해제되어 있을 텐데 다시 한 번 로그인 하면 정상적으로 계속 이용할 수 있습니다.

구글 서치콘솔 티스토리 색인 누락 확인 및 색인 생성 요청, 설정하기

이미지
구글 서치 콘솔에서 티스토리 블로그 게시물의 누락을 확인하는 방법에 대해 알아보도록 합시다. 누락된 글은 색인 생성을 요청하도록 설정해보겠습니다. 구글 서치콘솔 티스토리 색인 누락 확인 및 색인 생성 요청, 설정하기 티스토리 오픈 API 앱 등록하기 티스토리 게시물 가져오기 구글 서치콘솔 색인이 생성된 페이지 내보내기 티스토리, 서치콘솔 비교 파일 생성하기 티스토리 구글 인덱스 비교 구글 URL 등록여부 확인, 색인 생성하기 구글 서치콘솔 티스토리 색인 누락 확인 및 색인 생성 요청, 설정하기 구글 서치콘솔에서 내 티스토리에 있는 게시물 중에 얼마나 많은 글이 누락되어 있을까요? 색인 누락을 확인하여 색인 생성을 요청하도록 해보는 프로그램입니다. 이름은 범스토리로 정하였습니다. 게시물 발행 즉시 서치콘솔을 등록하는 부지런한 분은 그렇게 많이 안 나올 것입니다. 저처럼 게시물을 예약한 다음에 구글에서 알아서 하겠거니 하고 방치하는 분은 생각보다 꽤 많이 나올 수도 있을 것입니다. 오래된 글도 기다리면 언젠가 색인이 생성될 수 있으나, 구글의 색인 생성 정책은 무조건 오래된 글부터 수집하는 것이 아니기에 어떠한 글은 색인 생성이 영원히 누락될 가능성도 있을 것으로 보입니다. 이 부분은 제 추측이며 6개월 전에 작성한 글이 아직도 색인이 생성되어 있지 않아서 그렇게 생각해 보았습니다. 범스토리 프로그램의 흐름은 다음과 같습니다. 티스토리에 게시된 나의 게시물을 수집하여 텍스트 파일로 저장하기 구글 서치콘솔에서 최종 크롤링된 데이터 테이블을 확인하여 색인이 생성되어 있는 목록 가져오기 티스토리 게시물과 서치콘솔 색인 생성 목록을 비교하여 색인이 안 되어 있는 티스토리 게시물 추출하기 티스토리 오픈 API 앱 등록하기 먼저 티스토리에 등록되어 있는 나의 게시물 목록을 가져오겠습니다. 티스토리 오픈 API를 사용하면, 시크릿 키를 공개하지 말라고 하는데, 목록을 가져오려면 해당 부분이 필요하기에 여러분은 각자의 앱을 등록하셔야 합니다. 다른 방법이

JavaScript 소수점 반올림 하는 방법

이미지
JavaScript에서 소수점 반올림을 지원하는 함수는 toFixed 가 있습니다. toFixed 구문 안내 toFixed 함수의 매개변수는 소수점 뒤에 나타날 자릿수를 0 이상, 20 이하의 값으로 설정합니다. 값을 지정하지 않으면 0을 사용합니다. 소수점 이하가 길면 숫자를 반올림하고, 짧으면 0으로 채우기 때문에 필요시 소수점 이하 0은 제외할 수 있도록 보완작업을 진행하여야 합니다. toFixed 함수 다음의 예제는 12.3454라는 숫자에 대해 3, 4를 각각 매개변수로 toFixed 함수를 호출해 보았습니다. 소수점 3자리까지 하면 12.345가 나오고, 4자리까지 하면 12.3455가 나옵니다. <script> let num = 12.34546; let numToFixed3 = Number(num.toFixed(3).toString().replace(/\.00$/, '')); let numToFixed4 = Number(num.toFixed(4).toString().replace(/\.00$/, '')); console.log(`numToFixed3 : ${numToFixed3}`); console.log(`numToFixed4 : ${numToFixed4}`); </script> //numToFixed3 : 12.345 //numToFixed4 : 12.3455

[JavaScript] 윤년 체크하기, 윤달~

이미지
윤년 1년은 365일로 약속을 하였으나, 달력의 계산에는 오차가 있을 수밖에 없습니다. 이러한 역법의 오차를 보정하기 위해 사용하는 한 가지 방법이 윤년을 체크하는 것입니다. 보통은 2월이 28일까지 있는데, 윤년 또는 윤달이 있는 경우에 2월 29일까지 발생하는 이유가 이 때문입니다. 윤년 체크하기 해당하는 연도가 윤년 또는 윤달인지 여부를 확인하는 방법은 다음과 같으며 하나라도 조건을 만족하면 됩니다. 해당연도가 4로 나누어 떨어지면서, 100으로 나누어 떨어지지는 않는 경우 해당연도가 400으로 나누어 떨어지는 경우 if( (year % 4 == 0 && year % 100 != 0) || year % 400 == 0 ) { //todo } 윤년, 윤달을 가정한 생년월일 체크 예시 birth는 생년월일 8자리 매개변수이고, getDate는 현재 일자 매개변수입니다. function validateBirth(birth, getDate) { var year = parseInt(birth.substr(0, 4)); var month = parseInt(birth.substr(4, 2)); var day = parseInt(birth.substr(6, 2)); var getYear = getDate.getFullYear(); var getMonth = getDate.getMonth() + 1; var getDay = getDate.getDate(); if (birth.length == 8) { if (month < 1 || month > 12) { return "생월을 확인해 주세요. 1~12월 사이여야 합니다. " + month; } else if (day < 1 || day > 31) { return "생일을 확인해 주세요. 1~31일 사이여

[JavaScript] 하이픈 제거하기 방법

이미지
JavaScript에서 달력과 같은 값에서 반환되는 하이픈을 제거하고 싶습니다. 어떻게 해야 할까요? 크게 2가지 방법을 안내해 드리겠습니다. 정규식으로 하이픈 제거하기 우선, 정규식으로 하이픈을 제거하는 방법에 대해 안내해 드리겠습니다. 아래의 예제 코드에서는 replace() 메서드와 정규식 /-/g를 사용하여 하이픈을 전역으로 제거하는 것을 보여드리고 있습니다. /-/g는 하이픈을 찾아내는 정규식이고, g 플래그는 전역(global) 검색을 의미합니다. 결과적으로 "2023-03-01"는 "20230301"과 같이 변환이 됩니다. <script> const originalDate = "2023-03-01"; const transformedDate = originalDate.replace(/-/g, ''); //20230301 alert(transformedDate); </script> replaceAll 메서드로 하이픈 치환하기 정규식 /-/g 대신에 replaceAll() 메서드를 사용하여 하이픈을 치환할 수도 있습니다. replaceAll() 메서드는 일치하는 모든 문자를 찾아 새로운 값으로 치환합니다. replaceAll()을 사용한 예제 코드는 다음과 같습니다. <script> const originalDate = "2023-03-01"; const transformedDate = originalDate.replaceAll('-', ''); //20230301 alert(transformedDate); </script>

[CSS] 리스트 태그 꾸미기, 체크 표시하기

이미지
CSS에서 리스트 태그를 꾸미는 방법에 대한 안내입니다. 체크 표시를 추가할 수 있습니다. <head> <style> li { list-style-type: none; padding-left: 25px; line-height: 1.5; } li::before { content: ''; display: inline-block; width: 18px; height: 18px; border-radius: 50%; background-color: #3CB371; margin-right: 5px; vertical-align: middle; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.75 16.75L4 12l1.41-1.41L8.75 14.59 18.34 5l1.41 1.41L8.75 16.75z" fill="white"/></svg>'); background-size: 70%; background-repeat: no-repeat; background-position: center bottom 2px; } </style> </head> <body> <ul> <li>안녕하세요</li> <li>범상입니다</li> </ul> </body>

[CSS] 노란 버튼, 말풍선 SVG 예제 자료

이미지
CSS에서 노란 버튼과 말풍선 안에 SVG를 사용한 예제 자료입니다. <head> <style> .button { display: inline-block; background-color: yellow; color: #000; padding: 10px 20px; text-align: center; text-decoration: none; font-size: 24px; border: none; border-radius: 4px; cursor: pointer; } .button::before { content: ""; display: inline-block; vertical-align: middle; width: 1em; height: 1em; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M0 4C0 1.79086 1.79086 0 4 0H12C14.2091 0 16 1.79086 16 4V8C16 10.2091 14.2091 12 12 12H8L5.33333 15.3333L5.33333 12H4C1.79086 12 0 10.2091 0 8V4Z"/></svg>'); } .button:hover { background-color: #ffcc00; } </style> </head> <body> <button class="button">안녕하세요, 범상입니다.</

access_token \uc774 \uc720\ud6a8\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.

이미지
티스토리 API 사용 중에 access_token \uc774 \uc720\ud6a8\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. 오류가 발생하였나요? {"tistory":{"status":"400","error_message":"access_token \uc774 \uc720\ud6a8\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. []"}} access_token 이 유효하지 않습니다. 부분을 유니코드로 표현한 것입니다. 티스토리 API에서 access_token은 다음의 과정으로 발급 요청할 수 있습니다. "인증 요청 및 코드 발급"으로 인증절차 진행 (URL => https://www.tistory.com/oauth/authorize) 리디렉션 처리 이후 획득한 인증 코드(authorization code)에 대하여, GET https://www.tistory.com/oauth/access_token URL을 을 통해 액세스 토큰 발급 요청 GET https://www.tistory.com/oauth/access_token? client_id={client-id} &client_secret={client-secret} &redirect_uri={redirect-uri} &code={code} &grant_type=authorization_code

HTML hyperlink target=_blank, 블로그 하이퍼링크 새 탭에서 열기

이미지
https://beomsang.com/ 블로그와 같은 웹 페이지에서 상기와 같이 하이퍼링크를 추가할 때, 현재의 페이지를 그대로 유지하면서 새로운 창을 띄워서 보여드리는 기능을 소개해 드리려 합니다! 링크를 수정한 다음 좌측에서 [HTML 보기]를 선택합니다. <p> 는 문단(paragraph)을 뜻하며 맨 뒤에 닫는다는 뜻으로 </p> 가 있습니다. <a> 는 연결고리(anchor) 를 뜻합니다. 마찬가지로 닫는 표시 </a> 가 따라옵니다. <a> 내부의 href 는 hypertext reference 를 뜻합니다. 큰따옴표(double quotation mark) 로 감싼 부분은 링크 내역을 뜻합니다. 또한 <a> 와 </a> 사이에 있는 검은 글씨는 실제로 사용자가 보는 문장입니다. <a> 내부에 target="_blank" 을 입력해 줍니다. 좌측에서 [HTML 보기]를 선택했던 것을 다시 [새 글 작성보기] 로 변경해 줍니다. 최근에 알게 된 사실인데, 굳이 위의 방법을 할 필요는 없고 😭 링크를 클릭한 다음, '링크 수정', '고급', '새 창에서 링크 열기'를 선택해 주세요. 위의 번거로운 과정을 생략하고 바로 등록할 수 있답니다. 물론 태그를 통한 작성이 손쉬운 사람은 위와 같이 진행하여도 무방합니다.