[Tistory] main에 github 아이콘 삽입 및 연동

원리를 이해가 우선이었던 본인은 컴퓨터 공부를 하며 일단 해보자!라는 습관이 생겼다. 그만큼 코딩은 html, css, jqury 등 강의를 듣고 따라하는 것도 좋지만 본인이 해보고 싶었던걸 직접 완성하며 느끼는 희열과 기쁨이 더 중요하다 생각한다.

그래서! 티스토리를 처음 만들었고 전직 네이버 블로거는 스킨편집부터 시작했다. 다른점이 있다면 5년 전에는 GUI로만 바꿀 수 있었던걸 이제는 CLI로 직접 만들고 있다는 점! 그럼 더이상의 생각은 생략하고 

그래서 어떻게 하는건데?  

1. 티스토리 관리자 페이지 > 꾸미기 >  스킨편집 > HTML편집

2. 이제 바꾸고 싶은 부분을 찾아야한다.

• F12를 눌러 크롬 개발자 도구를 꺼내고 왼쪽 맨위에 있는 화살표로 내가 고치고 싶은 부분을 찾는다.
• 나같은 경우 프로필 사진을 바꾸고 싶었고 class="area_profile" 부분임이 확인되었다.
• <div class="area_profile">에 "tit_post", "tit_post_github","tit_post_background_picture"을 추가

3. 그중 사진을 바꾸는 부분 클래스인 class="tit_post_github"에 아래 코드를 추가

<div class="tit_post_github">
	<a href="https://github.com/kim-seo-hyun" class="github_link">
		<img src="https://tistory3.daumcdn.net/tistory/1688928/skin/images/github.png" width="50" height="50">
	</a>
</div>

- href=""에 이동하고자 원하는 링크를 넣고

- img src에 원하는 사진 링크를 넣으면 끝.

width와 height를 조절하며 사이즈도 조절할 수 있다.

<div class="tit_post_background_picture">
	<a href="https://clairline.tistory.com/" style="color: white;" class="github_link">
	Things take time
	</a>
</div>

본인처럼 아래 글도 추가하고 싶다면 이렇게! 추가 설명은 생략한다 

이제 깃허브 아이콘을 누르면 내 깃허브로 보내기 완성 :)