1.mediaquery와 @media의 해석
mediaquery란 어떠한 조건을 갖추었을때만 작동하도록하는 css이다
@media(max or min -width:600px){
#pw{display:block;}
}
해석:화면의 너비가 600px보다 작을때 혹은 클때 #pw의 화면의 속성을 block으로 하라는 의미 이다
*문제발생
실습과정중 아무리 수정을 해도 mediaquery가 chrome에서는 작동하지 않았고 혹시나 하여 익스플로러로 열어보니
익스플로러에서만 작동하였다.
*해결
구글링을 통하여 <head>안에 <meta name="viewport" content="width=device-width, initial-scale=1.0">를 추가해야한다는 것을 알게되어 실행하니 정상적으로 작동하였다.
'WebApp > Web CSS' 카테고리의 다른 글
| css의 이해- 중복의 제거 (0) | 2020.07.07 |
|---|---|
| css의 이해-grid (0) | 2020.07.05 |
| css의 이해- box model (0) | 2020.07.05 |
| css의 이해-selector (0) | 2020.07.05 |
| css의 이해 (0) | 2020.07.05 |
