블로거 HTML 작성 팁 (Contempo Light 테마 기준)
* 웹 브라우저는 & 기호를 보면 특수 문자가 시작된다고 인식한다(엔티티). &를 표현하려면 &
* < 기호는 < 코드를, > 기호는 > 코드를 쓴다
* "(큰 따옴표)는 " 코드, '(작은 따옴표)는 ' / 공백은    
* 텍스트 연한 회색(주석)은 <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;"로 교체
(글 맨 위에 영상을 배치할 땐 div style에 margin-top: 10px; 추가)
* 좌우 여백은 img, iframe의 style에 margin: 0 10px; 아래 여백만 조절은 margin-bottom: -2px;
* 맨 앞 이미지가 아닌 것을 대표 이미지로 하고 싶으면 맨 앞에 <div style="display:none;"><img src="이미지 주소"/></div>를 배치한다
* 본문 나누기는 <style>body { overflow-x: clip; }</style> <hr style="border: 0; border-top: 10px solid #eee; width: 100vw; margin-left: calc(50% - 50vw);"> (style body는 앞 한 번만)
- 가로선은 <hr style="border: 0; border-top: 1px solid #bbb;"> 넣기. solid 외 dotted, dashed, double(두 줄). 색상은 000→999→aaa→fff 순으로 연해짐. border-top이 선 두께
* 이미지 밑 설명은 <span style="color: #999999; display: block; text-align: center; font-size: 13px; margin-top: -4px;"></span>으로 감싼다
* 문장 줄 간격을 줄이려면 <div style="line-height: 1.3;"></div>로 감싼다(1.3→1.1 방향으로 촘촘해지고 1.8→2 방향으로 벌어짐) / 중앙 정렬은 <div style="text-align: center;"></div>
* 일부를 말아 놓으려면 <details><summary style="color: #2ecc71;">더 읽기..</summary>내용</details>로 감싼다
Comments
Post a Comment