라벨이 웹개발인 게시물 표시

[C#] 구글 블로그에서 이미지 태그에 alt 속성 추가 일괄 처리 하는 방법

블로그 글을 작성할 때, 이미지를 올바르게 처리하는 것이 중요한데요~ 특히, 이미지가 제대로 표시되도록 돕고, 검색 엔진이 이미지를 인식할 수 있도록 alt 속성을 추가하는 것은 필수랍니다. 하지만 매번 이미지마다 alt 속성을 수동으로 추가하는 것은 번거로운 일…
[C#] 구글 블로그에서 이미지 태그에 alt 속성 추가 일괄 처리 하는 방법

자바스크립트에서 \x62\x6F\x64\x79 를 body 로 해석하는 것은 ASCII 코드와 16진수 값을 확인하세요~

자바스크립트에서 \x62\x6F\x64\x79 는 ASCII 코드에 해당하는 16진수 값으로 해석되어 문자로 변환합니다. 😊 이 코드는 각각의 16진수 값이 해당하는 문자로 변환되는 방식인데요, 구체적으로 살펴보면 다음과 같습니다. 16진수 변환 \x62 는 ASC…
자바스크립트에서 \x62\x6F\x64\x79 를 body 로 해석하는 것은 ASCII 코드와 16진수 값을 확인하세요~

[C#] Regex, HTML 태그 정리할 때에 일부 태그가 정리 안 되는 현상 수정 방법

Regex를 사용하여 html 태그를 정리하려고 하는데요, 예시는 span 태그를 기준으로 안내해 드리려고 해요. 일부 span 태그가 정리가 이상하게 되어 확인을 해보았더니, replace 코드에서 <span><span></span>…
[C#] Regex, HTML 태그 정리할 때에 일부 태그가 정리 안 되는 현상 수정 방법

apple-mobile-web-app-capable is deprecated. Please include mobile-web-app-capable

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

구글 블로그 글머리 기호 정렬 추가하기 .post-body > ul { padding-inline-start: 0px; }

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

We don't execute document.execCommand() this time, because it is called recursively. 해결하는 방법. 의외로 CSS에 문제가 있었어요.

자바스크립트에서 document.execCommand() 가 재귀적으로 호출되는 문제가 발생하였는데요, 의외로 원인이 CSS에 있음을 발견하였습니다. <style> 태그에 있는 특수문자 내용을 CDATA 내에 그대로 복사하면서 발생하였답니다. 즉,  &a…
We don't execute document.execCommand() this time, because it is called recursively. 해결하는 방법. 의외로 CSS에 문제가 있었어요.

&nbsp; &amp; &lt; &gt; &quot;의 뜻

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

구글 블로그 테마 theme by 없애는 방법

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

C# Code Prettier. 튜플과 정규 표현식으로 하기.

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

자바스크립트 소스에서 중단점이 안 되는 것 같을 때, pretty print

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

웹 토스트 메시지 추가하기

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

XPath 하위 노드, 직계 하위 노드 선택 방법

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

블로그 Semantic Tag 알아보기, 그리고 SEO에 맞는 블로그 테마 구조는 무엇인가요?

이번 주제는 시맨틱 태그(semantic tag)와 SEO 테마입니다. 시맨틱 태그 시맨틱(semantic)은 관계 및 연관(relation)과 의미론(meaning)을 뜻하는 단어 입니다. 한 마디로 시맨틱 태그는 HTML 태그 중 해당 태그를 어떠한 의미로 사용한…
블로그 Semantic Tag 알아보기, 그리고 SEO에 맞는 블로그 테마 구조는 무엇인가요?

XPath / /* 차이

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

org.xml.sax.SAXParseException; lineNumber: 0; columnNumber: 0; The element type 'link' must be terminated by the matching end-tag '</link>'.

org.xml.sax.SAXParseException; lineNumber: 0; columnNumber: 0; The element type "link" must be terminated by the matching end-tag "<…
org.xml.sax.SAXParseException; lineNumber: 0; columnNumber: 0; The element type 'link' must be terminated by the matching end-tag '</link>'.

[JavaScript] 모바일 여부 체크하기

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

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

background나 background-color 모두 색상을 설정할 수 있는 것으로 보입니다. 그렇다면 두 속성 간의 차이가 무엇인가에 대해 궁금증이 있는 분이 계실 것입니다. 어떤 부분에서 차이가 있는지 간략히 확인해 봅시다. 차이점을 한 마디로 정의하면 ba…
background vs background-color 차이가 무엇인가요?

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

$(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\…
구글 블로그 테마 스크립트 해석하기 (패킹과 언패킹)

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

구글 블로그 통계는 기본적으로 내 페이지뷰가 계산됩니다. 그리하여 테스트 용도, 또는 필요에 의해 나의 글을 보았을 때도 페이지뷰가 계산되는 현상이 있답니다. 내 페이지뷰를 제외하고 통계를 확인하고 싶을 때 조치하는 방법에 대해 안내해 드리겠습니다.
구글 블로그 내 페이지뷰 계산 제외하기
이전최근
가져가실 때, 출처 표시 부탁드려요! 감사합니다. 💗