이 글은 [[한글자막] 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(0, 0, 0, 0.26);
cursor: pointer;
@media (min-width: 768px) {
/* 화면의 너비가 768px 이상일 때 */
width: auto;
}
}
|
cs |
@media
구문: @media (조건문) {실행문}
all: default(생략 가능), 모든 미디어 장치에 적용
print: 인쇄용 장치에 사용
screen: 화면 등에 사용하는 viewpoint size에 사용
speech: 스크린 리더기가 페이지를 소리내어 읽을 때 사용
참고 자료
'HTML&CSS > CSS' 카테고리의 다른 글
[CSS] CheckBox Customizing (0) | 2023.06.11 |
---|---|
[ReactJS_Complete] CSS: transition (0) | 2023.05.31 |