티스토리 이미지 없는 글 섬네일에 기본 사진 넣기 - 사진 없음 이미지 다운로드 No Image

블로그에 글 쓸 때 거의 항상 이미지를 넣었어서 몰랐는데 최근에 이미지 없이, 대표 사진을 설정하지 않은 글을 몇 개 써봤더니 글 목록에서 회색 박스로만 표시되더라고요. 꼭 렉 걸리거나 아직 로딩이 안 된 것처럼요. 블로그 주인인 저도 헷갈리기 때문에 사진이 없다는 걸 알려주는 기본 이미지가 필요하겠더라고요.

스킨 자체에 아예 기본 섬네일 사진이 없는 것 같아서 하나 만들었습니다. 구글에 'no image'라고 검색하면 많이 나오지만 저는 제 블로그 파비콘에 있는 로고를 회색으로 바꾸어서 만들었어요.

이 글 밑에 제가 만든 몇 가지 사진 없음 이미지가 있으니 필요하신 분은 다운로드해서 사용하세요.

 

티스토리 섬네일 기본 이미지 설정하는 법

우선 이미지 파일은 empty-img, img-empty, bg-thumb 등 무슨 이미지인지 일아보기 쉬운 이름으로 저장해 주세요.

티스토리 스킨 편집에 가서 html 편집으로 들어가시고 [파일업로드]에 해당 파일을 넣어줍니다.

그럼 위처럼 'images/파일명'라고 저장이 됐을 겁니다.

이제 CSS에 해당 이미지가 적용되게 하면 됩니다.

CSS 탭으로 가서 코드가 있는 곳을 한 번 클릭해 주고 키보드의 Ctrl + F를 눌러 아래와 같이 figure 혹은 thum 등으로 쓰인 부분을 찾으면 됩니다.(반드시 코드 내에서 Ctrl + F를 누르셔야 찾아집니다) 제 블로그 스킨은 기본 스킨 중에 북 클럽을 변형한 것인데 아래와 같이 되어 있네요. 이것도 제가 변형한 건지는 잘 기억 안 나지만; 

/* 관련글 섬네일 */
.related-articles ul li figure {
...
}

/* 글목록 섬네일 */
.post-item .thum {
...
}

*키보드의 Ctrl + C로 복사, Ctrl + V로 붙여넣기 하면 됩니다.

혹시 찾기 힘들다면 개발자도구로 섬네일 위치를 찾아보세요.

브라우저에서 키보드의 F12를 누르시면 개발자도구가 나옵니다. *크롬, 엣지, 웨일 모두 F12를 누르면 된다고 하네요.

개발자도구 왼쪽 위에 있는 버튼을 클릭한 뒤 섬네일이 필요한 곳을 클릭합니다. 리스트가 있을 경우 각각이 같은 CSS를 공유하기 때문에 하나만 선택하시면 됩니다.

그럼 화살표로 표시한 부분이 해당 섬네일의 코드라는 걸 표시해 주죠. 열어서 섬네일을 표현한 요소를 찾아야 합니다. 코드 왼쪽의 작은 화살표들을 클릭해서 딱 이미지 부분만 선택되는 곳을 찾아보세요.

관련글의 경우엔 저렇게 <figuare> </figuare> 부분을 선택하니까 이미지만 선택됐습니다. 노란색으로 표시한 CSS 코드가 해당 요소인 것 같으니 그걸 복사해서 찾으시면 됩니다.

 

찾는 팁이 있다면 위에 있는 CSS 코드에 'background-color: #f8f8f8;이 보이시죠? 보통 웹 개발자들은 저렇게 이미지가 있어야 할 위치에 기본으로 배경색을 미리 깔아놓는 경우가 대부분입니다. 혹시 비슷한 코드가 여러 개라면 background-color가 있는 코드를 찾으시면 됩니다.

 

 

이제 CSS에서 해당 요소를 찾아 다음을 추가해 주세요. *img-empty.png를 여러분이 올린 이미지 파일 이름으로 변경하시면 됩니다!

background: center / 100% no-repeat url(./images/img-empty.png);

해당 요소 배경에 이미지를 꽉 채워서 넣는다는 의미입니다.

background-color: #f8f8f8; 부분을 삭제하거나 그 밑에 넣으셔야 합니다. CSS는 위에서부터 차례대로 적용되기 때문에 겹치는 기능을 하는 코드가 여러 개면 마지막 것이 적용되거든요.

이렇게 적용됐습니다. 이제 렉 걸린 것 같지는 않죠.ㅋㅋㅋ

 

사진 없음(No Image) 이미지 다운로드

누구나 사용할 수 있게 만들어본 사진 없음 이미지입니다. 400x400 px 크기고요. 영어로 글자만 써 있는 버전, 카메라 버전, 사진 버전으로 만들었어요. 자유롭게 사용하시되 다른 곳에 재배포하지는 말아 주세요.

no-img-text.png

0.00MB

no-img-icon-c.png

0.00MB

no-img-icon-p.png

0.00MB

 

제가 섬네일 만들 때 사용한 Figma는 별도의 다운로드 없이 웹에서도 사용할 수 있는 무료 프로그램이니 자신만의 이미지를 만들고 싶으면 도전해 보세요. 꼭 Figma가 아니더라도 파워포인트 같은 문서 프로그램으로도 만들 수 있답니다. 다른 이미지보다 튀지 않게 회색조의 단순한 이미지로 만드는 게 좋습니다. 저는 이미지 만들 때 배경색은 #F8F8F8, 그림색은 #E0E0E0을 사용했습니다.