Github.io 프로필 사진 및 모양 변경하기!

오늘은 내 블로그 오른쪽에 있는 프로필 사진을 바꿔보려고 한다.

이 사진을 바꾸는 방법과, 모양 및 크기를 바꾸는 방법에 대해 이야기해보자!

시작하기 전, 이 글은 minimal-mistakes를 기준으로 작성되었다.

프로필 사진 및 모양_(곡률) 바꾸기!

☝ 프로필 사진 등록하기

우선 너무 당연하지만, 프로필 사진이 없다면 모양을 바꾸는 것은 당연히 불가능하다.

프로필 사진부터 원하는 사진을 골라/assets/에 업로드하자.

사진 파일을 올린 후, 사진 파일 경로를 미리 복사해두자.

나는 이 경로에 사진을 업로드하였다.

나 같은 경우는 사진 파일의 경로가 /assets/avatar.jpg이다.

등록했다면, 기본 경로에 존재하는/_config.yml 파일을 검색하여 수정해주자.

# Site Author을 검색하면 쉽게 찾을 수 있다.

# Site Author
author:
name : "Danggai"
avatar : 
bio : "1년차 뉴우비 개발자!"
location : "Uiwang, South Korea"
email : "donggi9313@gmail.com"

이 부분을 찾았다면 됐다.

avatar에, 내가 사진 파일을 올린 경로를 복사해두자.

avatar : "/assets/avatar.jpg"

이런 모양새가 됐다면 됐다.

파일을 저장해주고 잠시 기다리면, 정상적으로 블로그에 사진이 등록됐을 것이다!

나중에 프로필 사진을 바꿀 때도, 같은 경로에 같은 이름으로 넣으면 금방 바꿀 수 있다.

🤞 사진 파일 크기 및 곡률 바꾸기

변경을 위해 _sass/minimal-mistakes/_sidebar.scss을 검색해서 수정해주자.

/*
   Author profile and links
   ========================================================================== */

.author__avatar {
  display: table-cell;
  vertical-align: top;
  width: 36px;
  height: 36px;

  @include breakpoint($large) {
    display: block;
    width: auto;
    height: auto;
  }

  img {
    max-width: 110px;
    border-radius: 50%;

    @include breakpoint($large) {
      padding: 5px;
      border: 1px solid $border-color;
    }
  }
}

` Author profile and links`을 검색하면 쉽게 이 부분을 찾을 수 있다.

• max-width를 바꾸면 내 프로필 사진의 최대 크기가 바뀐다. 내 sidebar보다 더 커지지는 않는다.
• border-radius가 낮아질수록 사각형에 가까워진다. 50%면 완전한 원형이 된다.
• breakpoint의 padding, border를 바꿔주면 프로필 사진 주변의 테두리를 바꿀 수 있다.

    max-width: 175px;
    border-radius: 15%;

나는 이 부분을 위와 같이 각각 바꾸어주었다.

결과물은 이렇게 완성되었다.

네모나 둥근 네모, 원형 말고 별 모양이나 육각형 등으로 바꾸는 방법이 있을지는 잘 모르겠다…ㅎㅎ;

나는 저 약간 모서리가 둥근 네모가 가장 예쁜 것 같다.

한동안은 사진만 바꾸면서 이 모양을 유지해야겠다!

참고로 내 _sidebar.scss파일은 여기에서 확인할 수 있다.

🤟 마치며

쉽게 프로필 사진의 느낌을 좀 바꿔보았다.

원래는 취업 사진을 사용했는데, 너무 딱딱한 느낌도 있고 그래서, 그냥 평소에 찍은 사진으로 바꾸고 조금 더 크게 해주었다.

점점 내가 원하는 블로그의 모양새가 되어가고 있다. 다음에는 상단 바를 조금 개조해볼까?

오늘은 그럼 여기서 글 마치겠다. 안뇽!