TREASURE408

• 

  [JS] 오프스크린 이미지를 지연(Lazyload) 로드 - lazysizes Lazysizes JS를 사용하여 웹 사이트 이미지에 오프스크린 이미지 지연(lazyload)를 적용시킬 수 있습니다. Lazy loading lazy loading은 페이지를 읽어 들이는 시점에 중요하지 않은 리소스 로딩을 추 후에 하는 기술입니다. 대신에 이 중요하지 않은 리소스들은 필요할 때 로드가 되어야 합니다. 이미지와 관련된 경우에는 중요하지 않은 리소스들은 "off-screen"와 함께 동기화가 됩니다. 누군가가 웹페이지(이미지, 비디오 등)에 리소스를 추가할 때, 리소스는 small placeholder를 참조합니다. 사용자가 웹페이지를 검색할 때 실제 리소스는 브라우저에 의해 캐시 되고 리소스가 사용자 화면에 표시될 때 placeholder를 대체합니다. 예를 들어, 사용자가 웹페이지를 .. FRONT-END/JAVASCRIPT 2022. 9. 12.

• 

  애드센스 광고 안 뜰 때 영역 없애는 방법 애드센스가 가끔 안나올때가 발생하는데, 이럴때 광고 영역이 그대로 남아있게 됩니다. 애드센스 광고가 안뜨면 광고 영역을 삭제하는 방법에대해 간단히 알아보도록 하겠습니다. 애드센스 광고가 안 뜰 때 영역 삭제 방법 애드센스 광고 영역을 콘솔 로그에서 살펴보자면 다음과 같습니다. ins 태그를 보면 data-ad-status="filled"를 볼 수 있습니다. 만약 이 속성의 값이 filled라면 광고가 정상적으로 표시되었다는 의미입니다. 반대로 속성의 값이 unfilled라면 광고가 표시되지 않고 있다는 의미이겠죠. 우리는 이것을 이용해 CSS로 쉽게 없앨 수 있습니다. ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; } ins.. TIP/Etc Tip 2022. 9. 12.

• 

  [JS] 티스토리 카테고리 괄호 제거 방법 티스토리 카테고리에는 각각 몇개의 게시글이 있는지 개수가 표시되어있는데 괄호 안에 넘버가 들어가 있습니다. 오늘은 티스토리 카테고리의 괄호를 제거하는 방법에 대해 알아보겠습니다. 카테고리 태그 찾기 우선, 티스토리 카테고리의 태그를 찾고 그 안의 id 네임을 찾아줘야 합니다. 자신의 블로그에서 사이드바를 오픈한 상태로 개발자 도구에 들어가 준다. (더보기 > 개발자 도구) 콘솔창 1번 아이콘을 누른 뒤, 사이드바의 카테고리 부분을 선택해준다. 콘솔창의 카테고리 부분의 id 값을 복사해준다. (저의 경우 id="sidebar-category") 만약 id 값이 없다면, 스킨 편집 > HTML > 에서 id 값을 직접 넣어준다. 다시 1번 아이콘을 선택하고 괄호가 포함된 게시글 개수 부분을 선택한다. 선택한.. TIP/CSS & Tistory 2022. 9. 12.

• 

  [JS] 로딩이 될때 요소의 텍스트를 변경하는 방법 HTML 안에 있는 특정 요소의 텍스트를 변경하는 것이 아닌, 스크립트로 로드가 된 후에 요소가 등장하고 그 안에 텍스트를 JS를 통해 변경해야할 때는 단순히 .innerHTML 속성을 통해 변경이 불가능 합니다. 오늘은 로딩이 될때 요소의 텍스트를 변경하는 방법에 대해 알아보도록 하겠습니다. 로딩이 될 때 요소의 텍스트를 변경하는 방법 간단하게 말해서 값을 설정하려는 시점에 요소가 존재하지 않다면 특정 요소, 예를 들어 가 DOM(Document Object Model)에 추가된 후에 변경 메서드를 호출해야 합니다. 이 스크립트 누구인가? See the Pen innerHTML onload by 서근 (@seogun95) on CodePen. 만약, 웹사이트가 로드 되고 N초 뒤에 .innerHTML을.. FRONT-END/JAVASCRIPT 2022. 9. 11.

