반응형 웹 만들기

공지고 프로젝트는 모바일에서도 공지를 편하게 볼 수 있게할려고 시작한 프로젝트이다 따라서 화면에 맞추어 컴포넌트들이 잘 보여질 수 있도록 해야된다 컴포넌트들은 보톤 bootstrap react로 사용했기 때문에 전체 화면 크기를 맞추는데 사용했다

 

media 사용하기

media의 원리는 화면 크기를 알아내서 해당 크기에 맞는 css를 적용하는 것이다 media를 이용하면 화면크기가 바꼈을 때 화면 컨텐츠를 줄일 뿐만아니라 필요한 요소를 남기고 제거도 가능하고 비슷하게 화면이 커지면 안보이던것도 보이게 할 수 있다(css로 조정)

이 프로젝트에서는 모바일 화면과 태블릿 화면에 맞도록 조정했다

/* Desktop (Large) */
@media (max-width: 1200px) {
  div.media { 
    margin: 3% 20% 0 20%;
  }
}

/* Desktop */
@media (max-width: 992px) {
  div.media { 
    margin: 2% 15% 0 15%;
  }
}

/* Tablet */
@media (max-width: 768px) {
  div.media { 
    margin: 2% 15% 3% 15%;
  }
}

/* Mobile - Landscape */
@media (max-width: 430px) {
  div.media { 
    margin: 1% 5% 3% 5%;
  }
}

@media (min-width: 1200px) {
  div.media { 
    margin: 3% 25% 3% 25%;
  }
}

위 코드는 @media안 조건이 참이라면 아래의 div + media 클래스를 가지는 태그에 적용한다라는 뜻이다

최대가 430px 이하 -> 모바일

769px 이하 -> 태블릿

1200px 이하 -> 데스크 탑

최소가 1200px 이상 - > 다르게 정의했음 (4k)

 

가로 픽셀이 551일때 는 max-width: 768px이하라서 margin이 2, 15, 0, 3 으로 적용

 

가로 픽셀이 1300일때 는 min-width: 1200px적용 margin이 3,25,3,25가 적용된다