Whizz Xanadu 참고서

블로거 테마에서 Contempo Light을 적용한 후 Edit HTML을 통해 테마를 수정한 기록이다. 모든 작업은 블로거 - Theme - Customize의 오른 화살표 - Edit HTML로 가서 수행함. 1. 여러 글꼴, 배경색 수정 및 공유 버튼 숨기기 앞 부분 <b:skin version='1.3.3'><![CDATA[ 바로 뒤에 아래 코드를 추가한다. /* 글자색, 제목,날짜,READ MORE,Popular posts 글꼴, 본문 링크 색상, 제목 줄간격 사용자 수정 시작 */ .post-snippet .snippet-item, .post-body {   color: #222222 !important; } .post-title, .post-title a {   color: #333333 !important;   font-size: 20px !important; } .post-timestamp, .post-timestamp a, .post-timestamp time {   color: #999999 !important;   font-weight: normal !important;   font-style: italic !important; } .jump-link, .jump-link a {   font-size: 14px !important;   font-weight: normal !important; } .PopularPosts .widget-content a {   font-size: 18px !important; } .PopularPosts .post-timestamp, .PopularPosts .post-timestamp a, .PopularPosts .post-timestamp time { ...

* 웹 브라우저는 & 기호를 보면 특수 문자가 시작된다고 인식한다(엔티티). &를 표현하려면 &amp; * < 기호는 &lt; 코드를, > 기호는 &gt; 코드를 쓴다 * "(큰 따옴표)는 &quot; 코드, '(작은 따옴표)는 &apos; / 공백은 &nbsp; &ensp; &emsp; * 텍스트 연한 회색(주석)은 <span style="color: #999999;"></span> 으로 감싼다. 더 연한 회색은 #b0b0b0; 어두운 주황(인용)은 #b45f06; 다크 블루(강조,소제목)는 #0b5394; 라이트 블루는 #4299e1; 소프트 블루는 #63b3ed; 자주는 #800180; 어두운 초록은 #38761d; 중간 초록은 #6aa84f; 에메랄드 초록은 #2ecc71; 어두운 빨강은 #990000; 연한 빨강은 #ff6666; * 이미지, 영상은 <div class="separator" style="clear: both; text-align: center; "></div>로 감싼다   - 이미지: a의 style=" " 속성 삭제 및 새 창으로 열기 target="_blank" (Contempo 생략 무방) 추가     (문장 바로 밑에 이미지를 배치할 땐 img에 style="margin-top: 3px;" 추가)   - 유튜브 영상: iframe의 width="320" height="266" 을 style="width: 500px; aspect-ratio: 원본가로크기 / 원본세로크기; margin-top: 2px;" 로 교체  ...

정말 정말 오래 사용해왔던 블로거 다이나믹 뷰(Dynamic Views) 테마를 이제 접어야 할 때가 된 것 같다. 무엇보다 모바일 기기에서 접속했을 때 페이지 뜨는 게, 실제로는 문장은 빨리 뜨지만 이미지 뜨는 게 너무 느리다. 그리고 데스크톱 화면에서의 디자인도 너무 밋밋한 것 같다. 이 글은 그동안 다이나믹 뷰 테마를 쓸 때 글 하단의 포스팅한 날짜를 표시하는 부분에 마우스 오버를 하면 뜨는 툴팁에 대한 개선 코드를 기록해 두려고 쓰는 것이다. 블로거는 글 하단 포스팅한 날짜 부분의 툴팁이 "2026-09-22T02:04:00Z" 형식으로 뜬다. 또 이건 지역별 시간 수정(GMT + 9시간)도 없이 그리니치 시간(GMT)으로 표시되는 것이다. 각설하고, 이를 수정하는 방법 및 코드는 아래와 같다. * 블로거 - Theme - Customize의 오른 화살표 - Edit HTML로 가서 * 윗 부분 <head> 바로 아래 열에 아래 코드 삽입 <!-- 게시글 (마우스 오버) 날짜,시각 사용자 수정 시작 --> <script type='text/javascript'> //<![CDATA[ (function() {   const formatter = new Intl.DateTimeFormat('en-US', {     month: 'short',     day: 'numeric',     year: 'numeric',     hour: 'numeric',     minute: '2-digit',     hour12: true   });   const targetSelector = '.publish-date, ...

여러 이미지 한 행에 넣기 (브라우저 창의 폭이 줄면 이미지가 줄바뀜) <div class="separator" style="clear: both; text-align: center; "><img.. src="이미지 주소1"/><img.. src="이미지 주소2"/></div> → [1]a의 style 속성 삭제 및 target="_blank" 추가 [2]각 자료(img, iframe)에 style="margin: 2px 0; vertical-align: middle;" 추가 → 설명은 span style의 margin-top을 margin-bottom: 3px; 로 교체 (여럿 중 이미지1만 설명을 달려면 이미지1+설명을 자식 <div style="display: inline-block; vertical-align: middle;"></div> 로 감싼다) * 이미지들의 서로 다른 세로 길이를 하나로 일치시키려면, 대상 이미지의 가로 길이 = (기준 이미지 원본 세로 / 가로) / (대상 이미지 원본 세로 / 가로) * 기준 이미지의 원하는 가로 길이 (소수점 둘째까지) 테이블로 좌우 나누어 자료 넣기 (브라우저 창의 폭이 줄어도 무조건 한 행에 표시됨) <table class="txc-table" style="border-collapse: collapse; margin: 0 auto; text-align: center;"><tbody><tr> <td>가나</td> <td>다라</td> </tr></tbody></table> → [1]가나와 다라에 이미지 삽입 [2]자료 간 여백 <td...

* 웹 브라우저는 & 기호를 보면 특수 문자가 시작된다고 인식한다. & 기호는 &amp; * < 기호를 표현하려면 &lt; 코드를, > 기호를 표현하려면 &gt; 코드를 쓴다 * "(큰 따옴표)는 &quot; 코드, '(작은 따옴표)는 &apos; / 띄어쓰기는 &nbsp; &ensp; &emsp; * 텍스트 연한 회색(주석)은 <span style="color: #999999;"></span> 으로 감싼다. 더 연한 회색은 #b0b0b0; 어두운 주황색(인용)은 #b45f06; 다크 블루(강조,소제목)는 #0b5394; 미디엄 블루는 #2b6cb0; 자주색은 #800180; 어두운 초록색은 #38761d; 에메랄드 초록은 #2ecc71; 어두운 빨강은 #990000; 연한 빨강은 #ff6666; * 이미지 삽입은 [1]<div class="separator" style="clear: both; text-align: center; "></span>로 감싸고 [2]<a href=에서 style=" " 속성 삭제 및 target="_blank" 새 창으로 열기 추가 [3]<img에 style="margin: -3px -3px;" 추가(Dynamic Views 기준) * 유튜브 영상 삽입은 [1]<iframe의 width="320" height="266" 을 style="width: 500px; aspect-ratio: 원본가로크기 / 원본세로크기; margin: 2px 2px;" 로 교체 [2] <div class="separator" style="clear: both; te...