📝 오늘 한 것

1. scss practice

2. 해시 테이블(해시 충돌) 구현 (따로 정리)

📚 배운 것

1. scss practice

(1) background: linear-gradient

.article {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.1) 5%,
    transparent,
    transparent,
    transparent,
    transparent
  )
  $color-red;
}

top to bottom 방향으로 검정에서 투명으로 색이 서서히 변한다. 배경색은 red이다.
transparent를 여러 개 쓰면 검정 부분의 영역이 그만큼 줄어든다.

※ 이전에 구현했던 동영상 플레이어 코드 수정 (유튜브처럼 )

(2) 고정 header 수정

html,
body {
  height: 100%;
}

// 메인 헤더 CSS
.header__main {
  position: fixed;
  top: 0;
  left: 0;
  width: 40%;
  height: 100vh;
  padding: 10% 5%;
  background-color: $color-light-grey;
  overflow-y: auto;
}

// 섹션 CSS
.articles {
  height: 100%;
  margin-top: 100px;
  margin-left: 50%;
  background-color: $color-red;
  .articles-header__fixed {
    // 섹션 헤더 배치
    position: fixed;
    top: 0;
    left: 50%;
    right: 0;
    height: 100px;
    // 섹션 헤더 스타일 및 색상
    border-bottom: 1px solid $color-grey;
    background-color: inherit;
    // 폰트 스타일 및 정렬
    color: $color-white;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

✨ 내일 할 것

1. 해시 테이블 다시 구현해보기

2. 코드 리뷰 정리