[Blog] 페이지 스타일링(1) - 폰트 & 페이지 비율 수정

폰트 설정과 페이지에서 사이드바, 상단바 등등 간격들 상세히 스타일링 해보자! 그리고 창 크기마다 변화하는 페이지 비율도 스타일링 해보자!

1. 폰트 설정(크기, 진하게 등)

폰트 설정과 페이지에서 사이드바, 상단바 등등 간격들을 먼저 상세히 스타일링 해보자!

목차(TOC)

• _navigation.scss 에서 변경
• type-size- 숫자를 낮추면 폰트 크기가 커진다.

.toc {
  .nav__title {
    font-size: $type-size-4; // 수정(6에서 4로)
  }
}

.toc__menu {
  font-size: $type-size-4; // 수정(6에서 4로)
  @include breakpoint($large) {
    font-size: $type-size-5; // 수정(7에서 5로)
  }
}

적용 모습 사진

• 기존에는 크기가 이것보다 작았음!

html 기본

• _reset.scss 에서 수정하며, 글자 크기는 자신이 원하는 크기로 자유롭게 커스텀
• html 전체에 기본적인 폰트 크기는 이렇게 설정했고, 각 창 크기마다 설정 또한 17px로 통일했다.

html {
  /* apply a natural box layout model to all elements */
  box-sizing: border-box;
  background-color: $background-color;
  font-size: 15px;

  @include breakpoint($medium) {
    font-size: 17px;
  }

  @include breakpoint($large) {
    font-size: 17px;
  }

  @include breakpoint($x-large) {
    font-size: 17px;
  }

  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

상단바 - 진하게

Home, Category, Search가 있는 웹의 제일 상단의 폰트 부분을 설정하는 방법이다.

딱히 폰트 크기를 키울 생각은 없고, 진하게 바꾸고 싶어서 이 부분만 추가했다.

• _sass/minimal-mistakes/_masthead.scss 에서 수정

&__inner-wrap {
    // 내부에
	font-weight: bold;    // 추가

사이드바 폰트 키우기

• 사이드바 상단 부분은 _sidebar.scss 에서 수정하면 된다.
  • 폰트 크기를 5->4 로 바꾸면 커진다!
• 사이드바 하단 부분은 navigation.scss 에서 수정하면 된다.
  • 작은 글자와 큰 글자를 커스텀 했다!

.sidebar .author__name {
  font-family: $cute; // 수정
  font-size: $type-size-4; // 수정(전에 5)
}

.author__bio {
  margin: 0;
  font-family: $cute; // 추가

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

  p {
    font-family: $cute;
    margin-top: 1.6px;
    margin-bottom: 3px;
    font-size: $type-size-5;
  }
}

.nav__list .nav__items {
  margin: 0;
  font-size: 1.25rem;
  // font-family: $sans-serif;

  a { // color: inherit만 있었음 -> 작은 글자
    color: inherit;
    font-size: $type-size-4;
    font-family: $cute; // 수정
    color: mix(#fff,$primary-color,30%);

    &:hover {
      text-decoration: underline;
    }
  }

.nav__sub-title { // 큰 글자
  display: block;
  margin: 0.5rem 0;
  padding: 0.25rem 0;
  font-family: $serif; // 수정
  font-size: $type-size-4; // 수정
  font-weight: bold;
  text-transform: uppercase;
  color: mix(#fff,$primary-color,20%);
  border-bottom: 1px solid $border-color;
}

변경된 모습 - 상단

변경된 모습 - 하단

2. 페이지 너비 비율

좌, 우측 너비 - Breakpoints

창 크기마다 화면 비율이 변하는데, 그 기준들을 설정한다.
차례대로 작은 거 중간 큰 것 순서이고, 젤 작은 건 애초에 아래에서 설정하는 사이드바가 사라진다.

• 참고로 $large보다 작은 x너비에서부터 양쪽 사이드바가 사라진 형태가 나오기 시작한다.

/*
   Breakpoints
   ========================================================================== */
// 창 크기마다 화면 비율이 변하는데 그 기준들
$small: 600px !default;
$medium: 768px !default;
$medium-wide: 900px !default;
$large: 1024px !default;
// $x-large: 1280px !default; // 수정전
$x-large: 1400px !default;
$max-width: $x-large !default;

좌, 우측 너비 - Grid

위에서 기준으로 한 창 크기에 따라 좌, 우측 사이드바 화면 비율을 설정한다.
차례대로 창이 좁은, 중간, 큰 기준으로 설정한다.

• 혹시 몰라서 기존 것은 주석으로 기억
• 그리고 어떤 창 크기일 때 설정하는 것인지 주석으로 설명

/*
   Grid
   ========================================================================== */
// 창 크기마다 맞춰 변하는 사이드바 크기
// $right-sidebar-width-narrow: 200px !default;
// $right-sidebar-width: 300px !default;
// $right-sidebar-width-wide: 400px !default;
$right-sidebar-width-narrow: 200px !default; // $large에서 설정됨
$right-sidebar-width: 250px !default; // $x-large에서 설정됨
$right-sidebar-width-wide: 350px !default; // $max-width인가? 적용된걸 못 봄

_archive.scss

우선, .archive__subtitle 부분이 너무 붙어있어서 간격을 추가하였다.

• _sass/minimal-mistakes/_archive.scss 에서 수정한다
• padding을 통해서 줄을 조금 내렸고, margin을 통해서 아래 포스팅 제목들과 거리를 두었다.
• “카테고리별 대표 페이지 제목” 부분에 사용 중인 스타일!

.archive__subtitle {
  // margin: 1.414em 0 0.5em; // 수정전
  margin: 0.8em 0 0;
  padding-bottom: 0.5em; // 추가
  margin-bottom: 0.9em; // 추가
  // font-size: $type-size-5; // 수정전
  font-size: $type-size-3;
  color: mix(rgb(84, 100, 173),$primary-color, 40%);
  border-bottom: 1px solid $border-color;
  font-family: $cute; // 수정후

  + .list__item .archive__item-title {
    margin-top: 0.5em;
  }
}

물론, 우리는 .archive__subtitle__default 도 사용하기 때문에 이부분도 수정한다!

• “Recent Posts” 제목 부분에 사용중!

//추가
.archive__subtitle__default{
  margin: 0.8em 0 0;
  padding-bottom: 0.5em; // 추가
  margin-bottom: 0.9em; // 추가
  font-size: $type-size-3;
  color: mix(rgb(84, 100, 173),$primary-color, 40%);
  border-bottom: 1px solid $border-color;
  font-family: $serif; // 수정후

  + .list__item .archive__item-title {
    font-family: $cute; // 수정후
    margin-top: 0.5em;
  }
}

다음으로, 각 포스팅 제목들이 너무 붙어있어서 이 또한 간격을 추가하였다.

• 폰트와 사이즈도 같이 수정했습니다!

/*
   List view
   ========================================================================== */

.list__item {
  margin-bottom: 0.3em; // 추가
  font-family: $cute; // 추가
  font-size: $type-size-4; // 추가
  .page__meta {
    margin: 0 0 4px;
    font-size: 0.6em;
  }
}

적용 그림

• 물론, 아직 적용하지 않은 스타일링도 사진 속에는 적용이 되어있는데 최근에 찍은 사진이기 때문이다.
• 다음 포스팅도 계속 따라오면 아래처럼 완벽히 같아질 것이다!
• 여기서는 전체적인 화면 비율의 바뀐 점과 게시물들 간격들이 수정됨을 확인하자@@