[Tistory] 사이드바 | 프로필 | HTML 편집

**  사이드바에 프로필 추가하기

 

 

블로그 보다가 문득 든 생각.. 사이드바에 프로필을 넣고싶다!

 

 

블로그 관리 > 스킨 편집 > html 편집

 

 

 

내가 적용한 스킨에 해당하는 html 코드를 볼 수 있다..!

 

** HTML 수정

✅ 프로필 이미지 추가하기

✅ Github, LinkedIn 링크 추가하기

 

 

적용된 스킨의 카테고리 목록 위에 이미지 + 링크를 추가하고 싶어서

Chrome 개발자도구 '검사'를 사용해 카테고리에 해당하는 코드를 찾아주었다

 

파란색 박스의 카테고리 위에 이미지와 링크 추가!

 

<div style="text-align:center">
 <div style="padding-bottom:10%">
	<img src=이미지 주소 width="60%" style="border-radius:50%;  padding-bottom: 1em"/>
	<br>
	<span style="font-family: fantasy;"><a href="Github 주소">Github</a></span>
	<span style="font-family: fantasy;"><a href="LinkedIn 주소/">LinkedIn</a></span>
 </div>
</div>

 

더 꾸미고 싶지만 너무 귀찮아..

 

🥔 img tag에 src 주소 쉽게 넣는 방법: Github 새로운 Issue에 이미지 끌어다 놓으면 주소를 내뱉는다!

🥔 font-family: serif, monospace, cursive, fantasy . . . (@font-face: 눈누에서 더 예쁜거 쓸 수 도 있어요)

 

🥕 이메일 주소 추가하기

🥕 짧은 글 넣을 수 있도록 padding/margin 조정..

 

간단한 설명도 넣고 싶었는데 원래 스킨의 범위에 밀려서 원하는 위치에 들어가지 않는다ㅠ ㅠ

수정하기 귀찮아서 일단 이정도로 만족^^

 

 

 

사이드바에 프로필 추가하기 끝~.~