components

• 공통 스타일 또는 컴포넌트는 처음부터 다 만들지 말고 작업을 하면서 하나씩 만들기

• normalize는 먼저 구글링으로 갖고 오기 주석 지우고 코드 한줄로 만들기

components

Container

• 컨테이너 좌/우 마진 값 계산할 때 %이용하기! 그리고 calc()이용해서 계산하는 방법 잘 기억해 두기

.Container {
  margin: 0 calc(18 / 375 * 100%);
}

• 넷플릿스에 column으로 스타일 적용할 수 있는 요소들이 있다. 그때마다 flex-flow: column wrap; 따로 적용하지 말고 column상태의 클래스를 만들어 적용하면 유지보수가 편하다

.Container--column {
  flex-flow: column wrap;
  justify-content: flex-start;
}

• 미디어 쿼리에 고정값을 사용하는 이유는 와이드 스크린이 설정 되었을 때 로고와 로그인 링크가 너무 좌우로 벌어지면 사용자 경험이 좋지 않기 때문에 두 컨텐츠의 간격이 일정 간격이상 멀어지지 안도록 최대 너비 설정

• margin: 0 auto;는 빈 공간을 양분한다. 수평으로 가운데 정렬한다. 단, auto 0은 적용이 불가능한 이유는 기본값이 0이기 때문에 수직으로 가운데 정렬이 적용되지 않는다.

@media (min-width: 60rem /* 960px/16 */ ) {
  .Container {
    min-width: 90rem;
    margin: 0 auto;
  }
}

@media (min-width: 90rem /* 1440px/16 */ ) {
  .Container {
    max-width: 120rem;
  }
}

HomeLink

기존의 body에 설정된 font: 1.6rem/1.5; 때문에 h1에 폰트 사이즈 만큼의 공간이 생겨서 a요소가 h1의 공간을 벗어나는 이슈가 생겨버린다. 그래서 HomeLink의 폰트 사이즈를 줄였다.

.HomeLink {
  font-size: 1rem;
}

Link

버튼의 padding값을 구할 때 디자인 시안에 소수점으로 나와 있어서 어떻게 계산을 해야 할지 몰랐다. 먼저 혼자 할 때는 그냥 반올림으로 임의로 계산을 했다.

• 디자인시안이 소수점일 때 계산 방법

  • padding-top: 5.5px / 11px = 0.5(em)

.Link {
  padding: 0.5em 0.6818em 0.7rem;
  font-size: 1.1rem;
}