2025-05-18
블로그스팟 글 작성시 유익한 HTML 코드들 모음집
글 작성시 유익한 HTML 코드 모읍집
블로그스팟 글쓰기에서 사용할 수 있는 간단한 유용코드 모음
주기적으로 업데이트 예정
공통사항 :
- CSS 설치는 와블테마에 기본 적용되어 있으므로, 따로 제공 X
- 버전 표기 참고
- 곧 와블 무료 테마 V1은 코드 모음집에서 제외될 예정
와블 테마 다운로드 경로
수익형 한국 무료 테마 V3 : Wable Theme V3
수익형 한국 무료 테마 V2 : Wable Theme V2
1. 표 만들기
아래의 코드로 작성 복붙
data-ke-align : 줄 모양
background-color : 색상 코드
border-collapse: 표 테두리 분리 여부
width : 가로 크기 (100% 일경우 전체크기로 자동조정)
text-align : 폰트 정렬
color : 폰트 색상
여러 줄을 표시하고 싶을 경우 : width 100/n%
가로줄 : <td>
세로줄 : <tr>
셀 합치기 1 : 세로 <rowspan=""> 합칠 수 입력
셀 합치기 2 : 가로 <colspan=""> 합칠 수 입력
표 코드 가로 2행 세로 2열
<table> <tbody> <tr> <th style="width: 50%;">글쓰는 곳 1</th> <th style="width: 50%;">글쓰는 곳 2</th> </tr> <tr> <td style="text-align: center; width: 50%;">글쓰는 곳 3</td> <td style="text-align: center; width: 50%;">글쓰는 곳 4</td></tr> </tbody> </table>
표 코드 가로 세로 합치기
<table> <tbody> <tr> <th colspan="2">가로 합치기</th> </tr> <tr> <th rowspan="2">세로 합치기</th> <td style="text-align: center; width: 50%;">글쓰는 곳 1</td> </tr> <tr> <td style="text-align: center; width: 50%;">글쓰는 곳 2</td> </tr> </tbody> </table>
표 시각화
| 글쓰는 곳 1 | 글쓰는 곳 2 |
|---|---|
| 글쓰는 곳 3 | 글쓰는 곳 4 |
표 셀 합치기 시각화
| 가로 합치기 | |
|---|---|
| 세로 합치기 | 글쓰는 곳 1 |
| 글쓰는 곳 2 | |
2. 게시글 썸네일(배너) 대표 설정하기
작성 위치 : HTML 보기 -> 최상단
이미지 : URL 주소 (없을 경우 업로드하여 이미지 주소 복사 후 붙여 넣기)
display : none (숨기기)
<img src="이미지 URL 주소" style="display: none;" />
3. 추적 가능 선택 목차 만들기
추적 ID : 자유롭게 대신 동일 대상 (아이디는 중복되면 안됨)
최상단 작성할 추적 목록 대상 = a href= "#1" or "#target"
*반드시 #을 넣을것
본문 목록 : id="1"
제목 : H2, H3 각각 다르므로 취향에 따라
예시안
<!-- [ 추적 목록 대상 작성 게시글 기준 최상단 목록에 있음 ] --> <h4><a href="#1"><b><span style="color: black;">1. 표만들기</span></b></a></h4> <!-- [ 작성 된 목록 경로 넣기 1. 표만들기에 있음 ] --> <h4 id="1">1. 표 만들기</h4>
4. 줄간격 설정하기
줄간격 : 줄 간격이 너무 좁아 보인다면 인위적으로 늘릴 수 있음.
전체를 바꾸고 싶으면 테마 설정에서 설정해야하지만 특정부분만 바꾸고싶다하면,
다음 코드로 기입하면됨
<span style="line-height: 200%">5. 줄간격 설정하기</span> <!-- [ ex.2 글씨색상 검정색 ] --> <span style="color: black; line-height: 200%">5. 줄간격 설정하기</span>
5. 인용문 꾸미기
CSS 설치 필요
background-clor : 배경색 rgba(빨강,초록,파랑,투명도) or cmyk(#000000)
border-left : 왼쪽 줄 제거 또는 두께 설정 및 색상 위와 동일
padding : 테두리 사이 거리
Wable V2~3 디자인
문구 넣기.
6. 가로 스크롤 이미지 넣기
가로스크롤 되는 이미지 목록 CSS 설치 필요.
편집글에서는 기능이 안되어 보이나, 미리보기에서 확인 가능
HTML
<figure class="scrollImage"> <img alt="대체 텍스트" title="제목 텍스트" src="이미지주소" /> <img alt="대체 텍스트" title="제목 텍스트" src="이미지주소" /> <img alt="대체 텍스트" title="제목 텍스트" src="이미지주소" /> <img alt="대체 텍스트" title="제목 텍스트" src="이미지주소" /> </figure>
7. 2행 이미지 넣기
2행으로된 이미지 레이아웃 설정 가능 CSS 설치 필요
미리보기 확인 가능
HTML
<figure class="wable-grid"> <img alt="대체 텍스트" src="이미지주소" title="제목 텍스트" width="400" /> <img alt="대체 텍스트" src="이미지주소" title="제목 텍스트" width="400" />
<img alt="대체 텍스트" src="이미지주소" title="제목 텍스트" width="400" />
<img alt="대체 텍스트" src="이미지주소" title="제목 텍스트" width="400" />
</figure>
8. 좌우 슬라이더 이미지
좌우 슬라이더(비교) 이미지 설정 가능 CSS 설치 필요
미리보기 확인 일부 가능 (좌측 이미지 사이즈 측정 불가 *게시후 정상반영)
HTML
<figure class="wable-slider"> <figure class="wable-slider-container"> <img alt="대체텍스트" class="right-img" src="이미지 URL" title="제목텍스트" /> <figure class="wable-slider-overlay"> <img alt="대체텍스트" class="left-img" src="이미지 URL" title="제목텍스트" /> </figure> <div class="wable-slider-handle"></div> </figure> </figure>
예시안
9. 이미지 캡션 기능
이미지 캡션은 이미지 하단에 '설명'을 작성하여 SEO 검색에 더 유리한 방법
이미지 캡션 HTML 태그
<figcaption style="text-align: center;">이미지 설명</figcaption>
이미지 캡션 사용법
- 이미지 HTML 태그 </a> 사이 </figure> 기입
예시안
|
<figure style="text-align: center;"> <a href="https://이미지주소"> <img scr="https://이미지주소"> </a> <figcaption style="text-align: center;">이미지 설명</figcaption> </figure> |
10. 목록 기능
목록 기능 사용법
<ul> <li>글 작성 1</li> <li>글 작성 2</li> <li>글 작성 3</li> </ul>
예시안
- 글작성 1
- 글작성 2
- 글작성 3
11. 복사 버튼 기능
코드 복사 버튼 기능 넣기
관련 링크 : 코드 복사 버튼 기능 넣는 방법
예시 HTML 코드
<div class="code-container">
<div class="code-header">
<button class="copy-button" id="copyBtn1" onclick="copyCode('copyBtn1', 'codeBlock1')">
HTML Copy
</button>
</div>
<div class="code-body">
<pre id="codeBlock1">
안녕하세요!
복사를 해보세요
</pre>
</div>
</div>
