media.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 미디어쿼리 반응형 -->
<title>미디어쿼리 연습</title>
<style type="text/css">
body{
background-color: gray;
}
@media screen and (min-width:1024px){ /* 데스크탑 */
body{
background-color: olive;
}
}
@media screen and (max-width:1023px){ /* 태블릿 */
body {
background-color: maroon;
}
}
@media screen and (max-width:540px){ /* 스마트폰 */
body {
background-color: navy;
}
}
</style>
<script type="text/javascript">
/* console.log(window.innerWidth);
console.log(window.innerHeight); */
window.onresize=function(event){
document.getElementById('size').textContent = window.innerWidth + " x " + window.innerHeight;
}
</script>
</head>
<body>
<h1 id="size">너비 : </h1>
</body>
</html>
'개발 공부 Today I Learned' 카테고리의 다른 글
| [국비 54일차 ~ 58일차] 팀 프로젝트 게시판 구현 (0) | 2024.02.12 |
|---|---|
| [국비 53일차 TIL] 사진 업로드 게시판 만들기 (0) | 2024.02.03 |
| [국비 51일차 TIL] 관리자페이지에서 IP 확인하기 (0) | 2024.02.01 |
| [국비 50일차 TIL] 팀 프로젝트 - 우리 반 커뮤니티 사이트 만들기 (포스팅 게시판) (0) | 2024.01.30 |
| [국비 49일차 TIL] 어드민의 게시글 관리 페이지 불러오기 (0) | 2024.01.30 |
댓글