도움말 화면 html 만들기 - 편집 역사

https://devcafe.co.kr/w/index.php?action=history&feed=atom&title=%EB%8F%84%EC%9B%80%EB%A7%90_%ED%99%94%EB%A9%B4_html_%EB%A7%8C%EB%93%A4%EA%B8%B0 도움말 화면 html 만들기 - 편집 역사 2026-05-17T21:03:02Z 이 문서의 편집 역사 MediaWiki 1.42.1 https://devcafe.co.kr/w/index.php?title=%EB%8F%84%EC%9B%80%EB%A7%90_%ED%99%94%EB%A9%B4_html_%EB%A7%8C%EB%93%A4%EA%B8%B0&diff=2290&oldid=prev 2025년 8월 28일 (목) 03:16에 Devcafe님의 편집 2025-08-28T03:16:44Z

<p></p> <a href="https://devcafe.co.kr/w/index.php?title=%EB%8F%84%EC%9B%80%EB%A7%90_%ED%99%94%EB%A9%B4_html_%EB%A7%8C%EB%93%A4%EA%B8%B0&diff=2290&oldid=2288">차이 보기</a>

Devcafe https://devcafe.co.kr/w/index.php?title=%EB%8F%84%EC%9B%80%EB%A7%90_%ED%99%94%EB%A9%B4_html_%EB%A7%8C%EB%93%A4%EA%B8%B0&diff=2288&oldid=prev 2025년 8월 27일 (수) 02:29에 Devcafe님의 편집 2025-08-27T02:29:31Z

<p></p> <a href="https://devcafe.co.kr/w/index.php?title=%EB%8F%84%EC%9B%80%EB%A7%90_%ED%99%94%EB%A9%B4_html_%EB%A7%8C%EB%93%A4%EA%B8%B0&diff=2288&oldid=2287">차이 보기</a>

Devcafe https://devcafe.co.kr/w/index.php?title=%EB%8F%84%EC%9B%80%EB%A7%90_%ED%99%94%EB%A9%B4_html_%EB%A7%8C%EB%93%A4%EA%B8%B0&diff=2287&oldid=prev 2025년 8월 27일 (수) 02:24에 Devcafe님의 편집 2025-08-27T02:24:49Z

<p></p> <a href="https://devcafe.co.kr/w/index.php?title=%EB%8F%84%EC%9B%80%EB%A7%90_%ED%99%94%EB%A9%B4_html_%EB%A7%8C%EB%93%A4%EA%B8%B0&diff=2287&oldid=2286">차이 보기</a>

Devcafe https://devcafe.co.kr/w/index.php?title=%EB%8F%84%EC%9B%80%EB%A7%90_%ED%99%94%EB%A9%B4_html_%EB%A7%8C%EB%93%A4%EA%B8%B0&diff=2286&oldid=prev Devcafe: 새 문서: <source lang=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="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;... 2025-08-27T02:20:40Z

