레이아웃을 지정할때 반응형

media query

여러가지 방식이 있겠지만,
제일 먼저 생각 나는 방법은 css media query
예시 )

@media (max-width: 395px){
	모바일 사이즈
}
@media (max-width: 1200px){
	데스크탑 사이즈
}

해당 view port 에 따라 지정하기때문에, 해당 min/ max를 지정해주면 사용하기
편하지만, css 파일이 커진다, 즉 cssom 이 커지면서 성능적인 측면으로서는 안좋을수있다
각각 사이즈에 맞는 코드를 구현해야하기때문에 점점 규모가 커지면, 유지보수가 어려질수있다.

검색하는 와중에 재밌는 글을 발견했다, 여러가지의 다른 media queries 를 사용할때 실제로 성능에 많은 차이가 있을까?
https://helloanselm.com/writings/web-performance-one-or-thousand-media-queries

개발자가 하는 성능 테스트에서 클라이언트 환경에서의 성능을 확인할때, media query를 사용하게되는 시점은 처음 랜더링되어 프린트 되는 시점 또는 사이즈(viewport)가 변경이 될때 media query를 거치게 되는데 이때 CPU를 혹사 시킬수있다 만약에 유저가 사이즈를 계속 바꾼다면... 유저가 엄청나게 자주 계속 사이즈를 변경하지 않는 이상 성능적인 측면으로 고민할필요까지는 아직 없는듯 하다.

Container Queries

/* Default heading styles for the card title */
.card h2 {
  font-size: 1em;
}

/* If the container is larger than 700px */
@container (min-width: 700px) {
  .card h2 {
    font-size: 2em;
  }
}