구글 블로그스팟 링크 이미지 썸네일 첨부2
기존에는 링크 위에 마우스를 올리면, 링크 대표 썸네일 이미지가 뜨도록 만들었다.
구글 브로거 링크 이미지 썸네일 가능해요? (xehostel.blogspot.com)
그랬더니, 모바일버전에서는 보기가 힘들고,(마우스가 없으니)
또 다른 아이디어가 떠 올라 버전 2를 만들었다.
이번 버전은 링크가 화면에서 30%쯤 지날 때 해당 링크의 대표이미지를 변습 하게끔 만들었다.
처음에는 링크 바로 위에 썸네일이 뜨게끔 만들었지만,
추잡한 것 같아,
무난하게 변경하였다.
동적인 것이 티스토리 링크 이미지 썸네일보다 훨 낫다.
조금 더 까리하게 변경하고자 한다면,
신문기사처럼, 해당링크를 지날 때 페이지 전체가 위 아래로 열리면서 이미지를 보여주면 좋으나, 그것은 나중에 적용하고자 한다.
아이디어는 많이 떠 오르나, 모두 다 한 곳에 적용하다 보면,
도리어 아니한 것보다 못 해진다.
그래서 이 사이트에 적용해 놓았다.
Ha! anisekai & manga (hanissss.blogspot.com)
본 사이트보다 질적으로 떨어진다고 판단 되는 아무글을 써 놓는 곳인데,,,
오히려 이 곳이 본 사이트보다 인기가 더 좋다.(역전현상)
역시 사람들의 본성에는 다들 괴수 하나는 다 있는 듯 하다.
기름 시추하기 전에 지진이 나서 다행이다라고 생각하는 나처럼.
코드는 다음과 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll Thumbnail Preview</title>
<style>
.thumbnail {
position: fixed;
top: 30%;
right: 0;
width: 150px;
height: 150px;
border: 1px solid #ddd;
padding: 5px;
background: #fff;
z-index: 1000;
display: none;
}
.thumbnail img {
max-width: 100%;
max-height: 100%;
}
.widget.Blog a {
display: block;
margin: 20px 0;
}
</style>
</head>
<body>
<div class="widget Blog">
<a href="https://aldkzm.tistory.com/">Link 1</a>
<a href="https://xehostel.blogspot.com/">Link 2</a>
</div>
<div class='thumbnail' id='thumbnail'>
<a id="thumbnail-link" href="" target="_blank">
<img alt='Thumbnail' id='thumbnail-img' src=''/>
</a>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const widget = document.querySelector('.widget.Blog');
const links = widget.querySelectorAll('a');
const thumbnailDiv = document.getElementById('thumbnail');
const thumbnailImg = document.getElementById('thumbnail-img');
const thumbnailLink = document.getElementById('thumbnail-link');
const cache = {};
// 미리 썸네일 로드
links.forEach(link => {
const url = link.getAttribute('href');
fetchThumbnail(url, function(thumbnailUrl) {
if (thumbnailUrl) {
cache[url] = thumbnailUrl;
}
});
});
function fetchThumbnail(url, callback) {
const proxyUrl = 'https://api.allorigins.win/raw?url=' + encodeURIComponent(url);
fetch(proxyUrl)
.then(response => response.text())
.then(data => {
const parser = new DOMParser();
const doc = parser.parseFromString(data, 'text/html');
const ogImage = doc.querySelector('meta[property="og:image"]')?.content;
callback(ogImage);
})
.catch(error => {
console.error('Error fetching thumbnail:', error);
callback(null);
});
}
const observerOptions = {
root: null,
rootMargin: '-30% 0px -70% 0px', // 30% ~ 70% 지점에서 트리거
threshold: 0
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
const link = entry.target;
const url = link.getAttribute('href');
if (entry.isIntersecting) {
if (cache[url]) {
thumbnailImg.src = cache[url];
thumbnailLink.href = url;
thumbnailDiv.style.display = 'block';
}
}
});
}, observerOptions);
links.forEach(link => observer.observe(link));
});
</script>
</body>
</html>
intersectionobserver를 이용한 것이 특징인데,
잘 응용하길 바란다.
애초에 이 블로그를 내가 만들었으면, 링크 자체를 손 봤겠지만,
그게 아니라서 이런 방법을 사용 할 수 밖에 없었다.
7일동안 많은 클릭!!!
캐드 글자 깨짐 해결하는 방법(세가지)
1. 옵션에서 대체 글자를 설정 해 놓는다. 물론 이 것으로 간단하게 해결이 된다면, 세가지 방법이라 하지 않았겠지... 2. style 명령어로 다른 글자들을 지정한다. 어... 맞기는 한데... 싫어하는 사람들이 있다. 여기다 본래 그린 사람의 의도가 왜곡 될 수도 있는 부분이고.... (ㅇㅈㄹ) 또한 블록 안에 있을 경우 따로 style을 지정 해야 하는데, 가끔 오류인지 안 되는 경우가 있다. 그럴 때! 3번을 실행하자. 3. 근본적인 방법이다. 깨진 글자를 선택하면, 무슨 스타일을 사용하는지 나온다. 그 것을 인터넷에 검색하여 다운로드 받으면 된다. TTF, 트루타입글자파일은 설치가 간단하다. 더블클릭만 하면 되니까. SHX파일 은 캐드 파일 안에 'fonts 폴더' 안에 집어 넣고, 재실행하면 된다. 이럴 때 보면,,, 캐드 프로그램이 많이 조악하다. 이런 것 쯤은 알아서 설정이 되야지... 다루는 이가 찾아서 해결해야 하다니.... autoCad도 별거 아니다. DWG TrueView 2024 설치 오류(4000), autoCad를 설치 해 보세요... 그래도 안 되면.... (xehostel.blogspot.com)
이 곳에 소개 된 것들은 모두 여기에서 볼 수 있습니다. click!
늘 law의 의지를 잇는자는 나오지요. Recent Posts Widget Your browser does not support JavaScript!
태그(카테고리) 별 버튼 글자 색깔을 바꿔보자 with chatGPT
사실, 더 직관적으로 태그(카테고리)별, 해당하는 이동 버튼만을 보여주게끔 만들 수는 있지만, 과연 이 홈페이지에서 보여 줄 수 있는 미디어가 뭐가 있는가, 한 동안 보여주기 위해 버튼 글자 색깔만 바꿔주는 것으로 마무리 하였다. 구글 브로거... 다른 블로그보다 제약 사항이 없다는 것에 장점을 가지지만, 뭔가 주인장이 노~~~력을 하지 않으면, 꾸미기 힘들다는 것에 한계를 가진다. 여기다, 한국에서는 네이버, 다음이라는 버프를 받기가 힘들다는 것도 있다. 이재, 곧 죽습니다(이제 곧 죽습니다), 지옥보다 비참한 현실 (hanissss.blogspot.com) 그래서 그 시장을 개척하는 의미에서 약간의 기교를 넣어봤다. See the Pen Untitled by xelaw ( @xelaw ) on CodePen . 솔직히 혼자서 이런 코드를 짜라고 하면... 불가능 했을 것이다. 시간이 남아도는 것도 아니고, case보다는 if절을 더 선호하는 편이라. 이러한 쿼리셀렉터 방식은 티스토리 태그 or 제목 값 가져오기(추출, 브로거든 뭐든 다됨) (tistory.com) 많이 다뤄왔던 주제이지만, 아는 것을 또 하고, 또하고, 반복하는 것은... 무척 귀찮은 일이다.
DWG TrueView 2024 설치 오류(4000), autoCad를 설치 해 보세요... 그래도 안 되면....
캐드 도면을 다루다 보면, 버전 문제도 있디만, 글자 깨짐 현상도 있다. 최신 캐드 프로그램을 깔면, 해결 되지 않을까 하지만, 아시다시피 autocad는 유료다. 그렇다면, 무료 캐드 프로그램은 없을까? 그것이 바로 'DWG TrueView 2024 - English'이다. DWG TrueView | DWG Viewer| Autodesk 그런데 왠걸? 오류 4000번 이 떴다. 원인을 알아보니,,,, 지들도 모른단다. "설치 오류: [제품] 설치를 완료할 수 없습니다. 오류 4000" 오류 발생 (autodesk.co.kr) 우선은 autocad를 설치한 이력이 있다면, 서로 충돌 할 수도 있으니, 이전의 autocad 관련 프로그램, 나아가 잔여 파일마저 지우라고 한다. 과연 가능할까? 되지 않았으니, 다루지 않았겠는가. 결론적으로 윈도우 업데이트 프로그램 중 일부와 충돌 해서 발생한 문제라는 것을 알게 되었지만, 일반인들은 알아도 해결 하기 어렵다. 그렇다면, 어찌 쉽게 해결 할 수 있는가? 옛부터 이런 문제는, 문제 해결 할 수 있는 사람을 자극해야 한다. 즉, 무료 버전 말고, 유료 버전을 설치하면, 돈 되는 것은 해결하지 말라고 해도 급한 사람들이 해결한다. 그래도 안 되는데요? 지금부터 중요한 방법이다. 바로 불법프로그램, autocad 최신버전 크랙버전을 설치 해 보자. 크랙 버전을 배포하는 이유가 무엇인가? 바로 해킹 프로그램을 설치하기 위함이다. 정식버전이야, 고객센터라든지 대응처가 있지만, 불법프로그램은 설치가 안 되면, 그렇지 않아도 찝찝한데, 설치 안 하게 된다. 그러니, 이 크랙버전은 어떻게든 설치가 되게끔 조치를 취해났다. 다소 트로이야 같은 것이 걱정 되기는 하지만, 설치가 반드시 필요하다면, 이 방법도 괜찮은 방법이라 생각된다. 그런데,,,, autocad도 별거 없더라... 버전호환 같은 것은 도움이 되지만, 글자 깨짐은 해당 글자 파일을 설치 해야 되고,,,, 오히려 batch plot 부분
태양광 공작물축조신고 기준, 무게에 따라서 공작물 축조 신고 해야 되여...
법령에 따르면, 공장물 축조신고 기준 및 범위는 다음과 같다. 제118조(옹벽 등의 공작물에의 준용) ① 법 제83조제1항에 따라 공작물을 축조(건축물과 분리하여 축조하는 것을 말한다. 이하 이 조에서 같다)할 때 특별자치시장ㆍ특별자치도지사 또는 시장ㆍ군수ㆍ구청장에게 신고를 해야 하는 공작물은 다음 각 호와 같다. <개정 2014. 10. 14., 2016. 1. 19., 2020. 12. 15.> 1. 높이 6미터를 넘는 굴뚝 2. 삭제 <2020. 12. 15.> 3. 높이 4미터를 넘는 장식탑, 기념탑, 첨탑, 광고탑, 광고판, 그 밖에 이와 비슷한 것 4. 높이 8미터를 넘는 고가수조나 그 밖에 이와 비슷한 것 5. 높이 2미터를 넘는 옹벽 또는 담장 6. 바닥면적 30제곱미터를 넘는 지하대피호 7. 높이 6미터를 넘는 골프연습장 등의 운동시설을 위한 철탑, 주거지역ㆍ상업지역에 설치하는 통신용 철탑, 그 밖에 이와 비슷한 것 8. 높이 8미터(위험을 방지하기 위한 난간의 높이는 제외한다) 이하의 기계식 주차장 및 철골 조립식 주차장(바닥면이 조립식이 아닌 것을 포함한다)으로서 외벽이 없는 것 9. 건축조례로 정하는 제조시설, 저장시설(시멘트사일로를 포함한다), 유희시설, 그 밖에 이와 비슷한 것 10. 건축물의 구조에 심대한 영향을 줄 수 있는 중량물로서 건축조례로 정하는 것 11. 높이 5미터를 넘는 「신에너지 및 재생에너지 개발ㆍ이용ㆍ보급 촉진법」 제2조제2호가목에 따른 태양에너지를 이용하는 발전설비와 그 밖에 이와 비슷한 것 ② 제1항 각 호의 어느 하나에 해당하는 공작물을 축조하려는 자는 공작물 축조신고서와 국토교통부령으로 정하는 설계도서를 특별자치시장ㆍ특별자치도지사 또는 시장ㆍ군수ㆍ구청장에게 제출(전자문서에 의한 제출을 포함한다)하여야 한다. <개정 2013. 3. 23., 2014. 10. 14.> ③ 제1항 각 호의 공작물에 관하여는 법 제83조제3항에 따라 법 제14조, 제21조제5항, 제29조,
베테랑2~사적 제재의 위험성을 보여주는 영화, 삐질...
열혈사제를 메인으로 올리려고 했지만, 시즌 1보다 아직 재미지다라는 느낌을 받지 못 해, 영화 베테랑2를 후기로 다룬다. 뻔한 맛 이지만, 맛있는 거 뭐? 라면! 안타깝게도 본인은 건강에 좋은 영덕대게국수를 먹지만, 라면도 분명 나쁘지 않은 음식이다. 누구다 영덕대게 살을 고명으로 국수를 먹을 수 있다면, 수작이라는 단어는 없어지겠지. 라면이라도, 오랜만에 먹는 라면은 꿀맛이다. 물론 이 영화가 비질란테, 비질란테~유지태 땜시 한번 봐야 된다. 도베르만을 섞었기는 하지만, 오히려 이 본 영화들보다 재미지게 만들었다. 박해일의 그 흐리멍텅한 눈빛을 보면, 아! 얘는 정상이 아니구나, 느낌이 딱 와서, 다른 해치들이 나타났을 때, 쇼 하고 있네라는 느낌을 받을 수 있지만, 우리들은 이미 비질란테를 통해 많이 섭취 해 왔기에, 오히려 이런 직설적인 보여주기식 범인이 더 매력적으로 다가왔다. 마치 3분 라면 뽀글이 처럼. 특히나 중간 중간 액션신이 지루함을 달랬고. 중반부에 마약 소굴을 찾아갔을 때는 에이~ MSG를 너무 치신다... 라 느꼈지만, 그 부분 빼고는 시간 가는 줄 모르고, 즐길 수 있었다. 누군가를 때려도 어디서 맞고만 오지마라~ 이 말이 유명한 아버지를 둔 아들에게 오히려 족쇄가 되버렸다. 몰입 할 수 있었던 요소가, 현실에 있었던 사건을 다뤘다는 것! 안타까운 것은 얼마 전 징역 1년 집행유예 2년은 시기가 맞지 않아 다루지 못했다는 것! ㅋ 하긴 본인이 본인을 체포 할 수는 없었겠지.... 그래도 추천한다. 코믹스러운 요소 뿐만 아니라, 현실의 라면 맛을 너~~무 잘 표현 했다.
표절로 연재 중단 된 웹툰 대가리(无敌好学生) 이제는 어디서 봐야 할까?
작가 정종택 총편수 총 134화 무법지대 아랑공고에서 우주제일 '굿 스튜던트'를 꿈꾸는 김구의 가슴 뜨거운 액션활극 아직 제일 위 상단의 사이트에는 완결 표시가 뜨지 않았으니 재연재를 기대 해 본다. 그전에 해외에서 하던데... 직접 링크를 걸기는 좀 그렇고... https://www.google.com/search?q=%E5%8E%8C%E6%81%B6%E7%9A%84%E6%A0%85%E6%A0%8F&source=lmns&bih=937&biw=1920&client=ms-android-lge&hl=ko&ved=2ahUKEwj-zpiXlLroAhVNyIsBHRBRB6oQ_AUoAHoECAEQAA 여기서는 151화 연재하기는 하더라... Recent Posts Widget Your browser does not support JavaScript!
댓글
댓글 쓰기