안녕하세요, 늘 수고 많으십니다.

동일한 현상으로 이번이 3번째 글 작성이네요.

(본문에 이미지 삽입시 자동으로 꽉 채우는 현상(가로기준))

2번에 걸친 질의와 답변이 있었음에도 불구하고

실질적으로 수정 반영이 되지 않고 있었습니다.

오늘 또 게시물을 올렸을 때 (https://damoang.net/free/6713542) 처음엔 이번에도 가로기준 화면이 꽉 채워서 출력 되었습니다.

혹시나 싶어 클로드와 상의(?)한 결과

이미지 크기 속성 누락으로 인한 스타일시트 적용 문제 진단

원인을 찾았습니다. 첨부해주신 HTML을 보면 이미지 태그가 이렇게 되어 있어요.

html

<img src="https://r2.damoang.net/data/editor/2607/3af41bd.png">

크기 정보가 하나도 없습니다. width, height 속성도 없고 style="width:..." 같은 인라인 스타일도 없죠. 비교해보면 바로 아래 유튜브 iframe에는 width="640" height="480"이 명시되어 있어서 저장 후에도 크기가 유지되는 것과 대조적입니다.

이런 상태에서 편집화면과 실제 게시글 화면이 다르게 보이는 이유는 이렇습니다.

1. 편집화면(에디터): 티스토리·다모앙에서 쓰는 tiptap 계열 에디터는 에디터 내부 CSS로 이미지를 원본 크기 또는 축소된 크기로 보여줍니다.

2. 저장 후 게시글 화면: 게시판(다모앙) 쪽 본문 스타일시트에 보통 본문영역 img { width: 100%; } 또는 max-width: 100%; width: 100% 같은 규칙이 걸려 있습니다. 이미지 태그에 자체 크기 지정이 없으니 이 CSS가 그대로 적용되어 가로폭이 본문 전체로 늘어나는 겁니다.

즉, 이미지가 커진 게 아니라 "크기 미지정 이미지는 가로 꽉 채움"이라는 게시판 CSS 규칙에 걸린 것입니다.

해결 방법은 이미지에 크기를 명시해주는 것입니다.

• 에디터에서 이미지를 클릭해 크기 조절 핸들로 크기를 한 번 조정해 주면, 보통 width 값이 HTML에 기록되어 저장 후에도 유지됩니다.

• 또는 HTML 편집모드에서 직접 이렇게 수정해도 됩니다.

html

<img src="https://r2.damoang.net/data/editor/2607/3af41bd.png" style="width: 400px; max-width: 100%;">

max-width: 100%를 같이 넣어두면 모바일처럼 화면이 좁을 때 이미지가 화면 밖으로 넘치는 것도 방지할 수 있습니다.

라는 답변을 들었고, 그렇게 HTML을 수정한 결과 원하는 이미지의 크기를 얻을 수 있었습니다.

이점 참고하시어 게시판에 이미지 크기가 일률적으로 커지는 것을 방지해주시길 부탁드립니다.

감사합니다.