blogspot(구글 블로거)에 highlight.js로 code block 적용하기

1. 사전작업:  highlight.js 에서 최신버전 확인 후 HTML편집에서 </head> 앞부분에 다음 코드 삽입 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/atom-one-dark.min.css"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/highlight.min.js"></script> <!-- and it's easy to individually load additional languages <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/languages/css.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/languages/javascript.min.js"></script> --> <script>hljs.highlightAll();</script> 2. html escape 필요시 여기 에서 코드 변환 3. <pre><code>...</code></pre> 사이에 코드 삽입

웹페이지에 형광펜 칠하는 효과 적용하기

한국일보 웹사이트의 뉴스기사에는 신문지면의 중요한 단락에 형광펜 칠하는 듯한 효과를 내는 기능 이 적용되어 있다. 기사를 스크롤해가며 읽으면 strong tag가 적용되어 있는 부분이 화면 가운데 부분을 지나갈 때 형광펜을 칠해 준다. 이 기능을 (한국일보의 허락을 구하지 않고) 셀디샵 블로그에 적용하였다. 적용한 기능을 (역시 한국일보의 허락을 구하지 않고) 여기 공유한다. css .post-body b { background-image: linear-gradient(90deg, transparent 50%, rgba(0, 51, 0, .2) 0); background-position-x: 0px; background-position-y: center; background-size: 200%; transition-behavior: normal; transition-duration: 1s; transition-timing-function: linear; transition-delay: 0s; transition-property: background-position; } .post-body b.on { background-position-x: -100%; } 참고로 blogspot(구글 블로거)에 적용시 HTML편집에서 ]]></b:skin> 의 앞부분에 끼워넣는다. 한국일보의 strong tag를 b tag로 변경하고 형광펜 색상과 투명도도 변경하였다. javacript <script type="text/javascript"> //<![CDATA[ var articleReadability = function() { var t = document.querySelectorAll(".post-body b") , e = new IntersectionObserver(function(t, e) { t.fo...

지갑 선물할 때 현금 대신 넣어야 할 것

이미지
여러분은 지갑 선물할 때 돈을 얼마나 넣어야 되나 고민해 보신 적 있나요? 우리나라에서는 빈지갑 선물 하는 것 아니라며 지폐 한장이라도 넣어서 선물해야 한다고 하는데요.  뭐, 물론 부자되길 바라는 마음을 담는 건 좋은데, 상대가 친한 친구나 후배처럼 편한 상대가 아니라면 고민이 좀 됩니다. 정성스레 준비한 선물이 오히려 무례한 것으로 비춰지진 않을지... 외국에서는 지갑을 선물할 때 어떻게 할까요? Wallet (insert) card라고, 선물 포장할 때 동봉하는 축하 메세지를 담은 카드처럼 지갑을 선물할 때도 메세지를 담은 카드를 넣어 보냅니다. 그런데 지갑 선물할 때의 카드는 일반적인 종이로 된 카드가 아닙니다.  지갑에 항상 넣어 다닐 수 있도록 신용카드 크기의 작고 가벼운 카드를 준비합니다. 종이로 된 카드는 금방 너덜너덜해 질 것이니 보통 가죽이나 금속(스테인레스, 알루미늄) 재질을 선택합니다. 지갑은 항상 품에 넣어 다니는 것이니 생각날 때마다 꺼내볼 수 있도록 의미있는 문구도 준비해야겠죠! 더구나 요즘은 현금 사용이 줄어들어서 머니클립이나 카드지갑을 선물하는 경우도 많은데요, 이런 경우에도 현금 대신 넣기 딱입니다. 그리고 지갑이 아닌 선물을 골랐을 때도 이런 카드를 준비하면 선물 받는 사람도 더 기뻐하지 않을까요? 항상 지갑에 넣고 다니겠다면서... [셀프디자인 각인] 지갑 보관 카드, 레이저 각인 카드, 블랙 메탈 카드, 러브 노트 오랜 시간이 흘러도 변하지 않는 메세지 카드입니다 4,900원

이제 우리 매장에서도 QR코드로 Wi-Fi 자동 접속!!

