본문 바로가기
HTML&CSS/CSS

[ReactJS_Complete] CSS: @media

by HJ0216 2023. 6. 1.

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

 

 

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

 

 

 

1. CSS module

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.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;
  }
}
 
 
cs

 

2. styled

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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(0000.26);
  cursor: pointer;
 
  @media (min-width: 768px) {
  /* 화면의 너비가 768px 이상일 때 */
    width: auto;
  }
}
 
 
cs

 

@media

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

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

print: 인쇄용 장치에 사용

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

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

 

 

 

참고 자료

 

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

** 동영상으로 배우고 싶은 분은 아래 주소를 클릭하세요! https://youtu.be/uBrsPwzIZR0 1. 미디어 쿼리(Media Query) - 미디어 쿼리는 특정 조건이 true인 경우에만 코드 블록{ } 내부의 CSS 코드를 실행해주는

ossam5.tistory.com

 

'HTML&CSS > CSS' 카테고리의 다른 글

[CSS] CheckBox Customizing  (0) 2023.06.11
[ReactJS_Complete] CSS: transition  (0) 2023.05.31