• 

  [JS] 애드센스 디스플레이 광고 반응형 광고 2개 삽입하는 방법 애드센스 광고 2개 삽입하는 방법 애드센스 디스플레이 반응형 광고를 2개 삽입하는 스크립트에 대해 알아보고 적용해보도록 하겠습니다. 디스플레이 광고 생성 우선, 당연히 애드센스 승인된 계정이 필요합니다. 애드센스 홈페이지 ➜ 광고 ➜ 광고 단위 기준 ➜ 디스플레이 광고 ➜ 반응형 광고 생성 이것을 두 번 반복해서 자신의 data-ad-slot와 data-ad-client 아이디를 복사 또는 기억해줍니다. data-ad-client는 애드센스 고유 넘버이기 때문에 한 번만 사용하면 되지만, data-ad-slot은 광고를 생성할 때마다 새로운 번호가 생성되기 때문에 두 개를 복사해 두셔야 합니다. HTML에 스크립트 추가 이제 HTML 내부에 원하는 부분을 정하고 아래 스크립트를 추가해줘야 합니다. 아래 .. FRONT-END/JAVASCRIPT 2022. 9. 11.

• 

  구글이 제공하는 애드블록(광고) 차단 스크립트 적용방법 - 광고 차단 회복 구글에서 애드센스를 사용할 수 있는 모든 사용자에게 기본으로 애드블럭 광고 차단 해제 기능을 제공 하고 있습니다. 바로 광고 차단 회복이라는 기능인데, 이것을 적용하는 방법에 대해 알아보겠습니다. 애드블록 애드블록은 웹사이트에 있는 광고를 모두 차단해주는 플러그인입니다. 크로미움 브라우저에서 많은 분들이 사용하고 있는 대표 플러그인이죠. 하지만 애드센스 광고를 통해 수익을 얻고 있는 블로거 또는 웹 페이지 운영자들에게는 좋지 않은 기능입니다. 왜냐하면 그 때문에 수익이 발생하지 않기 때문이죠. 애드센스 광고 차단 회복 사실 애드블록을 막는 스크립트는 이미 많은 웹사이트에서 소개가 되어있고, 적용하신 분들도 많이 있었습니다. 복잡한 스크립트를 통해 직접 디자인을 하시는 분들도 있구요. 하지만, 구글에서도 .. TIP/Etc Tip 2022. 9. 11.

• 

  [JS] 페이지 로딩시 스크롤 막는 방법 페이지 로딩 시 스크롤 막는 방법 페이지가 로딩될때 스크롤을 막아야 하는 경우가 있는데, 오늘은 로딩시 스크롤을 막는 방법에 대해 알아보겠습니다. body overflow hidden 우선 Html의 body 부분의 스크롤을 막아주는 스타일을 입혀야 합니다. CSS에 다음과 같이 코드를 추가해줍니다. body.no-scroll { overflow: hidden !important } 코드 네임의 .no-scroll은 사용자가 원하는 네임으로 변경해도 됩니다. body class 추가 body에 .no-scroll이라는 class를 추가해주겠습니다. Javascript 추가 body에 클래스를 추가해줬다면 이제 모든 페이지에서 스크롤이 작동되지 않습니다. 왜냐하면 CSS에 body의 overflow를 hi.. FRONT-END/JAVASCRIPT 2022. 9. 10.