이미지
요즘 식당이나 카페에 가 보면 와이파이 비번 대신 QR코드로 자동접속할 수 있는 곳이 많죠?  복잡한 비밀번호로 보안성을 높이면서도 손님들은 간편하게 네트워크에 입장할 수 있는 방법이 바로 QR코드입니다. 아래 QR코드를 스캔해 보세요! 우리 블로그 링크로 만들어 봤습니다. 이 QR코드를 만든 곳은  https://www.the-qrcode-generator.com/ 이란 곳인데요, PNG포맷으로 다운로드 받아 사용할 수 있습니다. 다만  SVG포맷으로 다운 받으려니 유료 가입을 요구하네요. SVG포맷이 뭐가 좋길래 돈까지 받을까요? 네, SVG란 Scalable Vector Graphics의 약자로, scale이 가능한 벡터 이미지란 뜻입니다. 즉 아무리 확대하고 축소해도 비트맵 이미지인 PNG와는 달리 화질에 영향이 없죠. 이렇게 벡터 방식으로 QR코드를 직접 생성해서 와이파이 안내판을 만들 수 있는 곳이 있습니다. v-code.app는 벡터 기반의 디자인 작업물을 만들 수 있는 디자인 툴인데요,  이 곳에서 디자인한 후 셀디샵 에 바로 주문하면 디자인한 그대로의 모습으로 만들어 줍니다. 지금 디자인해서 주문할 수 있는 상품은 [셀프디자인 각인] 블랙 알루미늄 QR코드 사인 [셀프디자인 각인] 미술관 전시회 갤러리 화랑 카페 호텔 졸업작품 캡션 안내문 명판 이렇게 알루미늄, 스틸 두가지가 있네요. 필요하신 분들은 3000원 할인 쿠폰 가져가셔서 주문해 보세요. 쉬운데 재미도 있답니다!

[이벤트] 이번에 새로 자동차 장만하신 300분께 자동차 키링 드려요~~~

이미지
selfdesign.shop 에서 진행하는 이벤트 알려드려요. 2024년 10월, 11월에 자동차 장만하시고 신규 등록하신 분(중고차도 이전등록이면 해당됨)들 주목!! 문신사 베스트셀러인 자동차 키링 1+1  무료 득템 기회가 왔어요. 새로 장만한 차에 썬팅, 블랙박스도 급하지만 새로운 차번호 외우기도 힘들죠?! 마음대로 디자인하는 레이저 각인 키홀더로 자동차번호 외우기 스트레스 탈출!  자세한 내용은 이벤트 공지 에서 확인하세요~~

v-code.app 에서 셀프디자인하는 방법

이미지
v-code.app 은 물건 표면에 내가 원하는 대로 요리조리 디자인 해 볼 수 있는 웹페이지예요. 디자인이란 것이 세밀함을 요하는 작업인만큼 화면이 작은 모바일 환경은 지원하지 않아요. 아쉽게도 데스크탑이나 노트북 환경에서만 작업이 가능합니다. 대신, 아무리 확대하거나 축소해도 품질이 그대로인 결과물을 얻을 수 있어요. 또 그 결과물을 누구에게나 쉽게 공유하고 공유받을 수도 있답니다. 자, 그럼 시작해 볼까요? v-code.app을 이용한 디자인 작업은 다음 세 단계로 이루어져요. v-code.app 에서 4자리의 상품 v-code 를 입력하여 디자인작업 시작! 요리 놔보고, 조리 놔보고, 늘여 보고, 줄여 보고 마음대로 꾸며 봅니다. 완성되면 20자리의 디자인 v-code 를 발급받으면 끝!! 각 단계별로 좀 더 자세히 살펴볼게요. 1단계 : 상품 v-code 입력 웹브라우저에서 v-code.app을 열어 상품 v-code 네자리를 입력하고 엔터키를 누르면~~ 바로 디자인 화면이 짠하고 뜹니다. 우리가 작업할 공간은 가운데 밝은 부분이예요. 그 주변의 어두운 부분은 작업이 소용없는 부분입니다(아무리 작업해도 반영 안됨). 참고로, 화면에서 입력한 c925 는 키홀더 태그 의 상품 v-code예요. 2단계 : 마음대로 꾸며보기 드디어 본격적인 작업에 들어갑니다. 우리는 시간을 아끼기 위해 샘플버튼을 눌러 볼게요.         앞면, 뒷면 양면을 따로 디자인 할 수 있게 되어 있어요. 마음대로 이것저것 만져봅니다.         이리저리 옮겨보고, 늘여보고 줄여보고 돌려도 보고...         색깔도 바꿔보고, 삭제했다 다시 만들기! 폰트 바꿔보고 굵기도 조절해 봅니다. 여러 폰트가 적용된 모습을 한 눈에 비교할 수 있어요. 3단계 : v-code 발급받기 작업이 끝나면 코드발급 버튼을 눌러 v-code를 발급받아요! 코드발급은 클라우드에 작업결과물...

셀디샵 첫 쇼핑을 지원하는 3,000원 할인 회원가입 쿠폰!!!

selfdesign.shop  회원 가입 후 마이페이지 > 쿠폰내역 에서 아래의 코드를 입력하고 바로 사용하기를 누르면 3,000원이 적립되어 바로 사용하실 수 있답니다. WELCOME2MOONSINSA 회원 가입 후 평생 한 번만 사용 가능한 쿠폰이래요~~^^