전문가용 소스 코드 디스플레이

전문적이고 심미적인 코드 디스플레이

이 페이지는 고급스럽고 깔끔한 디자인으로 HTML, CSS, JavaScript 소스 코드를 표시합니다. 코드 하이라이팅, 테마 전환, 코드 복사 기능 등 다양한 기능을 포함하고 있습니다.

HTML 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>전문적 웹페이지</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>
<body>
    <header>
        <div class="container">
            <nav class="navbar">
                <a href="#" class="logo">CodeDisplay</a>
                <ul class="nav-menu">
                    <li><a href="#">홈</a></li>
                    <li><a href="#">소스 코드</a></li>
                    <li><a href="#">기능</a></li>
                    <li><a href="#">연락처</a></li>
                </ul>
                <button class="theme-toggle" id="themeBtn">
                    <i class="fas fa-moon"></i>
                </button>
            </nav>
        </div>
    </header>

    <main>
        <section class="hero">
            <div class="container">
                <h1>전문적이고 심미적인 코드 디스플레이</h1>
                <p>이 페이지는 고급스럽고 깔끔한 디자인으로 소스 코드를 표시합니다.</p>
                <a href="#code-section" class="btn">소스 코드 보기</a>
            </div>
        </section>

        <section id="code-section" class="code-section">
            <div class="container">
                <h2>소스 코드</h2>
                <div class="code-tabs">
                    <button class="tab-btn active" data-tab="html">HTML</button>
                    <button class="tab-btn" data-tab="css">CSS</button>
                    <button class="tab-btn" data-tab="js">JavaScript</button>
                </div>
                <div class="code-display">
                    <pre><code class="language-html">
                        <!-- HTML 코드가 여기에 표시됩니다 -->
                    </code></pre>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <div class="container">
            <p>© 2023 소스 코드 디스플레이. 모든 권리 보유.</p>
        </div>
    </footer>
</body>
</html>

CSS 코드

/* CSS 변수 정의 */
:root {
    --primary: #4361ee;
    --secondary: #3a0ca3;
    --accent: #f72585;
    --light: #f8f9fa;
    --dark: #212529;
    --gray: #6c757d;
    --light-gray: #e9ecef;
    --card-bg: #ffffff;
    --border-color: #dee2e6;
    --shadow: rgba(0, 0, 0, 0.08);
    --transition: all 0.3s ease;
}

/* 다크 모드 테마 */
.dark-theme {
    --primary: #5a6ff0;
    --secondary: #4a1fb8;
    --accent: #ff2d95;
    --light: #121212;
    --dark: #f8f9fa;
    --gray: #adb5bd;
    --light-gray: #2d2d2d;
    --card-bg: #1e1e1e;
    --border-color: #404040;
    --shadow: rgba(0, 0, 0, 0.25);
}

/* 기본 스타일 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: var(--light);
    color: var(--dark);
    line-height: 1.6;
    transition: var(--transition);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 헤더 스타일 */
header {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--card-bg);
    box-shadow: 0 4px 12px var(--shadow);
    position: sticky;
    top: 0;
    z-index: 100;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-menu a {
    color: var(--dark);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
}

.nav-menu a:hover {
    color: var(--primary);
}

.theme-toggle {
    background: var(--primary);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.theme-toggle:hover {
    background: var(--secondary);
    transform: rotate(15deg);
}

/* 히어로 섹션 */
.hero {
    padding: 5rem 0;
    text-align: center;
    background: linear-gradient(135deg, rgba(67, 97, 238, 0.1), rgba(247, 37, 133, 0.1));
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--primary);
}

.hero p {
    font-size: 1.2rem;
    color: var(--gray);
    max-width: 600px;
    margin: 0 auto 2rem;
}

.btn {
    display: inline-block;
    background: var(--primary);
    color: white;
    padding: 12px 28px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
}

.btn:hover {
    background: var(--secondary);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* 코드 섹션 */
.code-section {
    padding: 4rem 0;
}

.code-tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.tab-btn {
    padding: 10px 20px;
    background: var(--light-gray);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    color: var(--dark);
    transition: var(--transition);
}

.tab-btn.active {
    background: var(--primary);
    color: white;
}

.code-display {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 30px var(--shadow);
    overflow: auto;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .nav-menu {
        display: none;
    }
    
    .hero h1 {
        font-size: 2.2rem;
    }
    
    .code-tabs {
        flex-wrap: wrap;
    }
}

주요 기능

다크/라이트 모드

사용자 선호도에 따라 어두운 모드와 밝은 모드를 전환할 수 있습니다.

코드 하이라이팅

구문 강조 기능으로 가독성을 높여 코드를 쉽게 이해할 수 있습니다.

코드 복사 기능

한 번의 클릭으로 전체 코드 블록을 클립보드에 복사할 수 있습니다.

반응형 디자인

모든 기기에서 최적의 경험을 제공하는 반응형 레이아웃입니다.

가독성 최적화

명확한 타이포그래피와 적절한 간격으로 가독성을 극대화했습니다.

고성능

최적화된 코드로 빠른 로딩과 부드러운 인터랙션을 제공합니다.