블로그스팟 글 작성시 유익한 HTML 코드들 모음집

글 작성시 유익한 HTML 코드 모읍집

블로그스팟 글쓰기에서 사용할 수 있는 간단한 유용코드 모음

주기적으로 업데이트 예정

1. 표 만들기

아래의 코드로 작성 복붙

data-ke-align : 줄 모양

background-color : 색상 코드

border-collapse: 표 테두리 분리 여부

width : 가로 크기 (100% 일경우 전체크기로 자동조정)

text-align : 폰트 정렬

color : 폰트 색상

여러 줄을 표시하고 싶을 경우 : width 100/n%

가로줄 : <td>

세로줄 : <tr>

셀 합치기 1 : 세로 <rowspan=""> 합칠 수 입력

셀 합치기 2 : 가로 <colspan=""> 합칠 수 입력

설치 CSS

<head><b:skin> /* 아래 */

/* Table */

.post-body table{

width:100%;

border-radius:10px;

overflow:hidden;

border-collapse: collapse;
box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
border: 1px solid rgba(0,0,0,1);
}
.post-body table td{
border:1px solid rgba(0,0,0,0.7);
padding:7px 10px;
text-align:left;
vertical-align:middle;
color:#57606f;
font-size:14px;
}
.post-body table th{
color:#222;
border:1px solid rgba(0,0,0,0.7);
padding:7px 10px;
text-transform:initial;
text-align:left;
vertical-align:middle;
font-size:14px;
}

표 코드 가로 2행 세로 2열

<tbody>

</tr>

<tr>

</tr>

</tbody>

</table>

표 코드 가로 세로 합치기

<tbody>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

표 시각화

글쓰는 곳 1	글쓰는 곳 2
글쓰는 곳 3	글쓰는 곳 4

표 셀 합치기 시각화

가로 합치기
세로 합치기	글쓰는 곳 1
	글쓰는 곳 2

2. 게시글 썸네일(배너) 대표 설정하기

작성 위치 : HTML 보기 -> 최상단

이미지 : URL 주소 (없을 경우 업로드하여 이미지 주소 복사 후 붙여 넣기)

display : none (숨기기)

<img src="이미지 URL 주소" style="display: none;" />

3. 지도 URL 첨부하기

구글 또는 카카오만 가능 네이버 지원 안함

방법 : 해당 맵 사이트 접속 *카카오맵 예시 -> HTML 태그 복사

수정하고 싶을 때 :
1). 카카오맵을 끌어오면 하단에 링크가 생기는데 지워서 올리면 깔금하다.

2). img width : 504 -> 100% (가로 풀사이즈)

3).

<a href="시청주소" target="_blank"><img width="~~504~~100%" height="310" src="지도이미지" style="border:1px solid #ccc">
</a>
삭제
<div class="hide" style="overflow:hidden;padding:7px 11px;border:1px solid #dfdfdf;border-color:rgba(0,0,0,.1);border-radius:0 0 2px 2px;background-color:#f9f9f9;width:482px;">
<strong style="float: left;"><img src="카카오맵로고" width="72" height="16" alt="카카오맵"></strong>
<div style="float: right;position:relative"><a style="font-size:12px;text-decoration:none;float:left;height:15px;padding-top:1px;line-height:15px;color:#000" target="_blank" href="지도크게보기링크">지도 크게 보기</a>~~</div>~~ </div>

카카오맵 예시안 (원본)

카카오맵 예시안 (수정)

상위단계 : 게시글 자체에서 지도를 움직일 수 있다.

주의사항 : 편집글에서는 동영상 마크 처럼 보이지만 우측상단 '미리보기'에서 볼 수있다. 경도와 위도를 반드시 기입해야 한다.

경도, 위도 구하는법 : 구글맵에 해당 지역을 클릭하면 경도 위도가 나온다

URL 넣는법 : https://map.kakao.com/link/map/주소

ex. 서울특별시 중구 세종대로 110

4. 추적 가능 선택 목차 만들기

추적 ID : 자유롭게 대신 동일 대상 (아이디는 중복되면 안됨)

최상단 작성할 추적 목록 대상 = a href= "#1" or "#target"

*반드시 #을 넣을것

본문 목록 : id="1"

제목 : H2, H3 각각 다르므로 취향에 따라

예시안

<h4><a href="#1"><b><span style="color: black;">1. 표만들기</span></b></a></h4>


<h4 id="1">1. 표 만들기</h4>

5. 줄간격 설정하기

줄간격 : 줄 간격이 너무 좁아 보인다면 인위적으로 늘릴 수 있음.

전체를 바꾸고 싶으면 테마 설정에서 설정해야하지만 특정부분만 바꾸고싶다하면,

다음 코드로 기입하면됨

6. 인용문 꾸미기

CSS 설치 필요

