깃블로그(18) 프로필 사진 수정

프로필 개요

: 상단 프로필에서 나의 사진을 등록한다. 사진이 있어야 곡률 또한 적용할 수 있을것이다.

프로필 수정

과정

: 요약한 순서는 다음과 같다.

1. 원하는 이미지 업로드
2. 기본설정 파일에서 업로드이미지 링크 적용
3. 사진곡률 수정

구현

: 실제로 구현해보자.

1. 원하는 이미지 업로드

   /assets/images/profile.jpg

   나는 위 경로에 업로드했다.

2. 기본설정 파일에서 업로드이미지 링크 적용

   /_config.yml

   author    : 
   name      : "블랭"
   avatar    : "/assets/images/profile.jpg" <!-- 링크적용 --> # path of avatar image, e.g. "/assets/images/bio-photo.jpg"
   bio       : "하나의 장애물은 하나의 경험이되고, 하나의 경험은 하나의 지혜가 된다!!"
   location  : "South Korea"
   email     : "layup3@naver.com"
   
   

3. 사진곡률 수정

   /_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;   <!-- 175px; 변경 -->
     border-radius: 50%;  <!-- 15% 변경 -->
         
     @include breakpoint($large) {
     padding: 5px;
     border: 1px solid $border-color;
     }
   }
   }
         
   

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

적용 완료

: 프로필을 보면 적용된 모습을 볼 수 있다.