css @media 미디어쿼리 가변레이아웃

여기 전체 화면일때  4개씩 보이는 컨텐츠를 

 

 

창을 1412px로 줄여줬을때 3개씩 나오도록 조정해주자. 

 

 

---

 

먼저 그리드 부터 계산을 잘 해주고 들어가야한다

 

• 웹 화면은 전체화면 1920이지만,
  컨텐츠 그리드는 1280px을 기준으로 한다. (화면 환경이 다 다르기 때문에 표준 1280)

 

• 거기에 스크롤바 크기도 감안해줘야 하기때문에 
  1280 - 17 (세로 스크롤바 크기) = 1263 (컨텐츠 최대크기) 가 나온다.

 

• 그렇기 때문에 데스크탑 컨텐츠 그리드는 일반적으로 1200px 을 사용하여
  1280에서도 좌우여백 30px씩 확보한다.

 

• 따라서 컨텐츠 그리드가 1280 이상일 경우 가변레이아웃 처리가 필요하다 (css 미디어 쿼리 사용)
  보통 심미성, 사용성, 매체성 디자인에 사용 
  
  

---

 

• 컨텐츠 4개일때 전체 넓이 1304px
  최대 넓이 1280에서 좌우 여백 12+12(총24) 를 더하면 1304 px 

 

---

 

• 이미지 3개로 줄어들었을때 가로 값 978px
  컨텐츠 3개 값은 954px 좌우여백 12+12(총24) = 978px 

 

 

 

.main_all_game {
    /* 게임리스트가 여러줄이므로 좌우로 여백을 줘야하며 컨텐츠 크기가 1280 + 24(좌우여백) */
    width: 1304px;
    margin: 0 auto;
}
.main_all_game .game li{
    float: left;
    width: calc(25% - 24px);
    margin: 0 12px 60px;
}

 

먼저 컨텐츠 4개는 가로 넓이값 1304px로 지정해준 후 

li 리스트를 width: calc (25% - 24px) 나눠준다. (100% 의 4개당 1개 컨텐츠의 값은 25%  여기서 좌우여백 - (12+12)24px

 

 

 

---

 

 

@media (max-width:1412px) {
    .main_all_game {
        width: 978px;
    }
    .main_all_game .game li {
        width: calc(100% / 3 - 24px);
    }
}

max-width 컨텐츠 3개로 변하는 기점을 1412px 로 지정하고 

4개일때 컨텐츠 978px 을

width : calc(100% / 3 - 24px ) 로 지정해준다. (978크기 100센트에서 / 3 을해주고 -24 여백주기)

 

 

 

 

 

 

 

왜 가변 컨텐츠가 필요할까?

이렇게 갯수가 정해져 있지 않는 컨텐츠인 경우 (게시판이 계속 쌓이니까~)

inline-block 으로 가변컨텐츠로 만들어서 나중에 갯수가 늘어나도 지장이 없게 만들어준다!

가변컨텐츠일 경우 부모를 인라인 블럭으로 가운데 정렬을 해쥬자