'폴더 스타일' 글상자, 인용구 만들기.
티스토리나 다른 블로그 플랫폼에서 '글상자 및 인용구'를 사용하는 이유는 주로 시각적 효과와 구조적 명확성 때문입니다.
- 강조: 중요한 정보나 주요 메시지를 강조할 수 있습니다. 글상자를 사용하면 독자의 눈길을 사로잡고 주의를 집중시킬 수 있습니다.
- 가독성: 복잡하거나 길게 나열된 정보를 정리해서 더 쉽게 읽고 이해할 수 있도록 도와줍니다.
- 시각적 흥미: 글의 시각적인 디자인을 향상시켜 독자의 관심을 유지합니다. 다양한 스타일의 글상자를 사용하면 블로그의 전반적인 디자인이 더 매력적으로 보일 수 있습니다.
- 정보 분류: 서로 다른 주제나 섹션을 구분해서 더 명확하게 표시할 수 있습니다.
따라서 티스토리나 다른 블로그 플랫폼에서 '글상자'를 사용하는 것은 인용된 내용을 명확하게 표시하고 시각적으로 강조하는 데 도움이 되며, 웹 표준을 준수함으로써 전반적인 웹사이트의 품질을 높일 수 있습니다.
📌 알림
웹서핑을 하다 보면 제가 만든 코드, 태그 속성, 그리고 오탈자까지 그대로 가져가 본인 작성한 글인 것처럼 사용하는 경우가 있습니다. 코드를 가져가는 것까지는 막을 수 없지만, 제 자료를 사용해 관련된 포스팅을 할 때는 출처를 꼭 밝혀 주시기 바랍니다.
그 외 개인적인 사용은 자유롭게 하시면 됩니다.
728x90
글상자, 인용구 HTML 코드
(border) 테두리 스타일
원하는 선 스타일을 'border: solid 1px #bbb'라고 쓰여있는 부분에 바꿔 적으면 됩니다.
선 위치
태그 속성
px와 em은 모두 크기 입니다.(16px → 1em, 18px → 1.1em)
색상 코드는 아래 '색상표' 페이지에서 확인하시면 됩니다.
형광, 파스텔, 그라데이션 색상표와 컬러 코드 사이트
형광, 파스텔, 그라데이션 색상표와 컬러 코드 사이트 블로그의 소제목에 사용할 수 있는 색상표와 사이트입니다. 색상을 잘 이용하면 작은 차이지만 좀 더 고급스럽고, 멋지게 블로그를 만들
galam.tistory.com
폴더 스타일 글상자 HTML 서식 모음
- 인용구 내 본문의 글자 색, 크기, 위치 등은 티스토리의 에디터에서 수정할 수 있습니다.
- 폴더 상단의 제목도 글자 색, 굵기 등은 티스토리의 에디터에서 수정할 수 있으며, 불필요할 경우 삭제할 수 있습니다, 가로 크기도 style="width: 150px;의 치수를 변경하여 수정할 수 있습니다.
폴더 스타일 글상자 1
폴더 1
내용
https://galam.tistory.com/
<div style="width: 150px; height: 0px; margin: 0.5em 0em 0em 0em; padding: 0px 20px; border-bottom: 35px solid #f8c754; border-right: 35px solid rgba(0,0,0,0); border-radius: 10px 0px 0px 0px;"><b><span style="position: relative; bottom: -8px; font-size: 1em; color: #000;">폴더 1</span></b></div>
<div style="background: #feeeae; border: 2px solid #f8c754; margin-top: 0px; margin-bottom: 15px; padding: 15px 20px 15px 20px; border-radius: 0px 10px 10px 10px;">
<p data-ke-size="size16">내용</p>
<p data-ke-size="size16">https://galam.tistory.com/</p>
</div>
폴더 2
내용
https://galam.tistory.com/
<div style="width: 150px; height: 0px; margin: 0.5em 0em 0em 0em; padding: 0px 20px; border-bottom: 35px solid #02343F; border-right: 35px solid rgba(0,0,0,0); border-radius: 10px 0px 0px 0px;"><b><span style="position: relative; bottom: -8px; font-size: 1.1em; color: #f0edcc;">폴더 2</span></b></div>
<div style="background: #F0EDCC; border: 2px solid #02343F; margin-top: 0px; margin-bottom: 15px; padding: 15px 20px 15px 20px; border-radius: 0px 10px 10px 10px;">
<p data-ke-size="size16"><span style="color: #02343f;">내용</span></p>
<p data-ke-size="size16"><b><span style="color: #02343f;">https://galam.tistory.com/</span></b></p>
</div>
폴더 3
내용
https://galam.tistory.com/
<div style="width: 150px; height: 0px; margin: 0.5em 0em 0em 0em; padding: 0px 20px; border-bottom: 35px solid #07553B; border-right: 35px solid rgba(0,0,0,0); border-radius: 10px 0px 0px 0px;"><b><span style="position: relative; bottom: -8px; font-size: 1.1em; color: #CED46A;">폴더 3</span></b></div>
<div style="background: #CED46A; border: 2px solid #07553B; margin-top: 0px; margin-bottom: 15px; padding: 15px 20px 15px 20px; border-radius: 0px 10px 10px 10px;">
<p data-ke-size="size16">내용</p>
<p data-ke-size="size16"><b>https://galam.tistory.com/</b></p>
</div>
폴더 스타일 글상자 2
폴더 4
내용
https://galam.tistory.com/
<div style="width: 150px; height: 0px; margin: 0.5em 0em 0em 0em; padding: 0px 20px; border-bottom: 35px solid #815854; border-right: 35px solid rgba(0,0,0,0); border-radius: 10px 0px 0px 0px;"><b><span style="position: relative; bottom: -13px; font-size: 1.1em; color: #F9EBDE;">폴더 4</span></b></div>
<div style="background: #F9EBDE; border-style: solid; border-color: #815854; border-width: 10px 2px 2px 2px; margin-top: 0px; margin-bottom: 15px; padding: 15px 20px 15px 20px; border-radius: 0px 10px 10px 10px;">
<p data-ke-size="size16">내용</p>
<p data-ke-size="size16">https://galam.tistory.com/</p>
</div>
폴더 5
내용
https://galam.tistory.com/
<div style="width: 150px; height: 0px; margin: 0.5em 0em 0em 0em; padding: 0px 20px; border-bottom: 35px solid #A4193D; border-right: 35px solid rgba(0,0,0,0); border-radius: 10px 0px 0px 0px;"><b><span style="position: relative; bottom: -13px; font-size: 1.1em; color: #FFDFB9;">폴더 5</span></b></div>
<div style="background: #FFDFB9; border-style: solid; border-color: #A4193D; border-width: 10px 2px 2px 2px; margin-top: 0px; margin-bottom: 15px; padding: 15px 20px 15px 20px; border-radius: 0px 10px 10px 10px;">
<p data-ke-size="size16"><span style="color: #A4193D;">내용</span></p>
<p data-ke-size="size16"><b><span style="color: #A4193D;">https://galam.tistory.com/</span></b></p>
</div>
폴더 6
내용
https://galam.tistory.com/
<div style="width: 150px; height: 0px; margin: 0.5em 0em 0em 0em; padding: 0px 20px; border-bottom: 35px solid #2C5F2D; border-right: 35px solid rgba(0,0,0,0); border-radius: 10px 0px 0px 0px;"><b><span style="position: relative; bottom: -13px; font-size: 1.1em; color: #b4d682;">폴더 6</span></b></div>
<div style="background: #b4d682; border-style: solid; border-color: #2C5F2D; border-width: 10px 2px 2px 2px; margin-top: 0px; margin-bottom: 15px; padding: 15px 20px 15px 20px; border-radius: 0px 10px 10px 10px;">
<p data-ke-size="size16"><span style="color: #2c5f2d;">내용</span></p>
<p data-ke-size="size16"><b><span style="color: #2c5f2d;">https://galam.tistory.com/</span></b></p>
</div>
폴더 스타일 글상자 3
폴더 7
https://galam.tistory.com/
<div style="width: 150px; height: 0px; margin: 0.5em 0em 0em 0em; padding: 0px 20px; border-bottom: 35px solid #F2AA4C; border-right: 35px solid rgba(0,0,0,0); border-radius: 10px 0px 0px 0px;"></div>
<div style="background: #fff; border: 5px solid #F2AA4C; margin-top: 0px; margin-bottom: 15px; padding: 15px 20px 15px 20px; border-radius: 0px 10px 10px 10px;">
<p data-ke-size="size16"><span style="font-weight: bold; font-size: 1.1em;">폴더 7</span></p>
<p data-ke-size="size16">https://galam.tistory.com/</p>
</div>
폴더 8
https://galam.tistory.com/
<div style="width: 150px; height: 0px; margin: 0.5em 0em 0em 0em; padding: 0px 20px; border-bottom: 35px solid #195190; border-right: 35px solid rgba(0,0,0,0); border-radius: 10px 0px 0px 0px;"> </div>
<div style="background: #fff; border: 5px solid #195190; margin-top: 0px; margin-bottom: 15px; padding: 15px 20px 15px 20px; border-radius: 0px 10px 10px 10px;">
<p data-ke-size="size16"><span style="font-weight: bold; font-size: 1.1em;">폴더 8</span></p>
<p data-ke-size="size16">https://galam.tistory.com/</p>
</div>
폴더 9
https://galam.tistory.com/
<div style="width: 150px; height: 0px; margin: 0.5em 0em 0em 0em; padding: 0px 20px; border-bottom: 35px solid #343148; border-right: 35px solid rgba(0,0,0,0); border-radius: 10px 0px 0px 0px;"> </div>
<div style="background: #fff; border: 5px solid #343148; margin-top: 0px; margin-bottom: 15px; padding: 15px 20px 15px 20px; border-radius: 0px 10px 10px 10px;">
<p data-ke-size="size16"><span style="font-weight: bold; font-size: 1.2em;">폴더 9</span></p>
<p data-ke-size="size16">https://galam.tistory.com/</p>
</div>728x90
폴더 스타일 글상자 4
폴더 10
내용
https://galam.tistory.com/.
<div style="width: 150px; height: 0px; margin: 0.5em 0em 0em 0em; border-bottom: 35px solid #00539C; border-right: 35px solid rgba(0,0,0,0); border-radius: 10px 0px 0px 0px;"><span style="padding: 0px 20px; position: relative; bottom: -12px; font-weight: bold; font-size: 1.1em; color: #fff;">폴더 10</span></div>
<div style="background: #00539C; margin: 0em 0em 1em 0em; padding: 15px 0px 0px 0px; border-radius: 0px 10px 20px 20px;">
<div style="background: #fff; border: 2px solid #00539C; padding: 15px 20px 15px 20px; border-radius: 10px;">
<p data-ke-size="size16"><span style="font-weight: bold;; font-size: 1.05em;">내용</span></p>
<p data-ke-size="size16">https://galam.tistory.com/.</p>
</div>
</div>
폴더 11
내용
https://galam.tistory.com/.
<div style="width: 150px; height: 0px; margin: 0.5em 0em 0em 0em; border-bottom: 35px solid #D7C49E; border-right: 35px solid rgba(0,0,0,0); border-radius: 10px 0px 0px 0px;"><span style="padding: 0px 20px; position: relative; bottom: -12px; font-weight: bold; font-size: 1.1em; color: #444;">폴더 11</span></div>
<div style="background: #D7C49E; margin: 0em 0em 1em 0em; padding: 15px 0px 0px 0px; border-radius: 0px 10px 20px 20px;">
<div style="background: #fff; border: 2px solid #D7C49E; padding: 15px 20px 15px 20px; border-radius: 10px;">
<p data-ke-size="size16"><span style="font-weight: bold;; font-size: 1.05em;">내용</span></p>
<p data-ke-size="size16">https://galam.tistory.com/.</p>
</div>
</div>
폴더 12
https://galam.tistory.com/.
<div style="width: 150px; height: 0px; margin: 0.5em 0em 0em 0em; border-bottom: 30px solid #2C5F2D; border-right: 35px solid rgba(0,0,0,0); border-radius: 10px 0px 0px 0px;"> </div>
<div style="background: #2C5F2D; margin: 0em 0em 1em 0em; padding: 15px 0px 0px 0px; border-radius: 0px 10px 20px 20px;">
<div style="background: #fff; border: 2px solid #2C5F2D; padding: 15px 20px 15px 20px; border-radius: 10px;">
<p data-ke-size="size16"><span style="font-weight: bold; ; font-size: 1.05em;">폴더 12</span></p>
<p data-ke-size="size16">https://galam.tistory.com/.</p>
</div>
</div>
인용구, 글상자 관련글 바로가기
'▸티스토리 이야기/인용구, 글상자 꾸미기' 카테고리의 글 목록
'▸티스토리 이야기/인용구, 글상자 꾸미기' 카테고리의 글 목록
우리들의 일상 속 소소한 이야기를 나누고 티스토리 꾸미기 등도 함께 하는 공간이 되기를 바랍니다.
galam.tistory.com
"쿠팡 파트너스 활동을 통해 일정액의 수수료를 제공받습니다"
반응형
'▸티스토리 이야기 > 인용구, 글상자 꾸미기' 카테고리의 다른 글
| 티스토리 꾸미기 | 둥근 테두리 글상자 HTML 서식 모음 #2 (0) | 2025.02.15 |
|---|---|
| 티스토리 꾸미기 | 둥근 테두리 글 상자 HTML 서식 모음 #1 (3) | 2025.02.15 |
| 티스토리 꾸미기 | 포스트잇 메모장 스타일 글상자 HTML 서식 모음집 (5) | 2025.02.13 |
| 티스토리 꾸미기 | 책갈피 스타일 글상자 HTML 서식 모음집 (4) | 2025.02.13 |
| 티스토리 꾸미기 | 말풍선 인용구 만들기 (2) | 2024.05.08 |