티스토리 Flatinum 스킨 상단 이미지 변경 하는 방법

티스토리 Flatinum 스킨 상단 이미지 변경 하는 방법

안녕하세요~

이번 포스팅에서는 티스토리 스킨 중 현재 제가 사용하고 있는 Flatinum 스킨에서 상단 이미지를 기본 이미지에서 사용자가 원하는 이미지로 변경하는 방법에 대해 알려 드리고자 합니다!

프로그래밍을 모르시는 분들도 조금만 시간을 투자하시면 쉽게 따라 하실 수 있으니, 천천히 따라해 주시기 바랍니다!

첫 번째로, 관리자에 들어가셔서 아래와 같은 메뉴를 찾으시고 [꾸미기 -> 스킨편집]을 클릭해 주시기 바랍니다!

여기까지 따라 하셨다면 아래와 같은 화면이 나오게 됩니다.

여기서 html편집 버튼을 클릭해 주세요~

버튼을 클릭하시면 이제 다음과 같은 화면이 나오게 됩니다!

이렇게 HTML, CSS, 파일업로드 메뉴들이 보이시게 될거에요!

여기서 우선 첫 번째로, 파일업로드 메뉴를 클릭해 주시기 바랍니다.

위와 같이 기본 설정으로 이미 적용되어 있는 image 파일들이 여럿 보이실 거에요! 

이제 여기서 사용자가 업로드 하고 싶은 이미지를 올리시면 됩니다! 이미지 추가는 아래 추가버튼을 클릭하시면 되겠습니다~

저는 참고로 제가 파워포인트를 이용하여 제가 만든 이미지를 올려 보았어요!

먼저, 파워포인트에서 아래와 같이 아이콘을 만들었습니다.

그리고 해당 이미지를 캡처도구를 이용하여 적당한 크기로 캡처 하고 beombeomJoJo.JPG 파일로 저장 하였습니다.

여기까지 잘 따라 하셨나요? 

이제 beombeomJoJo.JPG 이미지를 그림판을 이용하여 픽셀 가로X세로를 1920X150으로 변환 후 저장 시켜 줍니다.

그림판 작업은 위와 같이 해주시면 되겠습니다.

크기조정 -> 픽셀 선택 -> 가로 세로 비율 유지 체크 해제 -> 1920X150 선택 

그리고 해당 이미지를 다시 같은 이름으로 저장해주시고, 해당 이미지를 파일 업로드 해줍니다!

이렇게 beombeomJoJo_01.JPG 이미지가 정상적으로 업로드 된 것을 확인하실 수 있습니다.

이제 마지막으로 HTML에서 기본 이미지가 쓰여있는 코드를 찾으셔서 해당 이미지 이름은 beombeomJoJo_01.JPG로 바꿔 주시면 되겠습니다.

이제 HTML 버튼을 클릭 해주시고, 아마 기본 이미지 이름이 slide_01, slide_02, slide_03으로 되어 있을 것 입니다.

때문에 Ctrl + F를 눌러 주시고 해당 찾는 문자에 slide를 입력 하시면 아래와 같은 코드로 자동으로 안내가 될 것입니다!

이제 이 부분에서 slide_02, slide_03 이미지는 지워 주시고, slide_01.png 부분을 아까 업로드 하였던 beombeomJoJo.JPG로 아래 코드와 같이 변경 시켜 주시기 바랍니다.

그리고 나서 왼쪽 상단에 있는 새로고침 버튼을 클릭하셔 주시면 아래와 같이 이미지가 정상적으로 나오는 것을 확인 하실 수 있습니다~~

이로써, 티스토리 스킨 꾸미는 방법에 대해 알아 보았습니다!

천천히 따라하시면 쉽게 이미지 변경 가능하실거에요~~

글 읽어 주셔서 감사합니다ㅎㅎ