구글 블로그스팟 링크 이미지 썸네일 첨부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일동안 많은 클릭!!!
탁류~옛부터 중간 관리자와 그에 빌붙어 농락하는 넘들이 문제다.
탁류가 분명히 막걸리와는 상관이 없는데, 막걸리가 생각난다. 드라마 자체는 잘 만들어 냈다. 배우도 연기 잘 하고, 연출도 부드럽게 잘 이어간다. 중간 중간 마다 우리나라 특유의 익살스러운 장면도 잘 표현하였고. 어떤 님은 드라마 추노2편 이라고 하는데, 추노와는 성질이 다르다. 추노는 노비를 쫓는 집단이고, 이 탁류는 왈패를 주제로 다룬 것이다. 물론 대길이도 처음에는 왈패 출신 이였을지 모르나, 노비를 부각 시킨 반면, 이 탁류에서는 노비 구분이 없다. 돈 있는 사람이 힘이 있는 것이 아니고, 권력에 빌 붙는 사람이 힘이 있다. 그것이 흥미로운 관계다. 그 만큼 액션신 구도도 다르다. 추노는 멋진 절권도 위주로 액션신을 그린다면, 탁류는 피지컬로 액션신을 그린다. 요즘은 안 싸워봐도, 견적이 나오는데, 옛날 사람들은 꼭 싸워봐야 견적이 나오고, 소문이 소문을 낳아, 칼을 쓰지 않은 사람을 00칼잡이라 부른다. 중간의 썩은 관리는 오직 왕을 모시며, 위만 바라보며, 그 썩은 관리에 빌붙어 한 줌 권력도 안 되는 힘에 기대어 힘을 주는 왈패. 중앙 관리가 모든 것을 컨트롤 할 수 없으니, 중간에 기름칠 좀 할 수 있는 집단이 생기게 되지만, 보고 배 운 것이 도둑질이라, 똑같은 짓을 하니, 결국 굶어죽는 것은 백성이라. 하루 벌어 하루 먹는 백성은 사흘 째 품삯을 못 받아, 굶어가지만, - 나라에서 시킨 것이니 품삯이 없고, - 지체 높은 사람이 시킨 것이니 품삯이 없다. - 정치적인 이유 때문에 민생과 관련 된 모든 예산을 삭감한다. 하지만 내가 집권 했을 때는 필요한 돈이라. 근디 사실 알고 보니, 중간에 삥땅을 친 것이고... 씁쓸하게도 현재에도 비슷한 일이 발생하고 있다. 검찰청 폐지? 민생과는 아무 관련이 없는 것인데, 위정자들이 정치함에 있어 불편하다는 이유로 폐지 해 버린다. 이번 국가정보관리원 화재 또한 원래 10년 주기가 되서 배터리를 교체 해야 하는 것이지만, 중간에 예산으로 장난 친 더불어 민주당 덕분에 난 것이다. 그런데도, 전 ...
이 곳에 소개 된 것들은 모두 여기에서 볼 수 있습니다. click!
늘 law의 의지를 잇는자는 나오지요. Recent Posts Widget Your browser does not support JavaScript!
태양광 일조권은 '기대권'이 아니라, '현실권'이다. feat 건축법 일조권 개정
2026년 건축법에서 일조권이 개정이 된다. 본디, 북측 경계선에서 10m 높이에서 일조권 사선(1:1.25)를 지켜야 하지만, 이제는 이 10m가 17m로 완화 되었다. 개정의 목적 은 공간을 확장하여, 지방을 버리고 서울로 더 들어오라는 의미이거나, 집을 더 넓히고 싶은 위정자들이 본인들의 이익을 위해서 개정 했을 가능성이 있다. 이 일조권 사선을 완화하면, 기존의 북측 건물 소유주는 본인들의 권리를 침해 받는 것 아닌가 하는 염려가 있다. 가만 있으면 침해 받는 것이고, 자신의 권리를 안다면, 지켜내거나 보상을 받을 수 있다. 실제로 이 건축법의 전제는, 타인의 일조권을 보장한다는 전제 하에 적용이 된다. 겨울 동절기 날 낮 시간 동안 4시간 일조량 확보.(9시 ~ 16시) 그니까, 만약 앞집에서 증개축 할 액션을 취한다면, 그 내용을 파악하고 협상에 들어가는 것이 옳다. 그러다 안 풀리면, 담당 공무원의 중재를 요청하다, 그러다 안 통하면, 공사중지 가처분 심판 또는 소송을 걸면 되는 것이고. 태양광발전소로 인해 재산권을 침해 예상 될 때 대처 방안(전망권, 조망권, 일조권, 공시지가) 그럼에도 끝끝내 짓는다면, 민사로 피해 사실을 정리하여, 그에 따른 보상을 받으면 된다. 도심이나 산업단지 등에 태양광 모듈을 배치 해 주다 보면, 가끔은 음영 때문에 유휴면적을 다 이용하지 못하는 안타까운 경우를 보게 된다. 그 때는 미리 태양광을 조성 해 놓아 부지확보를 해 놨더라면 하는 아쉬움이 있다. 이는 일조권이 기대권이 아니라, 현실권이기 때문이다. 빈공터에 아무리 내가 건물을 올릴 계획이 있더라도, 당시 일조권 침해 사실이 없다면, 구제 받기 힘들다. 물론, 야매로 확보하는 방법은 있지만. 우리가 반지하를 싫어하고, 한강뷰를 선호하는 이유는, 한강이 무척 깨끗하거나, 한강 위를 건너는 고양이를 보기 위함이 아니다. 바로 탁트인 전망(권)과 일조를 확보하기 위함이다. 태양광은 겸사겸사 부가 수익을 올리기 위...
UPS(무정전전원공급장치) 화재? 국가정보자원관리원
태양광에도 UPS장치가 있다. 수배전반 말고, 자체 서버를 이용한 모니터링이다 보니, UPS를 사용한다. 뭐, 거창 한 것은 아니다. 서버가 민감한 장치다 보니, 안전한 전원공급을 위해, 그리고 상시전원이 끊겼을 때 데이터 손실이나 장치 훼손을 방지 하기 위함이다. 그런 의미에서 발전기나 비상발전기와 목적이나 개념이 다르다. 그래서 UPS에 배터리가 들어가는 것이고, 이번 국가정보자원관리원 화재가 여기에서 기인한 것이라 추측하고 있다. 전기차 충전소를 지하에 박아뒀다구요??? 왜??? feat 태양광 전기실 위치 선정 배터리의 위험성은 우리는 익히 알고 있다. 하지만, 아무리 대형 UPS라 하더라도 화재가 일어남에 석연찮은 부분이 있다. 1. 전원을 끊지 않고 했다고? 설마... 고인물이 아닌 이상, 전기 작업에 있어 기본 소양이 전원 차단, 즉, 정전작업이다. 물론 퓨즈 같이 전원을 완전히 차단 할 수 있는 환경이라면, 그 부분만 오픈하고 진행한다. 이는 UPS라고 해서 예외는 아니다. 특히나 이번 건은 대형이니 만큼 더 정전 후 작업이 이뤄져야 한다. 이를 모르는 전기쟁이는 없다. 물론 하청업체가 설계를 하지 않다보니, 이 원리를 몰라서(어떻게 끄는지 몰라서) 그럴 경우도 있다. 전기안전관리자라든지 유지하는 주체가 이를 파악하고 있고, 자료를 제공해야 하는데, 더러 불성실한 곳이 있기 때문이다. 정상적인 하청업체라면, 자료 공급이 정상적이지 않으면 공사를 거절한다. 나중에 문제가 생기면 책임소재가 애매 해 지기 때문이다. 그럼에도 꾸역꾸역 했다면, 하청업체 문제 일 수도 있는데, 이를 강요하거나 방관한 주체도 문제가 있는거지. 2. 원청? 시행사? 하청? 관계를 알아야 책임 유무를 따지기 쉽다. 이런 비슷한 사건으로 무안공항참사가 있다. 감사원에서는 기장의 운전 실력 또는 판단 미스라 우기지만, 무안국제공항에 설치 된, 단단히 고정 된 로컬라이저(구조물) 때문에 사고가 난 것은 한문철도 인정 할 것이다. 그런데, 사건 이후 이 로컬라이저 건설사 대...
테더링(핫스팟) 제한 무력화 또는 우회(DUN)하는 방법, how it's done
드디어 SK통신사를 이용하다, LG로 넘어갔다. 뭐, SK 해킹 때문에 넘어 간 것은 아니고, 2025 알뜰폰 요금제 업데이트, 이제 평생요금 데이터 무제한도 나올 때 되었지? 때가 되서 넘어 간 것이다. 1Mbps... 느린 속도이기는 하나, 테더링(핫스팟)으로 활용하면, 노트북으로 간단한 업부를 보거나, 가족들이 유튜브나 가볍게 유흥을 즐길 수 있다. sk는 제한이 없던 것 같던데,,, LG 통신사는 당당하게 있네??? 기본 통신 데이터를 다 쓰니, 테더링(핫스팟)이 안 되는 것이였다. 처음에는 LG의 1Mbps가 SK보다 느리구나 생각하다가, 아예 되지를 않으니 이상하여 통신사에 문의했다. 돌아 온 대답은 "기본 데이터와 테더링 데이터는 별도로 관리하고 있어, 기본 데이터가 남아 있더라도, 테더링 데이터를 다 쓰면 핫스팟이 안 된다. 약관에 써놨다." 약관을 꽁꽁 숨겨놓고는 약관에 있다고 한다. sk 해킹 때는 약관에 업체 잘 못이면, 위약금 없다 해놓고는 잘만 받아놓고는, 이럴 때는 보여주지도 않은 약관을 찾고 있다. 쨌든 테더링을 왜 제한 할까는 나중에 다루도록 하고, 우선, 이 혼문을 극복하는 방법을 알아보자! 빠르게, 방법은 3가지다. 1. 설정에서 APN 설정 변경 2. 데터링 우회 어플 사용 3. 최신폰이라면, ADB에서 설정변경 1. 설정 > 연결 > 모바일네트워크 > 엑세스 포인트 이름 가서 새로운 엑세스 포인트 이름을 만들면 된다. 테더링 무제한 사용 방법 (핫스팟 우회 하기) : 네이버 블로그 이분은 많은 것을 넣었지만, 핵심은 APN유형, dun이다. Dial-Up Networking, 스마트폰을 모뎀으로 써서 핫스팟으로 쓰겠다 이다. apn 유형에 이것만 추가하면 되는데, 괜시리 기본 프로필을 잊어버리는 경우도 있으니, 새로 만들어서 사용하라는 것이다. 이게 안 된다고 하면... 두번째 방법인 어플을 까는거고. NetShare - 루트 없는 테더링 - Google Play 앱 근디, 이것이 vp...
재생에너지(태양광) 입찰제에 대한 회의(출력제어 제로화? 글쎄...)
RPS제도가 없어지면? 당연히 REC도 사라지는 것이지. with 재생에너지 입찰제도 일전에 재생에너지 입찰제도에 대해 언급 한 적이 있었다. 현재는 제주도에서만 시범 사업 중인데, 이것을 확대하여 내년에는 전국 시행 예정이다. 이 사업을 시행하여, 기존에 있었던 출력제어를 제로화에 성공했다고 한다. 그래서 이 것을 전국에 도입하여 대표적으로 태양광에 있어 출력제어를 줄이겠다는 의도이다. 전국에 있는 모든 발전소의 출력제어를 하지 않겠다고 하니, 대단한 정책이다. 하지만, 다음의 회의감도 있다. 1. 특정 지역 문제인데, 이것을 왜 전국으로 확대함? 전라도는 이제 태양광 사업 못하는가? 현재 계통 포화 상태는 특정 지역에 태양광이 쏠림 현상 때문이다. 여기다 더불어 정책적 이유와 컨셉질 때문에 국가 차원에서도 태양광 산단을 조성 중인데, 그에 반해 계통이 여유로운 곳은 또 여유롭다. 제주도야 섬 전체 계통 문제인데, 이것을 전국으로 반강제적으로 확대하는 것이 문제다. 2. 기존의 전력 단가를 유지한체 시행한다면, 그나마 나쁘지는 않다. 근디, 제일 위 링크에서처럼, 출력제한에 우선순위가 부여되고, 도리어 전력 판매 단가가 떨어짐에 문제점의 시발점이 된다. 3. 의무는 3mw, 1mw는 선택, 미만은 집단 참여 재생에너지 입찰제도 시행방식은 세가지가 있다. - 실시간 - 예비 - 하루전 하루전은 그나마 제약없이 참여가 가능하지만, 실시간과 예비는 기존의 태양광발전소에 몇가지 시스템상 기능을 더 넣어야 한다. 거진 중앙급전설비급으로 태양광을 운영하고자 하는 의도이다. 그리하야, 태양광 등을 기존의 일반발전기로 취급하여 그에 따른 보상체제를 구축하였는데, 이게 어쩌면, +요인이 아니라, 괜시리 세금을 받쳐야 하는 중간 기관만 더 생기는 것이 아닌지 문득 의문이 든다. 탁류~옛부터 중간 관리자와 그에 빌붙어 농락하는 넘들이 문제다. 4. 헤헤, 난 기준 용량 밑이라 출력제한 장치 없지롱~ 최근에도 연락 갔다. 100kw든 300kw든 필요하면 한전에서 인버...
유행하는 프로그레스바(그로우링, 오라, 물채움) etc
프로그램 따위의 진행정도를 알려주는 것이 프로그레스바(진행바)이다. 한국인이라면, 성질 급한 것으로 유명한데, 차라리 프로그레스바 등으로 진행정도를 알려준다면, 그나마 악성 민원인이라도 기다리는데 도움이 된다. 이번에 스크롤 기능을 개선하는 김에 프로그레스바도 집어 넣었다. 처음에 일반적인 프로그레스바를 이미지 안에 넣었지만, 이왕 만드는 김에 디자인을 추천 받았다. - 그로우링, 오라, 물채움. 이 중 물채움이 난이도가 가장 높았지만, 모던하고 심플한 것이 그로우링이라하여 적용하였다. ... 역시 구관이 명관이라, 유행이고 뭐고, 일반적인 프로그레스바가 직관적이다. 또한 차피 스크롤 바라고 옆에 진행도가 나와있는데, 굳이 이 스크롤 진행 정도를 그로우링으로 구현한들, 도움도 안 되니... 그렇다고 물채움을 적용하니, 애니메이션 구현은 잘 해 놨는데, 물결모양 등을 더 상세하게 적용하려면, 좀 더 신경 써야 할 듯 하고. 이 오라라는 것은 그로우링과 다른게 뭔지... 아니면, 이미지 주변을 둘러 싸는 프로그레스바를 만들어도 되나, 네모 형태의 틀에는 어울리지도 않고, 이미지가 게시글 대표 이미지라, 수시로 바뀌다 보니, 그림에 따라 어울리지 않는다. 걍 이 정도 구현 할 수 있다. 과시 용으로나 나둬야 할 듯 하다. 그 외 적용 된 것은 더블 클릭하면, 위 아래로 두페이지씩 이동하는 기능이다. 추후에는 차라리 웹페이지 이동 간 로딩 형식으로 프로그레스바를 적용 해 봐야 할 듯 하다. 코드는 스크롤 프로그래스바 구현~아! 정말 쉽구현! 이것 참조. 요즘은 기능은 기본이고, 적절성, 디자인도 신경써야 한다. 그래서 어떤 미치갱이가 집안에 불이 났는데, 공감 능력이 없는지, 본인 과시용으로 냉부 같은 방송 프로그램에 나갔다고 하는데, 본인이 연예인이면, 잊혀지면 안 되니 나가는 것이 맞는데, 그것도 아니고,,,(이것도, 배임죄도 뭐시기 아니여?) 불난 것도 자기 직원 탓, 그 거 수습 할 때 희생양 구하라고 하고, 지는 휙, 본인의 자격지심 때...
댓글
댓글 쓰기