Posts

Showing posts from August, 2026

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...

Popular posts from this blog

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

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

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