웹 사이트 다크모드 구현 예시
1. darkmode로 적용할 CSS 변수 값을 만든다.
.dark-mode-variables{
--color-background: #181a1e;
--color-white: #202528;
--color-dark: #edeffd;
--color-dark-variant: #a3bdcc;
--color-light: rgba(0, 0, 0, 0.4);
--box-shadow: 0 2rem 3rem var(--color-light);
}
2. 다크모드를 토글할 HTML 버튼을 만들고 클래스를 넣어준다.
<div class="nav">
<button id="menu-btn">
<span class="material-icons-sharp">
menu
</span>
</button>
<div class="dark-mode">
<span class="material-icons-sharp active">
light_mode
</span>
<span class="material-icons-sharp">
dark_mode
</span>
</div>
3. 다크모드로 바꿀 HTML 요소들을 선택자로 잡아준다.
.right-section .dark-mode{
background-color: var(--color-light);
display: flex;
justify-content: space-between;
align-items: center;
height: 1.6rem;
width: 4.2rem;
cursor: pointer;
border-radius: var(--border-radius-1);
}
.right-section .dark-mode span{
font-size: 1.2rem;
width: 50%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.right-section .dark-mode span.active{
background-color: var(--color-primary);
color: white;
border-radius: var(--border-radius-1);
}
4. javascript로 클릭 이벤트를 받아서 토글을 해준다.
const darkMode = document.querySelector('.dark-mode');
darkMode.addEventListener('click', () => {
document.body.classList.toggle('dark-mode-variables');
darkMode.querySelector('span:nth-child(1)').classList.toggle('active');
darkMode.querySelector('span:nth-child(2)').classList.toggle('active');
})
챗 gpt의 좀 더 쉬운 예시를 들면 다음과 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Mode Toggle</title>
<style>
body {
background-color: #f0f0f0;
color: #333;
transition: background-color 0.3s ease;
}
.dark-mode {
background-color: #333;
color: #f0f0f0;
}
.container {
text-align: center;
margin-top: 50px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h1>Dark Mode Toggle</h1>
<button id="darkModeToggle">Toggle Dark Mode</button>
</div>
<script>
const darkModeToggle = document.getElementById('darkModeToggle');
const body = document.body;
darkModeToggle.addEventListener('click', function() {
body.classList.toggle('dark-mode');
});
</script>
</body>
</html>
한편 react 만들거나 java로 구현할 때, .net으로 구현할 때 또 달라진다. 공통적으로 들어가는 html, css, js는 동일하지만 react의 경우 react.js로 다르게 구현하기 때문에 완전히 코드가 달라진다. react.js로 프론트를 하고 스프링으로 백엔드를 하는 경우도 있다.
그냥 심심해서 물어봤다.
Comparing the speed of C++ and Java is not straightforward, as it depends on various factors such as the specific implementation, the compiler or virtual machine used, the optimizations applied, and the nature of the tasks being performed.
Here are some considerations:
- Execution Speed:
- C++ is typically considered faster than Java in terms of raw execution speed. This is because C++ is a statically typed language that compiles directly to machine code, while Java is usually compiled to bytecode and executed by the Java Virtual Machine (JVM). However, JVMs have become increasingly sophisticated and can often optimize code at runtime, narrowing the performance gap in many cases.
- Memory Management:
- C++ gives developers direct control over memory management, allowing for more efficient memory usage. However, this also means developers must manage memory manually, which can lead to bugs such as memory leaks or segmentation faults.
- Java, on the other hand, uses automatic memory management through garbage collection. While this can introduce some overhead, modern garbage collectors have become quite efficient, and the ease of memory management can often outweigh the slight performance cost.
- Just-In-Time (JIT) Compilation:
- Some Java implementations (like Oracle's HotSpot JVM) use JIT compilation, which can dynamically optimize and compile frequently executed code to native machine code at runtime. This can significantly improve the performance of Java applications over time as the JVM adapts to the runtime environment and usage patterns.
- Application Domain:
- For many applications, the difference in speed between C++ and Java may not be significant enough to be a deciding factor. Other considerations such as development time, maintainability, and ecosystem support may be more important.
- Platform and Hardware Dependencies:
- The speed of execution can also be influenced by platform-specific optimizations and hardware dependencies. C++ allows for finer control over these aspects, which can sometimes lead to better performance in specific scenarios.
In summary, while C++ is often faster than Java in terms of raw execution speed, the difference may not be as significant as it once was due to advancements in JVM technology and optimization techniques. Developers should consider factors beyond just speed when choosing between C++ and Java, such as memory management, development productivity, and ecosystem support.
The speed comparison between Java and C++ for algorithms depends on various factors such as the complexity of the algorithm, the efficiency of the implementation, the compiler optimizations, and the specific use case. Here are some key points to consider:
- Low-Level Control:
- C++ provides more low-level control over memory management and hardware resources compared to Java. This can allow for more efficient implementations of algorithms that require fine-grained control over memory layout or processor instructions.
- Runtime Environment:
- Java programs typically run on a virtual machine (JVM), which introduces some overhead compared to native machine code execution in C++. However, modern JVMs are highly optimized and can often achieve performance comparable to native code, especially for long-running applications where Just-In-Time (JIT) compilation and runtime optimizations can be significant.
- Language Features:
- Both Java and C++ offer features that can impact algorithm performance. For example, Java's automatic memory management (garbage collection) can introduce overhead, but it also reduces the risk of memory-related bugs. C++'s support for low-level pointer manipulation can lead to more efficient memory usage but requires careful management to avoid memory leaks and other issues.
- Library Support:
- Both languages have extensive standard libraries and third-party libraries that can impact algorithm performance. The choice of libraries and their efficiency can affect the overall speed of the algorithm implementation.
- Compiler Optimizations:
- C++ compilers often perform aggressive optimizations during compilation, which can lead to highly efficient machine code. Java's JIT compilation can also optimize code at runtime based on usage patterns, but it may take some warm-up time before these optimizations take effect.
- Parallelism and Concurrency:
- Both languages support parallelism and concurrency, but the approaches differ. C++ offers low-level threading primitives and libraries like OpenMP and Intel TBB for parallelism. Java provides high-level concurrency abstractions through the Java Concurrency API and supports parallelism through libraries like the Fork/Join framework and Java Streams API.
In general, C++ tends to offer more control and potential for fine-tuning performance, especially for highly optimized or specialized algorithms. However, Java's performance can often be sufficient for many applications, and its productivity benefits, robust ecosystem, and platform independence may outweigh any performance differences, especially for larger projects or when developer productivity is a primary concern. Ultimately, the choice between Java and C++ should consider the specific requirements and constraints of the project.
한쪽이 완전히 정답이다라는 말은 하지 않는다. C++로 알고리즘을 처리하는 것이 아무래도 전문화 되었을 때 더욱 빛을 발휘한다고 한다. 연산 속도라는 것이 정말 웃긴 이야기이긴 하다. 정말 좋은 클라우드 서버 인프라를 적은 비용에 사용할 수 있는 시대에 적당한 웹 서핑만 가능하면 노트북에서도 고사양 게임도 AI 모델도 굴릴 수 있지 않은가?
물론 화면에 뿌려지는 그래픽의 품질은 달라지겠지만
'클론코딩 > Responsive Admin Dashboard' 카테고리의 다른 글
| Responsive Admin Dashboard with Light & Dark Mode #3 (0) | 2024.02.22 |
|---|---|
| Responsive Admin Dashboard with Light & Dark Mode #2 (0) | 2024.02.18 |
| Responsive Admin Dashboard with Light & Dark Mode #1 (0) | 2024.02.17 |