• 

  [JS] 함수 Function JAVASCRIPT 함수 개념에 대해 알아보겠습니다. 함수 Function function add(a, b) { return a + b; } //함수 정의 add(1, 2); //함수 호출 function - 함수 정의 키워드 add - 함수 이름 (a, b) - parameter 매개 변수, 인자 return - 결괏값 반환 add(1, 2) - 함수 호출 중요 Point 함수 단위로 작은 단위의 일들을 묶어야 한다. 수행하는 일을 잘 나타낼 수 있는 이름을지어야 한다. 매개변수 이름도 의미 있게지어야 한다. 함수도 객체(object)이기 때문에 메모리 상에 Hip에 주소가 할당되게 된다. function add(a, b) { return a + b; } const sum = add; 함수의 이름은 함.. FRONT-END/JAVASCRIPT 2022. 9. 8.

• 

  [HTML] Input 내용 버튼 클릭 삭제 Input 태그 안에 textfield 의 내용을 버튼 클릭 한번으로 삭제하는 방법에 대해 알아보겠습니다. Input type="reset" 태그는 의 모든 입력을 초기값으로 재설정하는 reset 이라는 기본 이벤트 핸들러를 가지고 있습니다. 그래서 아래와 같이 간단하게 버튼을 만들어 placeholder에 있는 value를 지워줄 수 있습니다. 사용할 때는 부모 태그를 으로 덥어줘야 합니다. See the Pen Untitled by 서근 (@seogun95) on CodePen. 위와 같이 button 태그를 사용하여 type을 reset으로 넣어줘도 되고, input 태그를 사용해도 결과는 같습니다. Value 속성에 value는 생략 가능합니다. 만약 value를 넣어주면 다음과 같습니다. See.. FRONT-END/HTML 2022. 9. 8.

• 

  [JS] 내부링크를 현재 창으로 열도록 해주는 방법 웹 사이트에 설정되어있는 링크들중에 만약 로컬 페이지의 링크라면, target="_balnk"로 설정되어 새창으로 열리는 링크를 강제로 현재창으로 바꿔주는 스크립트에 대해 알아보겠습니다. 내부 링크와 외부 링크 SEO 최적화 중에 내부 링크와 외부 링크를 사용하는 것은 조금 구별된다고 합니다. 내부 링크: 내 사이트 내의 다른 글로 연결되는 링크 외부 링크: 타 사이트로 연결되는 링크 외부 사이트로 연결되는 링크를 걸면 내 사이트의 평판 일부를 해당 사이트로 넘겨주게 되므로, SEO 모범 관행 중 하나는 권위 있는 사이트가 아니거나 내가 제어할 수 없는 사이트로 링크를 걸 때에는 target="_blank" rel="nofollow" 속성을 추가합니다. 외부 링크를 현재 창으로 열리도록 설정하면 방문자가.. FRONT-END/JAVASCRIPT 2022. 9. 7.

• 

  [HTML] Block태그와 Inline 태그 종류와 차이점 Block태그와 Inline 태그 종류와 차이점 모든 HTML 요소에는 요소 유형에 따라 기본 표시 값이 있습니다. 표시 값에는 블록과 인라인의 두 가지가 있습니다. Block 태그 항상 새 줄에서 시작하고 브라우저는 자동으로 요소 앞뒤에 약간의 공백(여백)을 추가합니다. 항상 사용 가능한 전체 너비를 차지합니다. 부모 태그의 너비를 가져옵니다. 높이는 자신의 태그의 자식태그의 높이를 가져옵니다. 일반적으로 사용되는 Block 태그는 와 입니다. Block 태그 종류 - Inline 태그 Inline 태그는 필요한 만큼만 너비를 차지합니다. 대표적으로 태그가 많이 쓰입니다. Iinline 태그 종류 읽어주셔서 감사합니다🤟 참고 문헌 REFERENCE HTML Block and Inline Elements.. FRONT-END/HTML 2022. 9. 5.

