반응형 웹: 동작하는 기기의 화면과 해상도에 맞춰 알아서 반응.
1. meta 태그 - viewport
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>2. 미디어 쿼리
1) CSS 파일 내에 직접 작성
/* 모바일에 최적화된 예외 CSS 코드*/
@media (max-width: 768px) {
}/* 데스크탑에 최적화된 예외 CSS 코드*/
@media (min-width: 992px) {
}2) <link> 태그에 media 속성 설정
<link rel="stylesheet" href="style.css">
* 보통 1번을 많이 쓰는데, 1,2번 둘다 써도 된다.
'IT' 카테고리의 다른 글
| AI 정치관상 테스트 (진보 vs 보수) (0) | 2022.02.14 |
|---|---|
| 카카오톡 공유하기 (kakao share) (0) | 2022.02.12 |
| 딥페이크 앱 20선 소개 ( DeepFake app ) (4) | 2022.02.11 |
| 유닉스(unix) vi 명령어 (0) | 2019.11.21 |
| 소셜미디어의 장점과 단점 (0) | 2019.11.19 |