20230110 TIL CSS 코드는 위에서 아래로 실행된다.

 

포트폴리오의 회원 목록 페이지를 작업하면서 이 페이지는 반응형으로 작업을 하는 것이 좋을 것 같은 기분이 들었다.
반응형을 적용하기 딱 좋은 grid이고, 반응형을 적용하지 않으면 너무 휑하거나 너무 좁아지는 등의 문제가 있었기 때문이다.
그리고 반응형을 모든 부분에 적용을 해보지는 못하더라도 적용을 해보고 싶었기 때문에 반응형을 적용해보았다.
그런데 이상하게 일정 크기 이상 줄여도 적용이 되지 않는 것이었다.

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1em;
  margin: 1em;

  @media (max-width: 640px) {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  
  @media (max-width: 980px) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  @media (max-width: 1264px) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

이렇게 코드를 작성해두었는데, 4단에서 3단으로 줄어들긴 하는데, 그 이상 줄어들지 않았다.
분명히 max-width를 설정해두었는데, 적용이 되지 않아 당황스러웠다.

그런데 적용되지 않은 이유는 생각보다 간단했는데,
코드는 위에서 아래로 읽히고, css는 동일 속성에 대한 값이 제일 뒤에 오는 값으로 덮어씌워지기 때문이다.
즉, 창을 줄여 width가 640px보다 작아지면, (max-width: 1264px), (max-width: 980px), (max-width: 640px) 모두 만족하게 되고,
가장 뒤에오는 아래의 코드가 적용된 것이다.

  @media (max-width: 1264px) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

따라서 창 너비를 조절함에 따라 내가 원하는대로 단 수가 줄었다 늘었다 하게 만들려면

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1em;
  margin: 1em;

  @media (max-width: 1264px) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  @media (max-width: 980px) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  @media (max-width: 640px) {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

위와 같이 작성해야 한다.

코드는 위에서 아래로 읽힌다는 것을 꼭 기억하도록 하자!