medis query는 반응형 웹사이트를 만들기 위해서 반드시 알아야 합니다!!
사용법
HTML: viewport meta
<head>
<meta name="viewport" content="width=device-width" />
</head>
CSS: media query
@media screen and (min-width: 768px){
.box{
background-color:
}
.box::after{
content: "Tablet"
}
}
//768px 이상에서는 이런 스타일을 주라는 선언
가상요소
::before, after{
content: " " // 꼭 넣어줘야 함!!
}
'CSS' 카테고리의 다른 글
| [CSS] img와 background image 태그 중에 뭘 쓰는게 좋을까? (0) | 2022.02.01 |
|---|---|
| [CSS] Flex 간단한 실습하기 (0) | 2022.02.01 |
| [CSS] Flexbox 알아보기 (0) | 2022.02.01 |
| [CSS] position 실습하면 배운 것 (0) | 2022.02.01 |
| [CSS] position 알아보기 (0) | 2022.02.01 |
