[티스토리 스킨 만들기] 반응형 2 블로그 프로필 이미지 크기 변경하기

[티스토리 스킨 만들기] 반응형 2 블로그 프로필 이미지 크기 변경하기

---

 

안녕하십니까 티스토리 하고 나서 바꾸고 싶었던 게 있었는데

 

요 반응형 2 스킨의 블로그 프로필 사진입니다.

 

반응형 2 스킨 자체는 정말 맘에들긴 하지만

 

프로필 이미지 크기가 너무작아서 보이질 않네요.

 

그래서 한동안 찾아보긴 했지만

 

원하는 답을 찾지 못했고

 

그러다 오늘 갑자기 이미지를 보고있는데

 

이게 원형태를 가지고 있으니까 반지름 값이 있지 않을까

 

그래서 radius 값을 찾아서 바꿔봤더니

 

됐습니다.. ㅋㅋㅋㅋㅋ

 

바로 글을 적으면서 수정해보도록 하겠습니다!

 

ㄲ

 

 

먼저 이미지 크기를 바꾸기 전의 제 블로그 프로필 이미지 크기입니다.

 

제 자취 룸의 이상향이 있지만 작아서 보이질 않네요.

 

스킨 편집의 HTML 편집 -> CSS로 이동

 

 

HTML5에서는 이미지 같은 건 CSS에서 관리하도록 권장하고 있습니다.

 

그래서 웹 전문가들은 CSS를 잘 활용하고 있겠지 해서 CSS에서 찾게 되었습니다.

 

저는 전문가가 아니라서 잘 활용 안 합니다 ㅎㅎ

 

여하튼 CSS에서 Ctrl + F -> radius를 검색하시고 내리시다 보면

 

위와 같은 코드를 찾으실 수 있습니다.

 

 

먼저 .img_profile의 radius를 지워봤습니다.

 

원형태의 프로필도 좋지만 일단 해보겠습니다.

 

 

역시 사각형으로 바뀝니다.

 

이걸 못 찾아서...

 

이제 크기를 바꿔보도록 하겠습니다.

 

 

.img_profile를 바꿔도 되지만 .thumb_profile를 바꿔보도록 하겠습니다.

 

 

이제 사진이 어떤 사진인지 명확해질 정도로 커졌네요.

 

정말 맘에 듭니다.

 

 

border-radius:51px를 넣으니 이렇게 되네요.

 

 

width:220px;height:220px;하고 radius를 110으로 하니 원형태가 되었습니다.

 

음... 근데 좀 맘에 썩 들지는 않네요.

 

 

포토샵으로 배경 이미지와 겹쳐지도록 만들었습니다.

 

 

어느 정도 색깔이 다르지만? 거의 같네요!

 

맘에 듭니다.

 

.area_head .area_profile .thumb_profile{display:block;width:205px;height:205px;margin:44px auto 6px;border-radius:15px;}
.area_head .area_profile .img_profile{display:block;border-radius:15px;width:100%;height:100%}

 

이걸 마지막으로 프로필 사진은 수정이 완료되었습니다!

 

다음 글에서 블로그 제목의 CSS를 수정해보겠습니다!