블로그 설정 -> 꾸미기 -> 스킨편집
HTML 편집 -> 제일 아래에 밑의 코드 입력 | 시스템 적용만 하려면 기본 코드에서
1번 시스템 Default값 적용하는 것만 바꿔서 적용하면 될듯.
개발자로의 커리어를 시작하면서 개발 블로그를 꾸준히 적을 건데, HTML/CSS로 웹사이트를 변경하는 것은 단순히 블로그를 '예쁘게"하기 위함이라 자세한건 계속해서 발전해 나갈 생각!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dark Mode Toggle Button</title>
<style>
body {
background-color: white;
color: black;
}
/* Dark mode CSS */
body.dark-mode {
background-color: black;
color: white;
}
/* Toggle button CSS */
.toggle-btn {
display: inline-block;
position: relative;
width: 60px;
height: 34px;
}
.toggle-btn input[type="checkbox"] {
display: none;
}
.toggle-btn span {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
border-radius: 34px;
cursor: pointer;
transition: background-color 0.4s;
}
.toggle-btn span:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
border-radius: 50%;
transition: transform 0.4s;
}
input[type="checkbox"]:checked + span {
background-color: #2196F3;
}
input[type="checkbox"]:checked + span:before {
transform: translateX(26px);
}
</style>
</head>
<body>
<h1>Dark Mode Toggle Button</h1>
<!-- Toggle button -->
<label class="toggle-btn">
<input type="checkbox" onclick="toggleDarkMode()">
<span></span>
</label>
<p>This is a sample paragraph.</p>
<script>
function toggleDarkMode() {
var body = document.body;
body.classList.toggle("dark-mode");
}
</script>
</body>
</html>
이 코드는 body 요소에 대한 라이트 및 다크 모드 스타일을 정의하며, 라이트/다크 모드 전환을 위한 토글 버튼도 제공합니다.
토글 버튼은 label 요소를 사용하여 작성되었으며, input 요소가 토글 버튼의 상태를 저장하고 onclick 이벤트에 의해 toggleDarkMode() 함수가 호출됩니다. toggleDarkMode() 함수는 body 요소의 클래스에 "dark-mode"를 추가하거나 제거하여 라이트/다크 모드를 전환합니다.
CSS에서는 span 요소를 사용하여 토글 버튼의 디자인을 지정하고 있습니다. 체크박스의 상태에 따라 span 요소의 배경 색상과 위치가 변경되며, 체크박스의 상태를 나타내는 작은 원형 요소도 이동합니다.
이 코드를 사용하여 다크 모드를 지원하는 HTML 페이지를 만들 수 있습니다.
[ ChatGPT를 활용하여 작성 ]
1. 다크모드 적용이 되었지만
-> 시스템에서 디폴트로 설정되지 않았음.
2. 토글의 사이즈가 너무 큼
-> 사이즈와 배경 색상 등 조정 필요
3. 토글버튼과 문구가 위아래로 되어있음
-> 좌우로 변경
4. html작성에서 'absolute'와 'relative'의 차이 비교
1. 다크모드 시스템 적용
<script>
// Check system preference and set mode accordingly
const isDarkModePreferred = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
if (isDarkModePreferred) {
document.body.classList.add("dark-mode");
}
// Toggle dark mode
function toggleDarkMode() {
document.body.classList.toggle("dark-mode");
}
</script>다크모드를 시스템 적용에 맞추어서 불러오는 코드 삽입
isDarkModePreferred = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches';
윈도우 (Hosting Computer; 'Windows OS'가 아니다!)가 Darkmode를 선호하는지 확인과정을 거쳐서
if (isDarkModePreferred) ~
다크모드를 선호하면 다크모드로 불러옴 -> 다크모드는 이미 상단에 정의해둠
2. 토글의 사이즈 조정
하나하나 사이즈를 비교해보며,
버튼의 크기와 토글버튼의 크기 등을
비교하며 노가다 작업;
< 프론트엔드 전문 작업자들은 어떻게 작업하는지 궁금함 >
3. 문구와 토글버튼 좌우배치
<h1>Dark Mode Toggle Button
<!-- Toggle button -->
<label class="toggle-btn">
<input type="checkbox" onclick="toggleDarkMode()">
<span></span>
</label>
</h1>기존에는
<h1>Dark Mode Toggle Button </h1>
<label ~> ~ </label>
형식으로 두줄로 작성한 것을
<h1> ~ </h1>으로 조절함
위 코드에서는 "Dark Mode Toggle Button" 문자열을 h1 요소로 감싸고, h1 요소 내에 토글 버튼을 배치하도록 변경하였습니다. 따라서 "Dark Mode Toggle Button" 문자열 다음에 토글 버튼이 나타납니다.
[ ChatGPT 작성 ]
4. 토글에서 'Absolute'와 'Relative'의 차이
버튼 항목에서 Absolute를 적용하면 버튼이 존재하지만,
Relative를 적용하면 버튼이 사라지고 배경에 따라 적용이 됨