• 

  [CSS] 적용 우선 순위 CSS 적용 우선순위 CSS에는 태그에 속성이 중복되어 설정될 수 있습니다. 이럴 때 어떤 속성이 우선되어 적용되는지 우선순위를 보면 다음과 같습니다. 우선순위는 아래와 같습니다. !important inline style (HTML내부에 사용된 style 속성) #id .class tag 상위 객체에 의해 상속된 속성 같은 우선순위에 있는 경우에는 부모 클래스가 우선 적용되며, 모든 설정이 같은 경우 CSS 스타일 시트에서 나중에 선언한 것이 우선되어 적용됩니다. !important 만약 우선순위를 무시하고 적용해야 하는 속성이 존재한다면, 속성 값 뒤에 !important 를 붙여서 적용시켜 줄 수 있습니다. .normal { color: blue } .compulsion{ color: black !.. FRONT-END/CSS 2022. 9. 5.

• 

  블로그 CPU 개선 완료! 문제는 Keyframes 무한 루프였다... 그동안 블로그 꾸미기에 정신이 팔려 과도한 애니메이션(Keyframes)들과 스크립트를 적용하기에만 급급했었습니다. 하지만 어느 순간 맥북의 팬은 심하게 돌아가기 시작했고, 확인해보니 CPU의 점유율은 시간이 지날수록 100%에 가까워지기 시작한 것입니다. 사실 한 달 전부터 스크립트 어느 부분에 무한루프가 걸려서 그럴 것이라고 예상만 했지만, 쉽게 건들지 못하고 사실 귀찮기도 해서 방치했었습니다. 그렇게 몇몇 분이 제 블로그에 CPU가 과도하게 높다는 말씀을 해주셔서 오늘 하루 날 잡고 하나하나 스크립트와 CSS를 뜯어가 보기 시작했습니다. 막상 하나하나 제거하고 콘솔 로그를 확인해보니 스크립트에는 전혀 문제가 없던 것을 확인! 그렇다면 CSS인데.. 이게 CSS가 워낙 많다 보니 막막했었습니다. 그러.. PLAY/잡담 2022. 8. 26.

• 

  [HTML] 폰트 미리 로드하여 레이아웃 개선하기 웹 폰트를 페이지가 로딩되었을때 먼저 로드 될 수 있도록 하는 방법에 대해 알아보겠습니다. 글꼴 미리 로드 웹사이트에서 웹 폰트 로딩 여부에 관계없이 텍스트가 항상 보이게 되는데 글꼴, 자간, 높이 등의 서식에 따라 웹 폰트 적용 전과 후의 레이아웃이 변경되게 됩니다. 즉 폰트를 넣었지만, 로딩 시에는 그 폰트가 먼저 로딩이 되지 않기 때문에 레이아웃이 변경되어 UI에 부정적인 경험을 주게 되는 것이죠. FOUT을 방지하기 위해 필요한 글꼴을 미리 로드할 수 있습니다. Html as="font" type="font/woff2" 속성은 브라우저에 이 리소스를 글꼴로 다운로드하도록 지시하고 리소스 대기열의 우선순위를 지정하는 데 도움이 됩니다. crossorigin 속성은 글꼴이 다른 도메인(웹 폰트)에서 .. FRONT-END/HTML 2022. 8. 24.

• 

  (JS) 이미지의 src를 변경하는 방법 자바스크립트로 src 주소 변경 HTML에서 Img 태그에 src로 지정된 이미지 주소를 자바스크립트를 사용하여 바꾸는 방법에 대해 알아보도록 하겠습니다. Html html의 img 태그 src 주소는 example.svg 입니다. 이제 자바스크립트로 다른 주소를 할당해주도록 하겠습니다. Javascript $img = document.querySelector(".img-container > img"); $img.src = `./imgaes/another.svg`; JQuery JQuery를 사용해 위에 코드를 한 줄로 작성할 수 있습니다. $(".img-container > img").attr({ src: "./images/blog-logo.svg" }); 클래스를 추가하려면 아래와 같이 코드를 작성해.. FRONT-END/JAVASCRIPT 2022. 8. 23.