background-clor : 배경색 rgba(빨강,초록,파랑,투명도) or cmyk(#000000)

border-left : 왼쪽 줄 제거 또는 두께 설정 및 색상 위와 동일

padding : 테두리 사이 거리

CSS (테마 HTML 편집)

<head>
<b:skin><![CDATA[ /* 아래 */
blockquote::before,blockquote::after {background: transparent !important;box-shadow: none !important;}
]]></b:skin> /*사이 */

HTML

문구 넣기.

7. 가로 스크롤 이미지 넣기

가로스크롤 되는 이미지 목록 CSS 설치 필요.

편집글에서는 기능이 안되어 보이나, 미리보기에서 확인 가능

CSS (테마 HTML 편집)

<head>
<b:skin><![CDATA[ /* 아래 */
.scrollImage {display: flex; flex-wrap: nowrap; justify-content: flex-start; position: relative; width: calc(100% + 40px); left: -20px; padding: 0 20px; overflow-y: hidden; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; -ms-overflow-style: none; -webkit-overflow-scrolling: touch;gap:4px}
.scrollImage > * {display: block;flex-shrink: 0;width: 55%;max-width: 500px;height:200px;margin: 0 15px 0 0;scroll-snap-align:center;overflow: hidden;border-radius: 10px;}
.scrollImage > * img { height: 100%; width: 100%; display: block; object-fit: contain;}
.scrollImage > *:last-of-type {margin-right: 0;}
.scrollImage:after {content: '';display: block;flex-shrink: 0;align-self: stretch;padding-left: 20px;}
@media screen and (max-width: 480px) {.scrollImage > * { width: 65%;height:150px}
}
]]></b:skin> /*사이 */

/* 선택사항 Lazy load가 있을 경우 하단에 추가 입력 }); 마감 필수 확인 */
$(".scrollImage .wable-scroll").lazyload({ placeholder: "https://1.bp.blogspot.com/-dFdSHqssecY/W9ilhJ4T23I/AAAAAAAABIM/2c3fy80E7OMxLuQXwQNsdtn1dYDnKeRcwCLcBGAs/s12/layer.png", effect: "fadeIn", threshold: 200, event: "scroll", container: window }); });

HTML (class "wable-scroll" 이미지 느리게 나오는 현상 개선 JS 코드)

8. 2행 이미지 넣기

2행으로된 이미지 레이아웃 설정 가능 CSS 설치 필요

미리보기 확인 가능

CSS (테마 HTML 편집)

<head>
<b:skin><![CDATA[ /* 아래 */
.gridImage { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; margin: 1.7em 0;}
.gridImage > *:nth-child(2n) { margin-right: 0;}
.gridImage > * { width: calc(50% - 7.5px); height:200px;margin-right: 15px; margin-bottom: 15px; border-radius: 10px; overflow: hidden; position: relative;}
.gridImage > * img { width: 100%; height: 100%; object-fit: cover; display: block;}
.gridImage > *:last-of-type,
.gridImage > *:nth-last-of-type(2) { margin-bottom: 0;}
@media screen and (max-width: 480px) {.gridImage > * { width: 50%;height:150px}
]]></b:skin> /*사이 */

HTML

9. 좌우 슬라이더 이미지

좌우 슬라이더(비교) 이미지 설정 가능 CSS 설치 필요

미리보기 확인 일부 가능 (좌측 이미지 사이즈 측정 불가 *게시후 정상반영)

CSS (테마 HTML 편집)

<head><style> /* 아래 */
.wableslider-wrapper { position: relative; width: 100%; height: 100%; overflow: hidden; margin: 2rem auto; border-radius: 8px; box-shadow: 0 0 12px rgba(0,0,0,0.2); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none; }
.wableslider-container { position: relative; width: 100%; height: auto; }
.wableslider-container .right-img { position: relative; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none; }
.wableslider-overlay { position: absolute; top: 0; left: 0; width: 50%; height: 100%; overflow: hidden; z-index: 2; }
.wableslider-overlay .left-img { position: absolute; top: 0; left: 0; max-width: none; object-fit: cover; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none; }
.wableslider-handle { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 2px; height: 100%; background: #F2F2F2; cursor: ew-resize; z-index: 10; }
.wableslider-handle::before,
.wableslider-handle::after { position: absolute; top: 50%; transform: translateY(-50%); width: 0; height: 0; transition: opacity 0.2s ease-in-out; opacity: 1; font-size: 20px; color: #F2F2F2; font-weight: bold; width: auto; height: auto; }
.wableslider-handle::before { content: "\003C" ; left: -15px; border-width: 6px 10px 6px 0; border-color: transparent #F2F2F2 transparent transparent; }
.wableslider-handle::after { content: "\003E" ; right: -15px; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #F2F2F2; }
</style> /*사이 */

<script></script> /*라인 아래나 위 사이 자유롭게 신규 추가 */
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
document.addEventListener('DOMContentLoaded', function () { const allWrappers = document.querySelectorAll('.wableslider-wrapper'); let activeSlider = null; allWrappers.forEach(wrapper => { const overlay = wrapper.querySelector('.wableslider-overlay'); const handle = wrapper.querySelector('.wableslider-handle'); const leftImage = wrapper.querySelector('.wableslider-overlay .left-img'); function setLeftImageDimensions() { if (!wrapper || !leftImage) return; const wrapperWidth = wrapper.clientWidth; const wrapperHeight = wrapper.clientHeight; leftImage.style.width = wrapperWidth + 'px'; leftImage.style.height = wrapperHeight + 'px'; leftImage.style.left = '0px'; }
if (leftImage.complete) { setLeftImageDimensions(); } else { leftImage.onload = setLeftImageDimensions; } window.addEventListener('resize', setLeftImageDimensions); handle.addEventListener('mousedown', () => { activeSlider = { wrapper, overlay, handle }; });
handle.addEventListener('touchstart', (e) => { activeSlider = { wrapper, overlay, handle }; }); });
const onDrag = (e) => { if (!activeSlider) return; const { wrapper, overlay, handle } = activeSlider; const rect = wrapper.getBoundingClientRect(); let x = e.clientX || (e.touches && e.touches[0].clientX); let percent = ((x - rect.left) / rect.width) * 100; percent = Math.max(0, Math.min(100, percent)); overlay.style.width = percent + '%'; handle.style.left = percent + '%'; };
document.addEventListener('mouseup', () => { activeSlider = null; }); document.addEventListener('touchend', () => { activeSlider = null; });
document.addEventListener('mousemove', onDrag); document.addEventListener('touchmove', onDrag, { passive: false });
});
//]]>
</script>
</b:if>

HTML