[BlogDev] 프로필 스타일링

사이드바 프로필

프로필 사진이 현재 프로필 공간에 비해 너무 작은 크기이다. 그래서 이것을 키우고 좀 더 스타일리쉬하게 바꿔보겠다.

프로필 사진

minimal-mistakes의 프로필 사진 코드는 📁_sass📁minimal-mistakes📃_sidebar.scss 영역의 .author__avatar 영역에 있다.

.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__avatar는 프로필 이미지가 담겨있는 div 태그의 클래스명이고, 직접적으로 보이는 이미지는 author__avatar 클래스 내에 img 태그이다. scss 문법에 대해 잘은 모르겠지만, 크롬의 개발자 도구를 통해 두 영역의 css 속성을 살펴보면, sass의 @include 기능은 css의 @media 기능과 같은 것 같다. min-width가 $large(64em)를 기점으로 @include 내의 속성은 width가 64em 이상인 영역, 즉, PC버전에 해당하는 영역에 대한 속성을 재설정하는 것이다.

일단 그렇다면 PC버전에서의 css 속성부터 재설정해보자.

1. PC 버전

img {
  width: 80%;
  border-radius: 20%;
}

고정값인 max-width를 제거하고, width를 80%로 지정하였다. 그리고 기존 50% 였던 border-radius를 20%로 줄여 원이 아닌 뭉툭한 사각형으로 설정하였다.

기대한 것처럼 잘 결과가 잘 나와줬다.

2. 모바일/태블릿 버전

사진이 너무 작다. 못났다. 사진 크기를 키울 것이다. 앞서 img 태그는 손을 봤으니, .author__avatar 태그를 직접 손 볼 차례이다. 모바일 버전에서 사진의 크기가 작은 것은 img 태그의 설정과 달리, 그것을 감싸는 div 태그에서 width와 height 가 36px로 고정되어있기 때문이다.

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

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

그래서 이 width와 height를 img 크기에 맞게 알아서 조율하라고 auto로 설정한다. 그렇게 되면 img는 width가 80%이므로 너무 커지게 되니까 max-width를 입력해 모바일 버전에서도 너무 커지지 않도록 한계를 둔다.

.author__avatar {
  display: table-cell;
  vertical-align: top;
  width: auto;
  max-width: 4em;
  height: auto;

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

이렇게 되면, 아래 PC 버전에는 max-width가 없어 위에서 설정한 max-width가 유지되는데, PC버전에서 4em이면 작은 사이즈이기 때문에 그에 걸맞게 max-width를 재설정해서 PC버전에서 프로필은 크게 만들어본다.

.author__avatar {
  display: table-cell;
  vertical-align: top;
  width: auto;
  max-width: 4em;
  height: auto;

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

크롬의 개발자 도구를 이용해서 만들얼보니 max-width: 12em이면 적당할 것 같다.

프로필 이름

프로필 이름 위치

프로필 이름 뿐만이 아니라 프로필 내의 여러 부분들이 다 좌측 정렬되어 있다. 모두 그럴 필요는 없이, 프로필 이름만 중앙으로 배치하면 좋을 것 같다. 역시 📃_sidebar.scss 파일에서 코드를 건드려야 한다.

프로필 이름을 관장하는 scss코드 구역은 .author__name 이다.

.author__name {
  margin: 0;

  @include breakpoint($large) {
    margin-top: 10px;
    margin-bottom: 10px;
  }
}

현재 PC 버전에서는 위아래의 margin이 각각 10px 만큼 있는데 여기에 코드를 추가해 아래처럼 만들어보겠다.

.author__name {
  margin: 0;

  @include breakpoint($large) {
    margin-top: 1em;
    margin-left: 2.7em;
    margin-bottom: 10px;
  }
}

margin-top을 더 크고, 상대적인 폰트 사이즈로 두었다. margin-left를 두어 사진에 중앙 정도 배치되도록 왼쪽 여백을 두었다.

잘 반영되었다.