글

라벨이 frontend인 게시물 표시

블로그스팟 팁 모음

이미지
  블로그스팟 게시물갯수 조절팁 기본 메인화면에 타이틀 외에 내용이 노출되게 않게 하는 방법 브레이크 타임을 맨상단에 삽입 기본 메인화면에 내용을 요약해서 보여지게 노출하는 방법 (2~3줄만 노출) 브레이크타임을 화면에 보여지는 글자수 내에 삽입 추가로 계속 업데이트 될 예정 ● ● ●
댓글 쓰기
Read more »

웹 성능 최적화를 위한 Image Lazy Loading 기법

이미지
Image Lazy Loading은 페이지 안에 있는 실제 이미지들이 실제로 화면에 보여질 필요가 있을 때 로딩을 할 수 있도록 하는 테크닉입니다. 웹 페이지 내에서 바로 로딩을 하지 않고 로딩 시점을 뒤로 미루는 것이라 볼 수 있습니다. 이 방식은 웹 성능과 디바이스 내 리소스 활용도 증가, 그리고 연관된 비용을 줄이는데 도움을 줄 수 있습니다. 영어 단어 중 'lazy'는 '가능한 길게 일을 미루는 행위' 란 의미에 기반합니다. <img src="…" loading="lazy" alt="…" width="200" height="200"> <img src="…" loading="lazy" alt="…" style="height:200px; width:200px;"> loading="lazy"
댓글 쓰기
Read more »

블로그스팟에 구글 태그매니져 설치하는 방법

이미지
구글 태그 매니저 설치 가이드 1. GTM 계정 생성: Google Tag Manager 공식 웹사이트에 접속합니다. Google 계정으로 로그인합니다. 새 계정을 만들고 웹사이트용 컨테이너를 생성합니다. 2. GTM 코드 획득: 계정 생성 후 GTM에서 제공하는 설치 코드를 확인합니다. 또는 관리 > 계정 > 컨테이너 > "Google 태그 관리자 설치" 메뉴에서 코드를 찾을 수 있습니다. 3. 웹사이트에 GTM 코드 삽입: 첫 번째 코드 스니펫(<script> 태그)을 웹사이트의 <head> 태그 내에 가능한 한 상단에 배치합니다. 두 번째 코드 스니펫(<noscript> 태그)을 <body> 태그 바로 다음에 배치합니다. 4. CMS 플러그인 사용 (선택사항): WordPress, Shopify 등의 CMS를 사용하는 경우, GTM 설치를 위한 플러그인을 활용할 수 있습니다. 5. 설치 확인: GTM 미리보기 모드를 사용하거나 브라우저 개발자 도구를 통해 GTM이 제대로 로드되는지 확인합니다. 6. 컨테이너 게시: GTM 인터페이스에서 첫 번째 버전을 제출하고 게시합니다. 주의사항: <script> 부분은 <head> 태그 내에 배치해야 합니다. <noscript> 부분은 <body> 태그 내에 배치해야 합니다. 코드 설치 시 웹사이트의 성능에 영향을 미칠 수 있으므로 주의가 필요합니다. 이렇게...
댓글 쓰기
Read more »

블로그 스팟에서 정의하는 xml 태그및 속성

이미지
Blogspot(Blogger)에서 사용하는 주요 XML 태그와 속성 <b:section> 블로그 레이아웃의 섹션을 정의합니다. id : 섹션의 고유 식별자 class : HTML 클래스 속성 maxwidgets : 최대 위젯 수 제한 showaddelement : 새 요소 추가 박스 표시 여부 <b:widget> 블로그에 추가되는 위젯을 정의합니다. id : 위젯의 고유 식별자 type : 위젯 유형 (예: Blog, HTML, Label 등) locked : 위젯 이동/삭제 가능 여부 title : 위젯 제목 pageType : 위젯이 표시될 페이지 유형 <b:includable> - 재사용 가능한 코드 블록을 정의합니다. <b:include> - 정의된 includable을 삽입합니다. <data:> - 블로그 데이터를 출력합니다. 예: <data:blog.pageTitle/> <b:if> - 조건부 렌더링을 위한 태그입니다. cond 속성에 조건식을 지정합니다. <b:loop> - 반복 구조를 만듭니다. values 속성으로 반복할 데이터를 지정합니다. expr: - 속성 값에 동적 표현식을 사용할 때 접두사로 사용됩니다. 예: <body expr:class='data:blog.pageType'> <b:skin> - 블로그 스킨의 CSS를 정의합니다. <b:te...
댓글 쓰기
Read more »

tab 펼쳤다 접었다하는 스크립트 소스 모음

이미지
메뉴나 토글형식의 ui에서 자주쓰는 스크립트 //기본 누르면 열렸다 펼쳤다 하도록 설정 // Optional: Automatically close other tabs when one is opened document.querySelectorAll('.tab-toggle').forEach(toggle => {   toggle.addEventListener('change', function () {     if (this.checked) {       document.querySelectorAll('.tab-toggle').forEach(otherToggle => {         if (otherToggle !== this) otherToggle.checked = false;       });     }   }); }); // 첫 번째 탭은 항상 열려 있고, 다른 탭은 하나만 열리도록 설정 document.addEventListener('DOMContentLoaded', () => {   const tabToggles = document.querySelectorAll('.tab-toggle');      // 첫 번째 탭을 항상 체크된 상태로 설정하고 비활성화   if (tabToggles.length > 0) {     tabToggles[0].checked = true;     tabToggles[0].disabled = true;   }   tabToggles.forEach((toggle, index) => {     if (index === 0) return; // 첫 번째 탭은 이벤트 리스너를 추가하지 않...
댓글 쓰기
Read more »