티스토리 프로필 사진 모양 수정 / CSS

현재 제 모습을 가장 잘 보여주는 사진으로 프로필을 바꿨습니다.

하지만 가장 중요한 정보가 잘려서 보이질 않는군여

 

이해못했음

그래서 제가 혹시나 스마트해 보일까 염려가 되어 프로필 사진 모양을 수정하게 되었습니다...

간편한 방법으로 수정이 가능합니다!

 

---

1. Class 알아내기

이전에 티스토리 사진 테두리 적용하는 방법에서 사용한 방법을 다시 이용했습니다.

2021.01.30 - [허니팁] - 티스토리 사진 테두리 적용 / imageblock

티스토리 사진 테두리 적용 / imageblock

 

사용법은 같으나 다시 설명하겠읍니다.

먼저 크롬창에서 블로그 홈화면을 띄우고 F12를 눌러줍니다.

그럼 개발자 도구를 사용할 수 있는데요

원하는 부분이 어떤 클래스인지 쉽게 알아낼 수 있습니다!

 

그럼 위와 같이 나오는데, 표시된 아이콘을 누르거나 Ctrl + Shift + C를 누르시면 됩니다.

 

그리고 클래스를 알고자 하는 element에 마우스를 가져다대면 위 사진처럼 설명이 나오고, 클릭하면 html 코드에서 어느 부분에 해당하는지 표시해주고, 이동합니다!

box-profile이라는 클래스 아래의 inner-box 아래에 있는 img-profile class인 것을 알 수 있네여

그럼 스킨 편집창으로 이동해서 CSS를 수정해주면 됩니다.

 

2. CSS 수정

이 과정은 정말 간단하쥬.

일단 CSS 코드 창에서 Crtl + F를 눌러서 검색 기능을 켜고, 알아낸 클래스 이름 img-profile을 검색합니다.

근데 한 개만 나오는게 아니쥬? 아마 그러실 것 같습니다.

pc냐, tablet이냐, mobile이냐에 따라 화면 구성이 달라지기 때문에 그런 것 같은데 잘 모르겠네여.

그래서 여러 개 중 box-profile의 img-profile 중에서 클래스 중에서 원모양이 들어갈만한 것만 수정했습니다.

 

저기서 border-radius가 테두리를 둥글게 만들어주는데 저것때문에 원모양이 되었습니다.

그래서 저 사악한 것을 지워서 정사각형으로 만들어줍니다!

편집한 CSS를 저장하고 다시 홈화면을 새로고침하면

 

짠

제대로 나왔습니다.

이제 제가 멍청한 것을 잘 나타낼 수 있습니다!