티스토리의 유일한 단점: 사진이 아름답지 못하다.
정렬이 안맞는것을 참지 못하여... 코드를 모아서 올립니다...
여기서 사용되는 사진은 로컬 저장x. 사용할 이미지를 전부 글로 업로드 -> 우클릭 이미지 주소 복사 -> 글 수정 -> html에서 주소 변경 순서로 사용 하셔야 됩니다..!
- 사진 모서리가 둥근게 싫으시면 border ~ 어쩌고 싹 지우시면 됩니다
기본
1. 사진이 여러장인 경우: 빨간선 나올때까지 드래그드랍 <- 사실 이 방법이 제일 깔끔함.
2. 기본: 오른쪽 사진, 왼쪽 텍스트
텍스트 먼저 나오고, 사진은 오른쪽에 배치됩니다. 
<div style="display:flex; align-items:center; gap:12px; flex-wrap:wrap;">
<span style="font-size:16px; line-height:1.6;">
텍스트 먼저 나오고,
사진은 오른쪽에 배치됩니다.
</span>
<img src="이미지_URL" alt="설명"
style="width:120px; height:auto; border-radius:8px; flex:0 0 auto;">
</div>3. 캡션 있는 카드형
<figure style="display:inline-flex; align-items:center; gap:12px; margin:0; flex-wrap:wrap;">
<img src="이미지_URL" alt="설명"
style="width:140px; height:auto; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,.08);">
<figcaption style="font-size:15px; line-height:1.7; color:#333;">
캡션/본문을 여기에 적으세요.
</figcaption>
</figure>굵게
<b> </b>기울임
<i> </i>4. 이미지 크기를 글자 높이에 맞춰서 작거나 크게
<div style="display:flex; align-items:center; gap:8px;">
<img src="이미지_URL" alt="설명" style="height:1.4em; width:auto; vertical-align:middle;">
<span>문장 속 아이콘처럼 딱 붙여 쓰고 싶을 때 이렇게!</span>
</div>5. 사진과 글이 같은 줄에 있도록. <- 얘가 제일 맘에 듭니다
<div style="display: flex; align-items: center; gap: 12px; flex-wrap: wrap;">
<img style="width: 120px; height: auto; border-radius: 8px; flex: 0 0 auto;"
src="https://tse1.mm.bing.net/th/id/OIP.mT0xDqqWpCcm8my_uYkMUwHaLG?pid=Api"
alt="설명" />
<span style="font-size: 16px; line-height: 1.6;">
여기 텍스트를 적으세요. 사진과 글이 같은 줄에 보이고, 화면이 좁아지면 자연스럽게 줄바꿈됩니다.
</span>
</div>
<p data-ke-size="size16"> </p>고급형; 잔재주 부리기
6. 사진 왼쪽 + 오른쪽에 여러 줄 텍스트 블록 (반응형 줄바꿈)
섹션 제목
첫 문단입니다. 여러 줄 텍스트가 들어가도 자동으로 줄바꿈되며 화면이 좁아지면 아래로 자연스럽게 떨어집니다.
두 번째 문단. 강조는 굵게, 기울임 모두 가능해요.
- 포인트 1
- 포인트 2
- 포인트 3
<div style="display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; margin:14px 0;">
<!-- 왼쪽: 이미지 -->
<img src="이미지_URL" alt="설명"
style="width:160px; max-width:40vw; height:auto; border-radius:10px; flex:0 0 auto;">
<!-- 오른쪽: 여러 줄 텍스트 -->
<div style="flex:1 1 260px; font-size:16px; line-height:1.75; color:#222;">
<h3 style="margin:0 0 .25em; font-size:18px; line-height:1.4;">섹션 제목</h3>
<p style="margin:.3em 0;">
첫 문단입니다. 여러 줄 텍스트가 들어가도 자동으로 줄바꿈되며
화면이 좁아지면 아래로 자연스럽게 떨어집니다.
</p>
<p style="margin:.3em 0;">
두 번째 문단. 강조는 <b>굵게</b>, <i>기울임</i> 모두 가능해요.
</p>
<ul style="margin:.3em 0 .3em 1.2em; padding:0;">
<li>포인트 1</li>
<li>포인트 2</li>
<li>포인트 3</li>
</ul>
</div>
</div>7. 카드형 여러줄 레이아웃
카드 타이틀
2025-10-12본문 여러 줄을 넣는 영역입니다. 카드 배경 덕분에 본문과 구분이 잘 되고, 모바일에서도 자연스럽게 아래로 떨어집니다.
캡션/보충설명: 필요 시 작은 글씨로 부연 설명을 넣을 수 있어요.<- 근데 이거 어케 하는지 몰것음
<div style="display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; margin:16px 0; padding:16px; border:1px solid #eee; border-radius:12px; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.04);">
<img src="이미지_URL" alt="설명"
style="width:150px; max-width:40vw; height:auto; border-radius:10px; flex:0 0 auto;">
<div style="flex:1 1 260px; color:#222;">
<div style="display:flex; align-items:baseline; justify-content:space-between; gap:8px; flex-wrap:wrap;">
<h3 style="margin:0; font-size:18px; line-height:1.4;">카드 타이틀</h3>
<small style="color:#888;">2025-10-12</small>
</div>
<p style="margin:.5em 0; font-size:16px; line-height:1.75;">
본문 여러 줄을 넣는 영역입니다. 카드 배경 덕분에 본문과 구분이 잘 되고,
모바일에서도 자연스럽게 아래로 떨어집니다.
</p>
<p style="margin:.5em 0; font-size:15px; line-height:1.7; color:#555;">
캡션/보충설명: 필요 시 작은 글씨로 부연 설명을 넣을 수 있어요.
</p>
</div>
</div>html 까막눈을 위한 단순 설명
1. 구분 속성 역할 / 설명 기본값 자주 변경되는 예시
| 컨테이너 전체 (div) | display:flex; | 요소들을 가로로 나란히 배치 | 필수 | — |
| align-items:center; | 이미지와 글의 세로 중심을 맞춤 | center | flex-start → 위정렬flex-end → 아래정렬 | |
| gap:12px; | 이미지–텍스트 사이 간격 | 12px | 8px, 20px | |
| flex-wrap:wrap; | 화면이 좁으면 줄바꿈 허용 | wrap | nowrap → 한 줄 유지 (모바일에서 넘칠 수 있음) | |
| margin:12px 0; | 위·아래 간격 (외부 여백) | 12px | 8px 0, 20px 0 | |
| padding:16px; | 내부 여백 (카드형일 때 사용) | 없음 | 12px, 24px | |
| background:#fff; | 배경색 지정 | 없음 | #f9f9f9, #fafafa | |
| border-radius:12px; | 카드 모서리 둥글게 | 없음 | 8px, 16px | |
| box-shadow:...; | 그림자 효과 | 없음 | 0 2px 10px rgba(0,0,0,.05) |
| 이미지 (img) | width:150px; | 이미지 크기 (가로 기준) | 120~160px | 100px, 200px |
| height:auto; | 비율 유지 (세로 자동 조절) | 필수 | — | |
| border-radius:8px; | 이미지 모서리 둥글게 | 8px | 0px (각진), 12px | |
| flex:0 0 auto; | flex가 이미지 크기 강제로 바꾸지 않게 고정 | 필수 | — | |
| max-width:40vw; | 반응형에서 이미지가 너무 커지지 않도록 제한 | 없음 | 30vw, 50vw |
| 텍스트 (span, div) | flex:1 1 260px; | 텍스트 영역이 남는 공간을 차지 | 필수 | 1 1 200px |
| font-size:16px; | 기본 글자 크기 | 16px | 15px, 17px | |
| line-height:1.6; | 줄 간격 | 1.6 | 1.75, 1.8 | |
| color:#222; | 글자 색상 | 진회색 | #333, #555 | |
| margin:.3em 0; | 문단 간격 | 없음 | .5em 0 | |
| h3, p, ul 등 | 텍스트 구조 구성 | — | <h3> 제목, <p> 문단, <ul> 리스트 등 혼용 |
2. 자주 쓰는 조합
<!-- ✨ 이미지 + 텍스트 조정 템플릿 -->
<div style="
/* === 기본 구조 === */
display: flex;
align-items: var(--align, flex-start);
gap: var(--gap, 16px);
flex-wrap: var(--wrap, wrap);
margin: var(--margin, 16px 0);
padding: var(--padding, 0);
/* === 카드형 옵션 === */
background: var(--bg, transparent);
border-radius: var(--radius, 0);
box-shadow: var(--shadow, none);
">
<!-- 🖼 이미지 -->
<img
src="https://tse1.mm.bing.net/th/id/OIP.mT0xDqqWpCcm8my_uYkMUwHaLG?pid=Api"
alt="샘플 이미지"
style="
width: var(--img-width, 150px);
height: auto;
border-radius: var(--img-radius, 8px);
flex: 0 0 auto;
max-width: var(--img-max, 40vw);
">
<!-- 📝 텍스트 -->
<div style="
flex: 1 1 var(--text-min, 260px);
font-size: var(--font-size, 16px);
line-height: var(--line, 1.7);
color: var(--text-color, #222);
">
<h3 style="margin: 0 0 .4em; font-size: 18px;">제목을 여기에</h3>
<p style="margin: .4em 0;">첫 번째 문단입니다. 이 부분에 설명을 넣으세요.</p>
<p style="margin: .4em 0;">여러 줄이 들어가도 자동 줄바꿈되고, 모바일에선 아래로 떨어집니다.</p>
</div>
</div>- 카드형 복붙
<div style="
--bg:#fff;
--radius:12px;
--shadow:0 2px 10px rgba(0,0,0,.05);
--padding:16px;
--gap:20px;
--img-width:140px;
--align:flex-start;
--line:1.75;
">
<!-- 위에 있는 동일한 코드 복사 -->
</div>모쪼록... 퍼가세요.... 짬뽕밥을 올려두었으니 복붙하시길... 링크는 완성본이고 아래는 코드입니다.
https://zak2lab.tistory.com/31
<!-- ✨ [TEMPLATE SET] 사진 + 텍스트 (기본형 & 카드형) -->
<!-- 🩶 [1] 기본형 : 카드, 그림자, 둥근모서리 전혀 없음 -->
<div style="
display: flex;
align-items: var(--align, flex-start);
gap: var(--gap, 16px);
flex-wrap: var(--wrap, wrap);
margin: var(--margin, 20px 0);
padding: var(--padding, 0);
">
<img
src="https://tse1.mm.bing.net/th/id/OIP.mT0xDqqWpCcm8my_uYkMUwHaLG?pid=Api"
alt="이미지 설명"
style="
width: var(--img-width, 150px);
height: auto;
flex: 0 0 auto;
max-width: var(--img-max, 40vw);
border-radius: 0;
">
<div style="
flex: 1 1 var(--text-min, 260px);
font-size: var(--font-size, 16px);
line-height: var(--line, 1.75);
color: var(--text-color, #222);
">
<h3 style="margin: 0 0 .4em; font-size: 18px;">기본형 제목을 입력하세요</h3>
<p style="margin: .4em 0;">
여기에 첫 번째 문단을 작성합니다.
카드나 그림자 없이 깔끔한 기본 스타일입니다.
</p>
<p style="margin: .4em 0;">
모바일에서는 사진 아래로 정렬됩니다.
</p>
</div>
</div>
<!-- 구분선 (필요 없으면 지워도 됨) -->
<hr style="border:none; border-top:1px dashed #ddd; margin:30px 0;">
<!-- 🩷 [2] 카드형 : 배경 + 둥근모서리 + 그림자 있는 버전 -->
<div style="
display: flex;
align-items: var(--align, flex-start);
gap: var(--gap, 16px);
flex-wrap: var(--wrap, wrap);
margin: var(--margin, 20px 0);
padding: var(--padding, 16px);
background: var(--bg, #fff);
border-radius: var(--radius, 12px);
box-shadow: var(--shadow, 0 2px 10px rgba(0,0,0,.05));
">
<img
src="https://tse1.mm.bing.net/th/id/OIP.g1m0K7yumfwkc_ub224a4AHaE7?pid=Api"
alt="이미지 설명"
style="
width: var(--img-width, 150px);
height: auto;
flex: 0 0 auto;
max-width: var(--img-max, 40vw);
border-radius: var(--img-radius, 10px);
">
<div style="
flex: 1 1 var(--text-min, 260px);
font-size: var(--font-size, 16px);
line-height: var(--line, 1.75);
color: var(--text-color, #222);
">
<h3 style="margin: 0 0 .4em; font-size: 18px;">카드형 제목을 입력하세요</h3>
<p style="margin: .4em 0;">
이 버전은 배경색, 그림자, 둥근 모서리가 들어간 카드형입니다.
내용이 길어도 안정적으로 정렬돼요.
</p>
<ul style="margin:.4em 0 .4em 1.2em; padding:0;">
<li>카드 배경이 있어 구분이 확실</li>
<li>그림자로 약간의 입체감</li>
<li>둥근 모서리 처리</li>
</ul>
</div>
</div>