반응형
<!DOCTYPE html>
<html>
<head>
<title>반응형 레이아웃 변경</title>
<style>
/* 스타일은 간단하게 구성합니다. */
.container {
display: flex;
flex-wrap: wrap;
}
.box {
width: 50%;
height: 200px;
background-color: #f0f0f0;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* 미디어 쿼리를 사용하여 화면 크기가 600px 이하일 때 스타일 변경 */
@media screen and (max-width: 600px) {
.box {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="box">박스 1</div>
<div class="box">박스 2</div>
</div>
<script>
// 웹 페이지 로드 완료 시 실행
document.addEventListener("DOMContentLoaded", function() {
function adjustLayout() {
const container = document.querySelector(".container");
const boxes = document.querySelectorAll(".box");
const screenWidth = window.innerWidth;
// 화면 크기가 600px 이하일 때 세로로 배치
if (screenWidth <= 600) {
container.style.flexDirection = "column";
boxes.forEach(box => {
box.style.width = "100%";
});
} else {
// 화면 크기가 600px보다 클 때 가로로 배치
container.style.flexDirection = "row";
boxes.forEach(box => {
box.style.width = "50%";
});
}
}
// 초기 레이아웃 설정
adjustLayout();
// 화면 크기가 변경될 때마다 레이아웃 재조정
window.addEventListener("resize", adjustLayout);
});
</script>
</body>
</html>JavaScript 설명
abjustLayout() 은 현재 화면의 크기를 가져와서 600px 이하일때와 그 이상일때에 따라 레이아웃의 px을 조정한다.
window.addEventListener("resize", adjustLayout) 화면 크기가 변경될때마다 adjustLayout() 함수를 호출하여 레이아웃을 재조정 한다.
반응형
'JavaScript' 카테고리의 다른 글
| [JavaScript] 자동으로 섹션 슬라이드 (0) | 2023.07.27 |
|---|---|
| [JavaScript] 선택해서 섹션 이동하기 (0) | 2023.07.27 |
| [JavaScript] ES6 문법 개념 (0) | 2023.07.26 |
| [JavaScript] 버블링(Bubbling) (0) | 2023.07.26 |
| [JavaScript] HTML/CSS/JS 간단한 팝업창 만들기 (0) | 2023.07.26 |
