📝 오늘 한 것

1. scss practice

📚 배운 것

프로토타입 & 해시 테이블은 원 노트에 따로 정리 (참고)

1. scss practice

(1) section 내부의 고정 header 수정

header의 위치가 고정됨에 따라 가로 스크롤이 생겨서 스크롤을 움직이면 header만 따로 노는 문제가 있었다.

section의 margin-top을 없애고, section 내부 header의 좌우 padding도 없앴다.
position의 값을 fixed에서 sticky로 수정했다.

fixed는 뷰포트를 기준으로 해당 엘리먼트의 위치가 결정되는 반면, sticky는 스크롤 되는 가장 가까운 상위 요소를 기준으로 위치가 결정된다.

.articles {
  background-color: $color-red;
  .articles-header__fixed {
    position: sticky;
    top: 0;
    width: 100%;
    padding: 40px 0;
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid $color-grey;
    background-color: inherit;
    color: $color-white;
  }
}

(2) flex → grid

body {
display: grid;
grid-template-columns: minmax(min-content, 40%) 60%;
grid-template-rows: auto;
}

✨ 내일 할 것

1. 정리 및 리뷰