티스토리 사이드바 상단에 프로필 이미지 넣는 방법

그냥 해봤는데

티스토리 사이드바 상단에 프로필 이미지 넣는 방법

그때 그때 끄적 2025. 5. 24. 18:02

블로그에 나만의 브랜드를 만들고 싶다면, 첫인상을 결정짓는 사이드바 상단 이미지는 꽤 중요합니다.
이번 글에서는 내 PC(바탕화면)에 있는 이미지를 티스토리 사이드바에 넣는 방법을 아주 쉽게 정리해봅니다.

Step 1. 이미지 준비 및 업로드(이미지 주소 필요)

바탕화면에 있는 이미지를 준비합니다.
(JPG, PNG 등 포맷 모두 OK. 가로 기준 240px 이내가 적당합니다)
티스토리 글쓰기(새 글) 페이지로 이동합니다.
이미지 업로드:
- 글쓰기 화면에 이미지를 드래그 앤 드롭하거나
- 이미지 버튼을 눌러 바탕화면에서 선택
업로드한 이미지 위에서 **우클릭 → ‘이미지 주소 복사’**를 클릭합니다.
- 이게 바로 웹에서 접근 가능한 이미지 URL입니다.

Step 2. 사이드바 HTML 수정

관리자 페이지 → 꾸미기 → HTML 편집으로 이동합니다.
아래 코드를 복사해서, 사이드바 영역(<s_sidebar_element> 내부, GitHub 아이콘 위)에 붙여넣습니다:

<div class="sidebar-profile" style="text-align:center; margin-bottom:15px;">
  <img src="복사한_이미지_URL" alt="프로필 이미지"
       style="max-width:100%; width:240px; height:auto; border-radius:12px;">
</div>

✅ 예시:

<img src="https://blog.kakaocdn.net/dn/example.jpg" ... >

🎯 어느 정도 크기가 적당할까?

항목	권장값
이미지 폭	240px 이하
비율	4:3 또는 1:1
파일 용량	300KB 이하 (로딩 최적화)

🧩 함께 넣으면 좋은 내용

프로필 이미지 아래에 간단한 소개글이나 SNS 링크도 추가하면 더 좋습니다:

## 기존 상단 이미지
<div class="sidebar-profile" style="text-align:center; margin-bottom:10px;">
    <img src="https://blog.kakaocdn.net/dn/dkRMYr/btsObqbSvDi/2x7c4G8IkH5tqtpgTFG0q1/img.png" alt="프로필 이미지" style="max-width:100%; width:240px; height:auto; border-radius:12px;">
    
    ## <!-- 여기에 넣으세요 -->
    <div style="font-weight:bold;">소개글 제목</div>
    <div style="font-size:12px; color:#888;">소개글</div>
</div>

결과 이미지