Posts

블로거 Contempo Light 테마 수정 | Modifying Blogger Contempo Light Theme

Image
블로거 테마에서 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 { ...

블로거 HTML 작성 팁 (Contempo Light 테마 기준)

Image
* 웹 브라우저는 & 기호를 보면 특수 문자가 시작된다고 인식한다(엔티티). &를 표현하려면 &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;" 로 교체  ...

블로거 다이나믹 뷰 테마 날짜 툴팁 수정 | Modifying date tooltip in Blogger Dynamic Views Theme

Image
정말 정말 오래 사용해왔던 블로거 다이나믹 뷰(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, ...

HTML 좌우로 이미지 배치하기, 글상자 만들기

Image
여러 이미지 한 행에 넣기 (브라우저 창의 폭이 줄면 이미지가 줄바뀜) <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...

블로거 HTML 작성 팁 – 다이나믹 뷰(Dynamic Views) 테마 기준

Image
* 웹 브라우저는 & 기호를 보면 특수 문자가 시작된다고 인식한다. & 기호는 &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...

사용자 데이터를 유지하면서 루팅한 넥서스의 안드로이드 버전을 업데이트하는 방법

최근에 안드로이드 5.1.1 버전의 OTA가 떴다. 하지만 내 넥서스 7 (2012)은 루팅해서 사용 중이었기 때문에 업데이트가 적용되지 않는다. 이 글은  Nexus Root Toolkit 을 이용해 루팅해서 사용 중인 넥서스의 사용자 데이터를 지우지 않고 안드로이드 버전을 업그레이드하는 방법이다. 1. 롤리팝에서는 루팅된 상태에서는 OTA 업데이트가 불가능하다고 한다. 예를 들어 Nexus Root Toolkit의 "Advanced Utilities"의 "Sideload OTA Update"를 이용해 OTA를 적용하더라도 업데이트 중 오류가 발생한다. 2. 그래서 Nexus Root Toolkit의 "Flash Stock + Unroot" 메뉴를 사용한다.  이 때 “Force Flash”와 “No Wipe Mode”, 즉 사용자 데이터를 삭제하지 않는다는 옵션을 반드시 체크 해야 사용자 데이터가 삭제되지 않는다. 이 때 팩토리 이미지는  https://developers.google.com/android/nexus/images 에서 다운받아 두거나 Nexus Root Toolkit에서 자동으로 다운로드하도록 선택할 수 있다. 나는 후자로 선택했다. 3. 한참 동안의 부팅 과정을 거친 후 이제 다시 Nexus Root Toolkit를 이용해서 "루팅"하면 된다. 잘 모르고 따라하면 위험하다. 기기 모델과 현재 버전이 다르거나 하면 기기가 벽돌이 될 수 있다. - 이 글은 Nexus Root Toolkit 홈페이지의 FQA 중 "Can I still take an OTA after I unlock and root?"를 참고한 것이다. (2015. 3. 12. 관련한 Google+ 글) - Nexus Root Toolkit 2.0.5로 작업함 *** 참고로  Nexus Root Toolkit 홈페이지의  FQA  중 " ...

데스크톱 크롬에서 안드로이드 앱을 사용해보자

Image
아래 팁은 새로운 크롬 확장을 설치하면 되는 것으로 개선되었습니다. ARC Welder 페이지를 참고하시길.. ------ ------ ------ 지난 9월에 +광파리 님의 포스트를 통해 구글이 안드로이드 앱을 크롬북에 올렸다는 소식 을 들은 바 있는데, 며칠 전 PC의 데스크톱 크롬 브라우저에서 안드로이드 앱을 실행할 수 있다는 얘기를 듣고 직접 해보았다. ( 클리앙 - 크롬 브라우져에서 안드로이드앱 실행 방법 ) 위 사이트에서 크롬에서 안드로이드 앱 실행 방법을 배워도 되고 계속 내 글을 읽어나가도 된다. 일단 아래 그림에서 보듯이 바탕화면에 Flipboard가 별도 프로그램처럼 실행된다. 여타의 다른 크롬 앱처럼 작동하는데 큰 버그 없이 (내 경우 Flipboard 앱은 기사 본문을 불러올 때 다운되는 문제가 있고 또 64 비트 크롬에선 작동이 안된다) 잘 쓰고 있다. 안드로이드 게임도 이렇게 해서 데스크톱에서 실행할 수 있다 고 하니 난리나겠다. 안드로이드 Flipboard 앱을 크롬에서 실행하는 것으로 설명하겠다. 맨 처음 찾아가야할 곳이 아래 ARChon Custom Runtime 사이트이다. 그림에서 나와 있는 Runtime 종류 중 자신에게 맞는 것을 골라 다운받는다. 사실 그 이전에 크롬이 최신 버전인지 확인해야 한다. chrome://chrome/ 최소한 37 버전 이상이어야 한다고 나와 있다. 압축 파일을 다운받은 후 일정한 곳에 압축을 푼다. 크롬을 실행한 후 주소창에 chrome://extensions/ 을 입력하여 Extensions 페이지를 연 다음 오른쪽 위 Developer mode를 체크한다. 그러면 나오게 되는 Load unpacked extension 버튼을 클릭한 후 아까 압축을 푼 Runtime이 있는 경로를 지정하면 아래 그림처럼 ARChon Custom Runtime가 구동된다. 이제 크롬에서 안드로이드 앱을 실행할 환경이 마련되었으니 다음으로 안드로이드 앱을 크롬에서 실...

Popular posts from this blog

HTML 좌우로 이미지 배치하기, 글상자 만들기

블로거 Contempo Light 테마 수정 | Modifying Blogger Contempo Light Theme

우리말 바르게 쓰기 3 - '띠고'와 '띄고'와 '띠우고'