[ReactJS_Complete] CSS: @media

이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다.

 

 

⚛️ 기본 환경: IDE: VS code, Language: React

 

 

 

1. CSS module

.button {
  width: 100%;
  font: inherit;
  padding: 0.5rem 1.5rem;
  border: 1px solid #8b005d;
  color: white;
  background: #8b005d;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.26);
  cursor: pointer;
}
 
@media (min-width: 768px){
  .button {
    width: auto;
  }
}
 

 

2. styled

const Button = styled.button`
{
  width: 100%;
  font: inherit;
  padding: 0.5rem 1.5rem;
  border: 1px solid #8b005d;
  color: white;
  background: #8b005d;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.26);
  cursor: pointer;
 
  @media (min-width: 768px) {
  /* 화면의 너비가 768px 이상일 때 */
    width: auto;
  }
}
 

 

@media

구문: @media (조건문) {실행문}

all: default(생략 가능), 모든 미디어 장치에 적용

print: 인쇄용 장치에 사용

screen: 화면 등에 사용하는 viewpoint size에 사용

speech: 스크린 리더기가 페이지를 소리내어 읽을 때 사용

 

 

 

참고 자료

[CSS3강좌] 35강 반응형웹을 위한 미디어쿼리(@media screen{ })