Header

header 부분의 작업 과정을 기록합니다.

기록하기

1. 설계! 설계! 설계가 정말 중요하다. 그래야 고생을 덜 한다. 클래스 하나 바꿨더니 수정해야 할게 너무 많다. 처음부터 컴포넌트 이름이나 클래스명을 다 설계하자 천천히 가는 것 같지만 그게 제일 빠른 길이다.

기억하기

<img> 요소에 사이즈 입력하기

단축키 : ctrl + shift + I (MAC 기준)

<img src="assets/Logo.svg" alt="홈링크" width="870" height="236" />

왜 이미지 사이즈를 입력해야 할까? 링크에 들어가서 설명 보기!

반응형이 부자연스러울 때

문제

시안에 나와있는 대로 컴포넌트 Container에 margin값으로 속성을 주었다. 그러다 보니 반응형으로 페이지를 확인해 봤을 때 960~1299px 너비에서 아래 이미지와 같이 콘텐츠가 화면의 양 옆에 붙어버렸다.

화면의 양 옆에 콘텐츠가 붙는다

해결

.Container {
  @include mx(percentage(18/375));

  @include media('>=lg') {
    max-width: 92vw;
    @include mx(auto);
  }

max-width: 92vw을 적용해 주었다.

공부

이런 경우에 반응형 웹에서 자주 사용되는 단위를 사용해서 적용하자! → vw, vh, vmax, vmin, %, calc() 등