범상치 않은 블로그

특정 iframe 을 선택할 때, src 속성의 특정 부분을 기준으로 선택하고자 할 때 URL의 고유한 식별자 부분을 제외한 방식으로 적용하려면, 속성 선택자를 활용할 수 있습니다. src URL에 포함된 다른 고유한 부분을 사용하거나, 더 일반적으로 title 속성을 기준으로 선택할 수 있어요. 방법 1: src 속성에서 특정 부분만 이용해 선택…

블로그 글을 작성할 때, 이미지를 올바르게 처리하는 것이 중요한데요~ 특히, 이미지가 제대로 표시되도록 돕고, 검색 엔진이 이미지를 인식할 수 있도록 alt 속성을 추가하는 것은 필수랍니다. 하지만 매번 이미지마다 alt 속성을 수동으로 추가하는 것은 번거로운 일이 될 수 있어요, 특히 사진을 정말 많이 올리는 경우, 대체 속성을 입력하는 게 여간 번…

자바스크립트에서 \x62\x6F\x64\x79 는 ASCII 코드에 해당하는 16진수 값으로 해석되어 문자로 변환합니다. 😊 이 코드는 각각의 16진수 값이 해당하는 문자로 변환되는 방식인데요, 구체적으로 살펴보면 다음과 같습니다. 16진수 변환 \x62 는 ASCII 코드 98에 해당하며, 이는 문자 'b' 로 변환됩니다. \x6F 는 …

Regex를 사용하여 html 태그를 정리하려고 하는데요, 예시는 span 태그를 기준으로 안내해 드리려고 해요. 일부 span 태그가 정리가 이상하게 되어 확인을 해보았더니, replace 코드에서 <span><span></span></span> 과 같은 중첩된 태그의 처리가 제대로 되지 않는 부분을 발견하였…

다음의 오류가 발생하였는데요, 해결하는 방법은 HTML 편집하기로 이동한 다음, 해당 값을 변경하는 것이랍니다. <meta name="apple-mobile-web-app-capable" content="yes"> is deprecated. Please include <meta name="mo…

