반응형을 해야지 해야지 하다가 이제서야 공부하기 ^^.. 큼큼
Media-query
브라우저 너비 사이즈를 바꿈에 따라 그에 맞게 디자인을 변경시킬 수 있는 역할을 합니다. 반응형 디자인의 기본이라고 할 수 있습니다.
(미루고 미루던 저를 매우 치십쇼)
기본 사용 문법
@media(조건) {
스타일
}조건에는 max-width 값이나 min-width 값을 주어 조건을 지정하고 스타일에는 css 속성을 넣어 입히고자 하는 스타일을 지정해줍니다.
실제 코드로 적용해보기
// html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<div class="desktop">데스크탑 사이즈예용</div>
<div class="mobile">모바일 사이즈예용</div>
</body>
</html>//css
@media(max-width: 500px){
.desktop{
display: none;
}
}
@media(min-width: 800px){
.mobile{
display: none;
}
}
.desktop{
background-color: antiquewhite;
}
.mobile{
background-color: lightgreen;
}결과물!
너비가 500px 이하일 때
너비가 500px 보다 크고 800px 보다 작을 때
너비가 800px 이상일 때
위의 예시에서는 눈에 !!확!! 띄도록 display: none 으로 지정했지만 경우에 따라 폰트 사이즈를 바꾸거나 하는 등의 css 요소를 경우에 맞게 지정할 수 있습니다. 리액트 작업을 할 때에도 media-query 를 사용해서 반응형 작업을 할 수 있으며 또 react-responsive 라는 반응형 작업에 쓸 수 있는 라이브러리도 있습니다. 다음 게시글에는 이 라이브러리에 대해 다루어보겠습니다!
(왜 안해보고 어렵다고 생각했을까 싶네요 역시 뭐든 일단 해보고 생각하자)
코린이 일기장