도움말 화면 html 만들기: 두 판 사이의 차이

2025년 8월 27일 (수) 11:24 판

<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <style>
        body {
            font-family: 'Noto Sans KR', sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
            color: #333;
        }
        .container {
            max-width: 1000px;
            margin: 0 auto;
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 30px;
        }
        .search-box {
            display: flex;
            margin-bottom: 20px;
        }
        #search-input {
            flex: 1;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px 0 0 4px;
            font-size: 16px;
        }
        #search-btn {
            padding: 10px 15px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        #search-btn:hover {
            background-color: #2980b9;
        }
        .help-nav {
            display: flex;
            margin-bottom: 20px;
        }
        .help-categories {
            width: 250px;
            border-right: 1px solid #ddd;
            padding-right: 15px;
        }
        .category {
            cursor: pointer;
            padding: 8px 10px;
            border-radius: 4px;
            transition: background-color 0.3s;
        }
        .category:hover {
            background-color: #f0f0f0;
        }
        .category.active {
            background-color: #e6f2ff;
            color: #3498db;
            font-weight: bold;
        }
        .help-content {
            flex: 1;
            padding-left: 20px;
        }
        .topic {
            display: none;
            border-bottom: 1px solid #eee;
            padding-bottom: 15px;
            margin-bottom: 15px;
        }
        .topic h3 {
            color: #2c3e50;
            margin-bottom: 10px;
        }
        .topic.active {
            display: block;
        }
        #search-results {
            display: none;
        }
        .result-item {
            cursor: pointer;
            padding: 10px;
            border-radius: 4px;
            transition: background-color 0.3s;
            margin-bottom: 10px;
        }
        .result-item:hover {
            background-color: #f0f0f0;
        }
        .highlight {
            background-color: #ffff99;
            font-weight: bold;
        }
        .back-btn {
            display: none;
            padding: 8px 15px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-bottom: 15px;
        }
        .back-btn:hover {
            background-color: #2980b9;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>도움말 시스템</h1>
        
        <div class="search-box">
            <input type="text" id="search-input" placeholder="도움말 검색...">
            <button id="search-btn"><i class="fas fa-search"></i> 검색</button>
        </div>
        
        <button class="back-btn" id="back-to-help">도움말 목록으로 돌아가기</button>
        
        <div id="search-results">
            <h2>검색 결과</h2>
            <div id="results-list"></div>
        </div>
        
        <div class="help-nav" id="help-content">
            <div class="help-categories">
                <h2>카테고리</h2>
                <div class="category active" data-category="getting-started">시작하기</div>
                <div class="category" data-category="account">계정 관리</div>
                <div class="category" data-category="features">주요 기능</div>
                <div class="category" data-category="troubleshooting">문제 해결</div>
            </div>
            
            <div class="help-content">
                <!-- 시작하기 카테고리 -->
                <div class="topic active" data-category="getting-started" id="intro">
                    <h3>프로그램 소개</h3>
                    <p>이 프로그램은 사용자가 쉽게 작업을 수행할 수 있도록 설계되었습니다. 주요 기능과 인터페이스에 대한 설명을 제공합니다.</p>
                </div>
                
                <div class="topic" data-category="getting-started" id="installation">
                    <h3>설치 방법</h3>
                    <p>프로그램을 설치하기 위한 단계별 지침을 제공합니다.</p>
                    <ol>
                        <li>웹사이트에서 설치 파일을 다운로드합니다.</li>
                        <li>다운로드한 파일을 실행합니다.</li>
                        <li>설치 마법사의 지시를 따릅니다.</li>
                        <li>설치가 완료되면 프로그램을 실행합니다.</li>
                    </ol>
                </div>
                
                <!-- 계정 관리 카테고리 -->
                <div class="topic" data-category="account" id="create-account">
                    <h3>계정 생성</h3>
                    <p>새 계정을 만들기 위한 절차를 설명합니다.</p>
                </div>
                
                <div class="topic" data-category="account" id="login">
                    <h3>로그인</h3>
                    <p>프로그램에 로그인하는 방법을 설명합니다.</p>
                </div>
                
                <div class="topic" data-category="account" id="password">
                    <h3>비밀번호 재설정</h3>
                    <p>비밀번호를 잊어버렸을 때 재설정하는 방법을 안내합니다.</p>
                </div>
                
                <!-- 주요 기능 카테고리 -->
                <div class="topic" data-category="features" id="feature1">
                    <h3>기능 1: 데이터 관리</h3>
                    <p>데이터를 효율적으로 관리하는 방법을 설명합니다.</p>
                </div>
                
                <div class="topic" data-category="features" id="feature2">
                    <h3>기능 2: 보고서 생성</h3>
                    <p>다양한 보고서를 생성하고 내보내는 방법을 안내합니다.</p>
                </div>
                
                <!-- 문제 해결 카테고리 -->
                <div class="topic" data-category="troubleshooting" id="error-codes">
                    <h3>오류 코드 해석</h3>
                    <p>일반적인 오류 코드와 해결 방법을 제공합니다.</p>
                </div>
                
                <div class="topic" data-category="troubleshooting" id="connection">
                    <h3>연결 문제</h3>
                    <p>네트워크 연결 문제를 해결하는 방법을 안내합니다.</p>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // 카테고리 클릭 이벤트
            $('.category').click(function() {
                // 활성화된 카테고리 변경
                $('.category').removeClass('active');
                $(this).addClass('active');
                
                // 선택된 카테고리의 토픽만 보이게 설정
                var category = $(this).data('category');
                $('.topic').hide();
                $('.topic[data-category="' + category + '"]').first().show();
            });
            
            // 검색 기능
            $('#search-btn').click(performSearch);
            $('#search-input').keypress(function(e) {
                if(e.which == 13) { // Enter key
                    performSearch();
                }
            });
            
            // 뒤로가기 버튼
            $('#back-to-help').click(function() {
                $('#search-results').hide();
                $('#help-content').show();
                $(this).hide();
            });
            
            function performSearch() {
                var query = $('#search-input').val().toLowerCase();
                if(query.trim() === '') return;
                
                var results = [];
                
                // 모든 토픽에서 검색
                $('.topic').each(function() {
                    var topicTitle = $(this).find('h3').text();
                    var topicContent = $(this).text();
                    var topicId = $(this).attr('id');
                    
                    if(topicTitle.toLowerCase().includes(query) || 
                       topicContent.toLowerCase().includes(query)) {
                        results.push({
                            id: topicId,
                            title: topicTitle,
                            content: $(this).find('p').first().text(),
                            category: $(this).data('category')
                        });
                    }
                });
                
                // 검색 결과 표시
                displaySearchResults(results, query);
            }
            
            function displaySearchResults(results, query) {
                var resultsList = $('#results-list');
                resultsList.empty();
                
                if(results.length === 0) {
                    resultsList.append('<p>검색 결과가 없습니다.</p>');
                } else {
                    $.each(results, function(i, result) {
                        var resultItem = $('<div class="result-item" data-id="' + result.id + '" data-category="' + result.category + '">' +
                                          '<h3>' + highlightText(result.title, query) + '</h3>' +
                                          '<p>' + highlightText(result.content, query) + '</p>' +
                                          '</div>');
                        resultsList.append(resultItem);
                    });
                    
                    // 검색 결과 항목 클릭 이벤트
                    $('.result-item').click(function() {
                        var id = $(this).data('id');
                        var category = $(this).data('category');
                        
                        // 해당 카테고리 활성화
                        $('.category').removeClass('active');
                        $('.category[data-category="' + category + '"]').addClass('active');
                        
                        // 해당 토픽 보이기
                        $('.topic').hide();
                        $('#' + id).show();
                        
                        // 검색 결과 숨기기, 도움말 내용 보이기
                        $('#search-results').hide();
                        $('#help-content').show();
                    });
                }
                
                // 도움말 내용 숨기고 검색 결과 표시
                $('#help-content').hide();
                $('#search-results').show();
                $('#back-to-help').show();
            }
            
            function highlightText(text, query) {
                if (!query) return text;
                var regex = new RegExp('(' + query + ')', 'gi');
                return text.replace(regex, '<span class="highlight">$1</span>');
            }
        });
    </script>
</body>
</html>
2025년 8월 27일 (수) 11:24 판

Comments
