728x90
==========
아래는 다크모드, 가로 크기 조절, 다국어 지원 기능을 갖춘 간단한 다국어 웹페이지입니다.
🌟 주요 기능
🌙 다크모드 & ☀️ 화이트모드
사용자가 다크모드/화이트모드를 전환할 수 있음.
변경된 모드는 로컬 스토리지(localStorage)에 저장되어, 새로고침 후에도 유지됨.
운영체제(OS) 기본 설정(예: Windows, macOS의 다크모드)에 따라 초기 모드 자동 감지.
📏 가로 크기 조절 (400px ~ 1200px)
슬라이더를 이용해 웹페이지의 가로 크기(width)를 조절할 수 있음.
변경된 크기는 로컬 스토리지(localStorage)에 저장되어, 새로고침 후에도 유지됨.
최소 400px ~ 최대 1200px까지 10px 단위로 조절 가능.
🌎 다국어 지원 (5개 언어)
**영어(English), 한국어(Korean), 일본어(Japanese), 중국어(Chinese), 힌디어(Hindi)**를 지원.
사용자가 언어를 선택하면, 페이지의 텍스트가 해당 언어로 변경됨.
선택한 언어는 로컬 스토리지(localStorage)에 저장되어, 새로고침 후에도 유지됨.
기본적으로 사용자의 브라우저 언어를 감지하여 자동 설정.
📌 UI 구성 요소
① 다크모드 버튼 (#themeToggle)
클릭하면 다크모드 / 화이트모드 전환.
☀️ Light Mode / 🌙 Dark Mode 로 버튼 텍스트 변경됨.
② 가로 크기 조절 슬라이더 (#widthSlider)
슬라이더를 조작하면 #container_wgi3jreg의 width 값이 실시간으로 변경됨.
최소 400px, 최대 1200px까지 조정 가능.
③ 언어 선택 드롭다운 (#languageSelect)
사용자가 원하는 언어를 선택하면 해당 언어로 웹사이트의 텍스트 변경됨.
④ 콘텐츠 영역
#title → "환영합니다" / "Welcome" 같은 제목 표시.
#description → "이것은 다국어 웹사이트입니다." 같은 설명 표시.
💡 동작 방식
페이지 로드 시 (DOMContentLoaded)
**로컬 스토리지(localStorage)**에서 **이전 설정(다크모드, 가로 크기, 언어)**을 불러옴.
저장된 값이 없으면 기본값(다크모드: OS 설정, 가로 크기: 800px, 언어: 브라우저 언어) 적용.
사용자가 설정 변경 시
다크모드, 가로 크기, 언어 설정이 즉시 반영됨.
변경된 값은 로컬 스토리지(localStorage)에 저장되어, 다음 방문 시에도 유지됨.
미리 보기
프로젝트 구조
/project-root
│── index.html
│── /static
│ │── /json
│ │ ├── languages.json
│ │── /js
│ │ ├── language.js (다국어 기능)
│ │ ├── theme.js (다크모드 기능)
│ │ ├── size.js (가로 크기 조절 기능)
│ │ ├── main.js (초기 실행 및 이벤트 처리)
│── /static/css
│ ├── styles.css
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multilingual Website</title>
<link rel="stylesheet" href="static/css/styles.css">
</head>
<body>
<!-- 다크모드 & 크기 조절을 하나의 컨테이너에서 적용 -->
<div id="container" class="container">
<button id="themeToggle">🌙 Dark Mode</button>
<!-- 가로 크기 조절 슬라이더 -->
<input type="range" id="widthSlider" min="400" max="1200" step="10">
<select id="languageSelect">
<option value="en">English</option>
<option value="ko">한국어</option>
<option value="ja">日本語</option>
<option value="zh">中文</option>
<option value="hi">हिन्दी</option>
</select>
<h1 id="title"></h1>
<p id="description"></p>
<script src="static/js/language.js"></script>
<script src="static/js/theme.js"></script>
<script src="static/js/size.js"></script>
<script src="static/js/main.js"></script>
</div>
</body>
</html>
languages.json
{
"en": {
"title": "Welcome",
"description": "This is a multilingual website."
},
"ko": {
"title": "환영합니다",
"description": "이것은 다국어 웹사이트입니다."
},
"ja": {
"title": "ようこそ",
"description": "これは多言語ウェブサイトです。"
},
"zh": {
"title": "欢迎",
"description": "这是一个多语言网站。"
},
"hi": {
"title": "स्वागत है",
"description": "यह एक बहुभाषी वेबसाइट है।"
}
}
language.js
window.setLanguage = function(lang) {
localStorage.setItem("selectedLang", lang);
loadLanguage(lang);
};
window.loadLanguage = function(lang) {
fetch("static/json/languages.json")
.then(response => response.json())
.then(data => {
document.querySelector("#title").innerText = data[lang].title;
document.querySelector("#description").innerText = data[lang].description;
});
};
main.js
document.addEventListener("DOMContentLoaded", function() {
const userLang = navigator.language || navigator.userLanguage;
const defaultLang = userLang.split('-')[0]; // "en", "ko", "ja", etc.
const savedLang = localStorage.getItem("selectedLang") || defaultLang;
loadLanguage(savedLang);
document.getElementById("languageSelect").value = savedLang;
document.getElementById("languageSelect").addEventListener("change", function(e) {
setLanguage(e.target.value);
});
initTheme(); // 다크모드 초기화
initContainerWidth(); // 가로 크기 조절 초기화
});
size.js
window.setContainerWidth = function(width) {
const container = document.getElementById("container");
container.style.width = `${width}px`; // 가로 크기 변경
localStorage.setItem("containerWidth", width); // 저장
};
window.initContainerWidth = function() {
const widthSlider = document.getElementById("widthSlider");
const savedWidth = localStorage.getItem("containerWidth") || 800; // 기본값 800px
setContainerWidth(savedWidth); // 초기 크기 설정
widthSlider.value = savedWidth; // 슬라이더 값 설정
widthSlider.addEventListener("input", function() {
setContainerWidth(this.value);
});
};
theme.js
window.setTheme = function(mode) {
const container = document.getElementById("container");
const themeToggle = document.getElementById("themeToggle");
if (mode === "dark") {
container.classList.add("dark-mode");
themeToggle.innerText = "☀️ Light Mode";
localStorage.setItem("theme", "dark");
} else {
container.classList.remove("dark-mode");
themeToggle.innerText = "🌙 Dark Mode";
localStorage.setItem("theme", "light");
}
};
window.initTheme = function() {
const themeToggle = document.getElementById("themeToggle");
const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
const savedTheme = localStorage.getItem("theme") || (prefersDarkMode ? "dark" : "light");
setTheme(savedTheme);
themeToggle.addEventListener("click", function() {
const currentTheme = document.getElementById("container").classList.contains("dark-mode") ? "light" : "dark";
setTheme(currentTheme);
});
};
styles.css
:root {
--bg-color: white;
--text-color: black;
}
.dark-mode {
--bg-color: black;
--text-color: white;
}
body {
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* 컨테이너: 다크모드 & 가로 크기 조절 */
#container {
width: 800px; /* 기본 크기 */
min-width: 200px;
max-width: 92%;
background-color: var(--bg-color);
color: var(--text-color);
padding: 20px;
text-align: center;
}
다운로드
==========
728x90
'javascript' 카테고리의 다른 글
| Password field is not contained in a form 이런 경고 표시 뜰때 해결 방법 (0) | 2025.03.28 |
|---|---|
| 애드센스 디스플레이 & 멀티플렉스 광고 코드 완벽 분석 및 활용 전략 (1) | 2025.03.08 |
| 자바스크립트 Base64로 이미지 파일 바이트로 바꾸기 (0) | 2025.02.16 |
| 구글 드라이브에 있는 이미지의 공유 링크 구글 시트로 한번에 가져오기 (0) | 2025.02.13 |
| 자바스크립트(JavaScript) 구글스프레드시트 데이터 가져오기 (0) | 2025.02.13 |