구글 블로그에서 글머리 기호 정렬을 조정하는 방법을 공유합니다. 블로그 글을 작성할 때, 리스트의 글머리 기호가 기본적으로 40px 뒤로 밀려 있어 가독성이 떨어질 수 있습니다. 이를 해결하기 위해서는 간단한 CSS 코드 수정을 통해 글머리 기호의 위치를 조정할 수 있습니다. 아래와 같이 CSS 코드를 추가하세요~ .post-body > ul { …

자바스크립트에서 document.execCommand() 가 재귀적으로 호출되는 문제가 발생하였는데요, 의외로 원인이 CSS에 있음을 발견하였습니다. <style> 태그에 있는 특수문자 내용을 CDATA 내에 그대로 복사하면서 발생하였답니다. 즉,  &#39; (어포스트로피)와 같은 HTML 엔티티를 그대로 CDATA 내에 복사하였더…

HTML 특수문자 코드에 대한 설명을 드릴게요~ 제목에서 안내해드린 문자는요, 웹에서 특정 기호를 표시하기 위해 사용하는데요! HTML에서는 기본적으로 일부 문자들을 특정 코드로 변환해야 정상적으로 표시가 되기 때문입니다. &nbsp; : 공백(스페이스 한 칸)을 의미합니다. &lt; : 부등호 < 를 의미합니다. &gt; …

구글 블로그 테마 theme by 없애는 방법을 알아보겠습니다. 1단계: 코드 접근하기 구글 블로그의 테마를 수정하려면 블로그 관리 대시보드에 로그인 한 후 다음 경로로 이동해 주세요. 대시보드 → 테마 → HTML 편집기로 들어갑니다. 여기에서 블로그의 HTML 및 CSS 코드를 편집할 수 있어요. 2단계: eval() 함수 찾기 대부분의 theme b…

C#에서 Code Prettier를 진행하려고 하는데요, 튜플과 정규 표현식을 사용하여 진행해 보기로 하였습니다. 다음의 예시 코드를 참고해 주세요. 프레임워크에 따라 튜플이 지원이 안 되는 경우가 있으니, 경우에 따라 클래스나 스트럭쳐를 고려해 보세요. public void SetCodePrettier() { try { I…

자바스크립트 소스에서 중단점이 안 되는 것 같을 때, 브레이크포인트에서 스코프를 보면, 실제로 잡혀있을 수도 있습니다. 이때에는 코드 최적화 덕분에 중단점이 상단에서 잡히는 경우가 있는데요~ 디버깅을 하다 보면 브레이크포인트가 제대로 작동하지 않는 경우가 종종 있는데요, 이럴 때 'pretty print' 기능을 사용하면 큰 도움이 돼요. …

웹 페이지에서 글을 복사할 때 출처 요청 차원에서 토스트 메시지를 추가하였습니다. 토스트처럼 보이도록 클래스를 추가하고 3초(3000) 뒤에 다시 클래스를 빼도록 하는 자바스크립트를 추가합니다. //토스트 let beomToastMessage = document.getElementById(&#39;beom_toast_message&#39…

하위 노드 선택 //*[@class='class-name'] 아래의 모든 하위 노드를 선택하려면, 해당 XPath에서 하위 노드를 포함하는 경로를 작성해야 합니다. 모든 하위 노드를 선택하려면 //* 을 추가해 주면 됩니다. 따라서 하위 노드를 선택하는 XPath는 다음과 같습니다. //*[@class='class-name'…

이번 주제는 시맨틱 태그(semantic tag)와 SEO 테마입니다. 시맨틱 태그 시맨틱(semantic)은 관계 및 연관(relation)과 의미론(meaning)을 뜻하는 단어 입니다. 한 마디로 시맨틱 태그는 HTML 태그 중 해당 태그를 어떠한 의미로 사용한 건지 웹 브라우저에 명확하게 알리는 역할을 합니다. 예를 들면, 모든 엘리먼트가 div …

/* 과 / 는 모두 XPath에서 경로를 지정할 때 사용하는 구분자이지만, 그 사용 용도가 조금 다릅니다. 1. / (슬래시) / 는 루트부터 시작하는 절대 경로를 지정하는 데 사용됩니다. 예를 들어, /html/body 는 html 태그 아래의 body 태그를 의미합니다. 상위 노드에서 직접 지정하는 경로로 사용되며, 루트(문서…

org.xml.sax.SAXParseException; lineNumber: 0; columnNumber: 0; The element type "link" must be terminated by the matching end-tag "</link>". 이와 같은 오류는 구글 블로그 테마를 편집하는 경우에 보실…

자바스크립트에서 모바일 여부를 체크하는 간단한 함수를 안내해 드리겠습니다. 함수를 호출하여 true인 경우, 모바일 환경으로 간주하여 설정하시면 된답니다. 사이드, 내비게이션 등 모바일과 데스크탑 환경에서 별도로 설정이 필요한 경우에 유용하게 활용할 수 있을 것입니다. <script> function isMobile() { return…

background나 background-color 모두 색상을 설정할 수 있는 것으로 보입니다. 그렇다면 두 속성 간의 차이가 무엇인가에 대해 궁금증이 있는 분이 계실 것입니다. 어떤 부분에서 차이가 있는지 간략히 확인해 봅시다. 차이점을 한 마디로 정의하면 background 속성은 백그라운드에 관한 모든 속성을 한 번에 설정할 수 있도록 지원하고,…

$(Element).fadeOut(); 함수를 사용하려고 하는데 오류가 발생하셨나요? 아마 웹페이지에서 jQuery를 사용하지 않을 가능성이 높습니다. 순수 자바스크립트만으로 페이드아웃을 구현하려면 다음과 같이 스크립트를 추가해 주세요. 기호에 따라 가공하시면 된답니다. [JavaScript] fadeOut without jQuery 페이드아웃 함수를 …

구글 블로그 테마를 수정하다 보면, 알 수 없는 스크립트가 보이기도 합니다. 해당 코드는 언패킹을 통해 해석할 수 있답니다. 패킹 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\…