-
큰창 기준으로 먼저 사이트 만들고 미디어 쿼리 적용해서 모바일사이즈로 만들고싶은데 미디어쿼리 자체가 적용이 안됩니다ㅠㅠ
콘솔창에서도 미디어쿼리자체가 보이질 않아요 왜그런걸까요..
링크 첨부 우선순위 때문에 그런건가 해서 순서도 바꿔봤고 테스트용html만들어서 해봤더니 테스트용은 정상적으로 적용이 되더라고요 뭐가 문제일까요ㅜㅜ
(html)
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="normalize.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="매출.css">
<title>Document</title>
</head><body>
<div class="wrap">
<div class="header">
<div class="box">
</div>
<div class="title">
<p>매출</p>
</div>
<div class="box invisible">
</div>
<div class="clear"></div>
</div>
</div>
<div class="search container">
<div class="img">
</div>
<div class="search-content">
<div class="search-bar">
<input type="text" placeholder="검색어를 입력해주세요">
</div>
<div class="flex-box">
<div class="search-date">
<div class="start">
<p>매출 조회 시작</p>
<input type="date">
</div>
<div class="end">
<p>매출 조회 종료</p>
<input type="date">
</div>
</div>
<div class="calender">
</div>
</div>
</div>
</div>
<div class="list">
<div class="list-group">
<p class="list-item">성명</p>
<p>홍길동</p>
<p>홍길동</p>
</div>
<div class="list-group">
<p class="list-item">연락처</p>
<p>010-1234-1234</p>
<p>010-1234-1234</p>
</div>
<div class="list-group">
<p class="list-item">일자</p>
<p>2021/02/20</p>
<p>2021/02/20</p>
</div>
<div class="list-group">
<p class="list-item">매출액</p>
<p>3,200,000</p>
<p>3,200,000</p>
</div>
</div>
</body></html>
(css)
html,body {
width: 100%;
box-sizing:border-box;
height:100%
}.header {
color: #6F7072;
font-weight: bold;
border-bottom: 1px solid #C9AFE4;
width: 100%;
min-width: 400px;
}.header>div {
margin:20px 0px 10px;
}.wrap {
width: 100%;
}.box {
float: left;
width: 33.333%;
}.invisible {
height: 1px;
}.title {
float: left;
width: 33.333%;
font-size:23px;
text-align: center;
}.clear {
clear: both
}.search { margin:150px auto; display:flex; width: 100%;}
.img { width:30%;}
.search-content { width: 60%;}
.search-date { width:100%; margin:auto;}
.img img { width:50%; display:block; margin:0 auto;}
.search-bar img { width:30px;}
.search-bar input { width:500px; border:none;}
.search-bar { border-bottom:1px solid #C9AFE4; width: 70%; display: flex;}.start, .end { display:flex; align-items:center; }
.end { margin-top: 10px;}
.search-date p { margin-right: 10px; font-size:18px; margin-bottom: 0;}
.search-date input { width:216px; height: 40px; }
.search-date { display:flex; flex-direction:column; margin-top:20px; width:70%;}
.flex-box { display:flex; align-items: center; justify-content:center; margin-top: 50px; width:70%;}
.calender img {width: 50px; }
.calender { width:25%;}
.search-date p,input { color:#4C2574; font-weight:bold;}.list { width: 100%; height:390px;}
.list-item { border-top:1px solid #C9AFE4; border-bottom:1px solid #C9AFE4; color:#6F7072; font-size:18px; font-weight:bold; padding:10px 0px;}
.list-group { width:25%; float:left; margin:auto; display:block; text-align:center;}
.list-group {font-weight:bold;}@media screen and(max-width:768px){
.wrap { background-color:red;}
}
- 답변은 로그인 후 가능합니다.