티스토리 뷰
mediaquery 에 대하여 찾아보다가 이전까지는 사용하지 않았던 방식을 발견해서 메모메모!
<!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" media="(max-width: 400px)" href="style.css" />
<title>Document</title>
</head>
<body>
<div class="wrap">
<header>header</header>
<main>main</main>
</div>
</body>
</html>head 안에 link 태그를 보면 "media="(max-width: 400px)" 이라고 적힌 부분이 보인다. (최대 가로넓이 기준 400px 까지 적용)
예전 프로젝트에서 전체페이지는 적응형이나, main 페이지만 반응형 작업을 요청해서 css 파일 중복으로 애먹은 적이 있었는데, 그 때 이방식을 사용한다면 얼마나 유용했을까!
이 외에도 프린트 할때 색상을 지정하거나 등의 다양한 기능이 있다. 나름 유용할듯!
'HTML5, CSS3' 카테고리의 다른 글
| [CSS] font-display 속성 (0) | 2021.12.03 |
|---|---|
| [기초개념] 웹표준, 웹접근성, 웹호환성 정의비교 (0) | 2021.10.07 |
| [CSS] transform 속성에 대하여 (0) | 2021.04.18 |
| [CSS] animation 에 대하여 (0) | 2021.04.18 |
| [HTML, CSS] img 태그 영역에 맞추는 방법 (0) | 2021.04.18 |
댓글
공지사항
최근에 올라온 글