<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>TEST</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="message"></div>
<script src="script.js"></script>
</body>
</html>id에 message라고 설정을 해 놓고, 그걸 JS에서 document.getElementById를 사용해 불러온다.
window.matchMedia("화면너비").addEventListner("change", 함수) 하면 화면 너비가 change될때마다 함수가 실행되는 것이다
match되면 message의 textContent를 바꿀 수 있다.
useEffect가 없어서 내가 잘 할 수 있을 지 걱정이 된다만 열심히 해봐야겠다
const message = document.getElementById("message");
const mqMobile = window.matchMedia("(max-width: 600px)");
const mqTablet = window.matchMedia(
"(min-width: 601px) and (max-width: 1200px)"
);
const mqDesktop = window.matchMedia("(min-width: 1201px)");
function updateText() {
if (mqMobile.matches) {
message.textContent = "📱 모바일 화면입니다. (≤600px)";
} else if (mqTablet.matches) {
message.textContent = "📟 태블릿 화면입니다. (601~1200px)";
} else if (mqDesktop.matches) {
message.textContent = "🖥️ 데스크탑 화면입니다. (>1200px)";
}
}
// 초기 실행
updateText();
// 각각에 대해 change 이벤트 감지
mqMobile.addEventListener("change", updateText);
mqTablet.addEventListener("change", updateText);
mqDesktop.addEventListener("change", updateText);'코딩' 카테고리의 다른 글
| 화면 너비에 따라 변하고 클릭 시 열리고 닫히는 메뉴 만들기 (0) | 2025.07.26 |
|---|---|
| Adobe 웹사이트 클론 코딩 - 이미지와 텍스트 (0) | 2025.07.25 |
| HTML JavaScript CSS (0) | 2025.07.23 |
| 5월을 돌아보며........ (1) | 2025.05.30 |
| 스크롤 속도를 컴포넌트마다 다르게 하는 법 (0) | 2025.03.20 |
댓글