블로거 HTML 작성 팁 – 다이나믹 뷰(Dynamic Views) 테마 기준
* 웹 브라우저는 & 기호를 보면 특수 문자가 시작된다고 인식한다. & 기호는 &
* < 기호를 표현하려면 < 코드를, > 기호를 표현하려면 > 코드를 쓴다
* "(큰 따옴표)는 " 코드, '(작은 따옴표)는 ' / 띄어쓰기는    
* 텍스트 연한 회색(주석)은 <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; text-align: center; margin: 3px 0;"></div>로 감싼다(Dynamic Views 기준)
* 좌우 여백을 주려면 img, iframe의 style=에 margin: 0 10px;을, 아래 여백만 조절하려면 margin-bottom: -2px;을 추가 / 글 맨 앞에 영상을 배치할 경우 위 여백 margin-top: 13px;을 추가한다
* 맨 앞 이미지가 아닌 것을 대표 이미지로 하고 싶으면 맨 앞에 <div style="display:none;"><img src="이미지 주소"/></div>를 배치한다
* 연한 가로선은 <hr style="border: 0; border-top: 0.5px solid #ccc;"> 점선은 solid 대신 dotted을, 대시선은 dashed로 교체. 색상은 bbb→ccc→ddd→eee 순으로 연해짐. border-top이 선 두께
* 이미지 밑 설명은 <span style="color: #999999; display: block; text-align: center; margin-top: -5px; margin-bottom: 6px; font-size: 13px;"></span>으로 감싼다
* 문장 줄 간격을 줄이려면 <p style="line-height: 1.1; margin: 0;"></p>로 감싼다(1.3→1.1 방향으로 촘촘해지고 1.8→2.2 방향으로 벌어짐) / 중앙 정렬은 <p style="text-align: center; margin: 0;"></p>
* 일부를 말아 놓으려면 <details><summary style="color: #2ecc71;">더 읽기..</summary>내용</details>로 감싼다
Comments
Post a Comment