📝 오늘 한 것

1. grid practice

📚 배운 것

1. SCSS

1) besthorrorscenes

https://besthorrorscenes.com/ 클론 코딩

(1) grid

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
  .grid-item {
    grid-column: 2 / -1;
    display: flex;
    flex-direction: column;
    line-height: 1.5;
    .rating {
      align-self: end;
      margin-top: 40px;
      font-weight: bold;
      color: $color-dark-red;
    }
  }
}

(2) 고정 header

.articles {
  margin-top: 100px; /* main content의 윗 부분이 고정 header에 가리지 않도록 */
  background-color: $color-red;
  .articles-header__fixed {
    position: fixed;
    width: 100%;
    height: 20px;
    top: 0;
    padding: 40px;
    border-bottom: 1px solid $color-grey;
    background-color: inherit;
  }
}

(3) gitignore 적용 안되는 문제 해결

dist 폴더를 gitignore 파일에 추가했다.
그런데 적용이 안돼서 해결 방법을 찾아봤다.

$ git rm -r --cached .
$ git add .
$ git commit -m "캐시 삭제"

(4) section / article

main을 section으로 수정했다.
section 안에 또 다른 section과 footer를 만들었다.

<section class="articles">
  <header class="articles-header__fixed">
    Currently viewing everything sorted by random .
  </header>
  <section class="articles-list"> <!-- main 대신 section으로 수정 -->
    <article>
      <div>
        <h2 class="article-title">The Oranges (2007)</h2>
        <span class="article-director">Directed by J.A. Bayona</span>
      </div>
      <img
           src="https://images2.minutemediacdn.com/image/upload/c_crop,h_2450,w_4368,x_0,y_165/v1562080363/shape/mentalfloss/29942-gettyimages-155302141.jpg?itok=45ARGbzy"
           alt="orange"
           />
      <div class="grid-container">
        <div class="grid-item">
          <p>
            <!-- 중략 -->
          </p>
          <span class="rating">My rating: 8/10</span>
        </div>
      </div>
      <div class="comments">
        <span>No Comments</span>
        <span>Leave a Comment</span>
      </div>
    </article>
    <article>
      <!-- 두 번쨰 article -->
    </article>
  </section>
  <footer class="articles-footer">
    <span class="logo__youtube">Youtube</span>
    <span class="logo__twitter">Follow @besthorrorscene</span>
  </footer>
</section>

(5) footer

.articles-footer {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  height: 150px;
  background-color: $color-white;
  color: $color-white;

  .logo__youtube {
    background-color: $color-red;
    border-radius: 16px;
    padding: 10px 20px;
  }
  .logo__twitter {
    background-color: $color-blue;
    border-radius: 16px;
    padding: 10px 20px;
  }
}

물론 @extend를 사용하여 수정할 수 있다.

✨ 내일 할 것

1. grid practice