<p>새 문서: <source lang=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="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;...</p> <p><b>새 문서</b></p><div><br /> <source lang=html><br /> <!DOCTYPE html><br /> <html lang="ko"><br /> <head><br /> <meta charset="UTF-8"><br /> <meta name="viewport" content="width=device-width, initial-scale=1.0"><br /> <title>도움말 시스템</title><br /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"><br /> <style><br /> body {<br /> font-family: 'Noto Sans KR', sans-serif;<br /> line-height: 1.6;<br /> margin: 0;<br /> padding: 20px;<br /> background-color: #f5f5f5;<br /> color: #333;<br /> }<br /> .container {<br /> max-width: 1000px;<br /> margin: 0 auto;<br /> background-color: white;<br /> padding: 20px;<br /> border-radius: 8px;<br /> box-shadow: 0 2px 10px rgba(0,0,0,0.1);<br /> }<br /> h1 {<br /> text-align: center;<br /> color: #2c3e50;<br /> margin-bottom: 30px;<br /> }<br /> .search-box {<br /> display: flex;<br /> margin-bottom: 20px;<br /> position: relative;<br /> }<br /> #search-input {<br /> flex: 1;<br /> padding: 10px 40px 10px 15px;<br /> border: 1px solid #ddd;<br /> border-radius: 4px;<br /> font-size: 16px;<br /> }<br /> #search-btn {<br /> padding: 10px 15px;<br /> background-color: #3498db;<br /> color: white;<br /> border: none;<br /> border-radius: 0 4px 4px 0;<br /> cursor: pointer;<br /> transition: background-color 0.3s;<br /> }<br /> #search-btn:hover {<br /> background-color: #2980b9;<br /> }<br /> .search-clear {<br /> position: absolute;<br /> right: 120px;<br /> top: 50%;<br /> transform: translateY(-50%);<br /> background: none;<br /> border: none;<br /> color: #999;<br /> cursor: pointer;<br /> font-size: 16px;<br /> display: none;<br /> }<br /> .help-nav {<br /> display: flex;<br /> margin-bottom: 20px;<br /> }<br /> .help-categories {<br /> width: 250px;<br /> border-right: 1px solid #ddd;<br /> padding-right: 15px;<br /> }<br /> .category {<br /> cursor: pointer;<br /> padding: 8px 10px;<br /> border-radius: 4px;<br /> transition: background-color 0.3s;<br /> margin-bottom: 5px;<br /> }<br /> .category:hover {<br /> background-color: #f0f0f0;<br /> }<br /> .category.active {<br /> background-color: #e6f2ff;<br /> color: #3498db;<br /> font-weight: bold;<br /> }<br /> .help-content {<br /> flex: 1;<br /> padding-left: 20px;<br /> }<br /> .topic {<br /> display: none;<br /> border-bottom: 1px solid #eee;<br /> padding-bottom: 15px;<br /> margin-bottom: 15px;<br /> }<br /> .topic h3 {<br /> color: #2c3e50;<br /> margin-bottom: 10px;<br /> }<br /> .topic.active {<br /> display: block;<br /> }<br /> #search-results {<br /> display: none;<br /> }<br /> .result-item {<br /> cursor: pointer;<br /> padding: 10px;<br /> border-radius: 4px;<br /> transition: background-color 0.3s;<br /> margin-bottom: 15px;<br /> border-left: 3px solid #3498db;<br /> background-color: #f9f9f9;<br /> }<br /> .result-item:hover {<br /> background-color: #f0f0f0;<br /> }<br /> .highlight {<br /> background-color: #ffff99;<br /> font-weight: bold;<br /> }<br /> .back-btn {<br /> display: none;<br /> padding: 8px 15px;<br /> background-color: #3498db;<br /> color: white;<br /> border: none;<br /> border-radius: 4px;<br /> cursor: pointer;<br /> margin-bottom: 15px;<br /> }<br /> .back-btn:hover {<br /> background-color: #2980b9;<br /> }<br /> .search-status {<br /> margin-top: 10px;<br /> font-style: italic;<br /> color: #666;<br /> }<br /> .no-results {<br /> text-align: center;<br /> padding: 20px;<br /> background-color: #f9f9f9;<br /> border-radius: 4px;<br /> margin-top: 20px;<br /> }<br /> .search-suggestion {<br /> margin-top: 10px;<br /> }<br /> .search-suggestion span {<br /> cursor: pointer;<br /> color: #3498db;<br /> margin-right: 10px;<br /> text-decoration: underline;<br /> }<br /> .search-filters {<br /> display: flex;<br /> margin: 10px 0;<br /> flex-wrap: wrap;<br /> }<br /> .search-filter {<br /> background-color: #f0f0f0;<br /> padding: 5px 10px;<br /> border-radius: 15px;<br /> margin-right: 10px;<br /> margin-bottom: 5px;<br /> font-size: 14px;<br /> cursor: pointer;<br /> transition: background-color 0.3s;<br /> }<br /> .search-filter:hover, .search-filter.active {<br /> background-color: #3498db;<br /> color: white;<br /> }<br /> .category-badge {<br /> display: inline-block;<br /> padding: 2px 8px;<br /> background-color: #e6f2ff;<br /> color: #3498db;<br /> border-radius: 10px;<br /> font-size: 12px;<br /> margin-left: 10px;<br /> }<br /> .search-info {<br /> display: flex;<br /> justify-content: space-between;<br /> align-items: center;<br /> margin-bottom: 15px;<br /> }<br /> </style><br /> </head><br /> <body><br /> <div class="container"><br /> <h1>도움말 시스템</h1><br /> <br /> <div class="search-box"><br /> <input type="text" id="search-input" placeholder="도움말 검색..."><br /> <button class="search-clear" id="clear-search"><i class="fas fa-times"></i></button><br /> <button id="search-btn"><i class="fas fa-search"></i> 검색</button><br /> </div><br /> <br /> <button class="back-btn" id="back-to-help">도움말 목록으로 돌아가기</button><br /> <br /> <div id="search-results"><br /> <div class="search-info"><br /> <h2>검색 결과</h2><br /> <div class="search-status" id="search-status"></div><br /> </div><br /> <br /> <div class="search-filters" id="search-filters"><br /> <div class="search-filter active" data-filter="all">전체</div><br /> <div class="search-filter" data-filter="getting-started">시작하기</div><br /> <div class="search-filter" data-filter="account">계정 관리</div><br /> <div class="search-filter" data-filter="features">주요 기능</div><br /> <div class="search-filter" data-filter="troubleshooting">문제 해결</div><br /> </div><br /> <br /> <div id="results-list"></div><br /> <br /> <div class="search-suggestion" id="search-suggestion"></div><br /> </div><br /> <br /> <div class="help-nav" id="help-content"><br /> <div class="help-categories"><br /> <h2>카테고리</h2><br /> <div class="category active" data-category="getting-started">시작하기</div><br /> <div class="category" data-category="account">계정 관리</div><br /> <div class="category" data-category="features">주요 기능</div><br /> <div class="category" data-category="troubleshooting">문제 해결</div><br /> </div><br /> <br /> <div class="help-content"><br /> <br /> <div class="topic active" data-category="getting-started" id="intro"><br /> <h3>프로그램 소개</h3><br /> <p>이 프로그램은 사용자가 쉽게 작업을 수행할 수 있도록 설계되었습니다. 주요 기능과 인터페이스에 대한 설명을 제공합니다.</p><br /> <p>사용자 친화적인 인터페이스와 함께 다양한 기능을 탐색하고 활용할 수 있습니다. 이 도움말 시스템은 프로그램 사용 중에 발생할 수 있는 모든 질문에 대한 답변을 제공합니다.</p><br /> </div><br /> <br /> <div class="topic" data-category="getting-started" id="installation"><br /> <h3>설치 방법</h3><br /> <p>프로그램을 설치하기 위한 단계별 지침을 제공합니다.</p><br /> <ol><br /> <li>웹사이트에서 설치 파일을 다운로드합니다.</li><br /> <li>다운로드한 파일을 실행합니다.</li><br /> <li>설치 마법사의 지시를 따릅니다.</li><br /> <li>설치가 완료되면 프로그램을 실행합니다.</li><br /> </ol><br /> <p>설치 중 문제가 발생하면 '문제 해결' 섹션을 참조하시기 바랍니다.</p><br /> </div><br /> <br /> <div class="topic" data-category="getting-started" id="system-requirements"><br /> <h3>시스템 요구사항</h3><br /> <p>프로그램을 실행하기 위한 최소 시스템 요구사항입니다:</p><br /> <ul><br /> <li>운영체제: Windows 10 이상 / macOS 10.14 이상 / Linux (Ubuntu 18.04 이상)</li><br /> <li>프로세서: 2GHz 이상의 듀얼 코어 프로세서</li><br /> <li>메모리: 4GB RAM</li><br /> <li>저장공간: 500MB 이상의 여유 공간</li><br /> <li>인터넷 연결: 초기 설정 및 업데이트를 위한 인터넷 연결 필요</li><br /> </ul><br /> </div><br /> <br /> <br /> <div class="topic" data-category="account" id="create-account"><br /> <h3>계정 생성</h3><br /> <p>새 계정을 만들기 위한 절차를 설명합니다.</p><br /> <ol><br /> <li>프로그램 실행 후 '계정 생성' 버튼을 클릭합니다.</li><br /> <li>필요한 정보(이름, 이메일, 비밀번호)를 입력합니다.</li><br /> <li>이메일 인증을 완료합니다.</li><br /> <li>계정 설정을 확인하고 완료합니다.</li><br /> </ol><br /> <p>계정 생성 시 강력한 비밀번호를 사용하는 것을 권장합니다.</p><br /> </div><br /> <br /> <div class="topic" data-category="account" id="login"><br /> <h3>로그인</h3><br /> <p>프로그램에 로그인하는 방법을 설명합니다.</p><br /> <ol><br /> <li>프로그램을 실행하면 로그인 화면이 표시됩니다.</li><br /> <li>등록된 이메일과 비밀번호를 입력합니다.</li><br /> <li>'로그인' 버튼을 클릭합니다.</li><br /> </ol><br /> <p>'자동 로그인' 옵션을 선택하면 다음 실행 시 자동으로 로그인됩니다. 공용 컴퓨터에서는 이 옵션을 사용하지 마세요.</p><br /> </div><br /> <br /> <div class="topic" data-category="account" id="password"><br /> <h3>비밀번호 재설정</h3><br /> <p>비밀번호를 잊어버렸을 때 재설정하는 방법을 안내합니다.</p><br /> <ol><br /> <li>로그인 화면에서 '비밀번호 찾기' 링크를 클릭합니다.</li><br /> <li>등록된 이메일 주소를 입력합니다.</li><br /> <li>이메일로 전송된 링크를 통해 새 비밀번호를 설정합니다.</li><br /> </ol><br /> <p>비밀번호 재설정 이메일이 오지 않는 경우, 스팸 폴더를 확인하거나 지원팀에 문의하세요.</p><br /> </div><br /> <br /> <div class="topic" data-category="account" id="profile-settings"><br /> <h3>프로필 설정</h3><br /> <p>사용자 프로필 정보를 업데이트하는 방법을 안내합니다.</p><br /> <ol><br /> <li>로그인 후 오른쪽 상단의 프로필 아이콘을 클릭합니다.</li><br /> <li>'설정' 또는 '프로필 관리'를 선택합니다.</li><br /> <li>개인 정보, 알림 설정, 테마 등을 변경할 수 있습니다.</li><br /> <li>'저장' 버튼을 클릭하여 변경사항을 적용합니다.</li><br /> </ol><br /> </div><br /> <br /> <br /> <div class="topic" data-category="features" id="feature1"><br /> <h3>기능 1: 데이터 관리</h3><br /> <p>데이터를 효율적으<br /> </source></div>

Devcafe