demun(대문블로그)

코드

demun — Sat, 16 Aug 2025 17:27:10 +0900

html code change

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>HTML Cleaner & Formatter</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; }
        .container { max-width: 1200px; margin: auto; }
        textarea { width: 100%; min-height: 250px; margin-bottom: 10px; padding: 10px; box-sizing: border-box; font-family: monospace; }
        .options { margin-bottom: 20px; padding: 15px; border: 1px solid #ccc; background-color: #f9f9f9; }
        button { padding: 10px 20px; background-color: #007bff; color: white; border: none; cursor: pointer; }
        h2 { border-bottom: 2px solid #eee; padding-bottom: 5px; margin-top: 25px; }
    </style>
</head>
<body>
    <div class="container">
        <h1>HTML 코드 정리 도구</h1>

        <div class="options">
            <label><input type="checkbox" id="option1" checked> 옵션 1. 태그 내 줄바꿈 및 불필요한 공백 제거</label><br>
            <label><input type="checkbox" id="option2" checked> 옵션 2. 대문자를 소문자로 변경 (태그 및 속성)</label><br>
            <label><input type="checkbox" id="option3" checked> 옵션 3. 태그 내 속성 따옴표 통일/추가/정리</label><br>
            <label><input type="checkbox" id="option4" checked> 옵션 4. ARRAY 태그 대문자화 따옴표 제거</label>
        </div>

        <h2>수정 전 코드</h2>
        <textarea id="input" placeholder="수정할 HTML 코드를 입력하세요."></textarea>
        
        <button onclick="modifyHtml()">코드 수정</button>

        <h2>수정 후 코드</h2>
        <textarea id="output" readonly placeholder="수정된 코드가 여기에 표시됩니다."></textarea>
    </div>

    <script>
        // =========================================================================
        // 1. DOMParser 기반 속성 정리 핵심 함수 (변동 없음)
        // =========================================================================

        /**
         * DOMParser를 사용하여 속성 문자열을 파싱하고, 모든 속성에 쌍따옴표를 통일/추가합니다.
         */
        function modifyAttributesWithDOMParser(attributesString) {
            if (!attributesString || !attributesString.trim()) {
                return '';
            }
            
            const tempHtml = `<wrapper ${attributesString}>`;
            const parser = new DOMParser();
            const doc = parser.parseFromString(tempHtml, 'text/html');
            
            const wrapper = doc.querySelector('wrapper');
            if (!wrapper) {
                return ' ' + attributesString.trim();
            }

            const attributesToSet = [];
            
            Array.from(wrapper.attributes).forEach(attr => {
                const attrName = attr.name;
                let attrValue = attr.value;
                
                // 값 내부의 쌍따옴표를 홑따옴표로 변환 (중복 방지)
                attrValue = attrValue.replace(/"/g, "'");

                // 속성 이름 정규화 (소문자 통일)
                const newAttrName = attrName.toLowerCase();

                attributesToSet.push({ name: newAttrName, value: attrValue });
            });

            let finalAttrs = '';
            attributesToSet.forEach(item => {
                finalAttrs += ` ${item.name}="${item.value}"`;
            });

            return finalAttrs.trim();
        }

        // =========================================================================
        // 2. 메인 처리 함수 (modifyHtml) - 기존 구조 유지
        // =========================================================================

        /**
         * 사용자 입력 HTML 코드를 처리하는 메인 함수.
         * (isOption3Checked 변수는 UI에서 가져온다고 가정합니다.)
         */
        function modifyHtml(inputCode, isOption3Checked) {
            let modifiedCode = inputCode;
            
            // 1. HTML 태그를 찾는 큰 replace 루프
            modifiedCode = modifiedCode.replace(/<(\/?[a-zA-Z0-9]+)([^>]*)>/g, (match, tagName, attributes) => {
                
                let newTagName = tagName;
                let finalAttributes = attributes; 
                
                // --- 다른 옵션 처리 로직이 있다면 여기에 위치합니다 ---
                // (예: isOption1Checked, isOption2Checked 로직 등)
                
                // -----------------------------------------------------------------
                // [옵션 3]: 속성 따옴표 통일/추가/정리 (DOMParser 대체)
                // -----------------------------------------------------------------
                if (isOption3Checked) {
                    // DOMParser를 사용하여 속성 문자열을 정리합니다.
                    finalAttributes = modifyAttributesWithDOMParser(finalAttributes);
                } 
                
                // -----------------------------------------------------------------
                // 3. 최종 결과 조립
                // -----------------------------------------------------------------
                
                let finalResult = finalAttributes.trim();
                finalResult = finalResult ? ' ' + finalResult : '';
            
                // 닫는 태그가 아닌 경우에만 태그 이름과 속성을 결합합니다.
                if (tagName.startsWith('/')) {
                    return `<${tagName}>`;
                } else {
                    return `<${newTagName}${finalResult}>`;
                }
            });
            
            return modifiedCode;
        }

        // =========================================================================
        // 3. UI 이벤트 연결 함수 (기존 방식 재현)
        // =========================================================================

        /**
         * '코드 수정' 버튼 클릭 시 실행되는 함수.
         */
        function handleCodeModification() {
            // 1. 입력값 및 옵션 상태 가져오기
            const inputTextArea = document.getElementById('inputCode');
            const outputTextArea = document.getElementById('outputCode');
            
            if (!inputTextArea || !outputTextArea) {
                console.error("입력/출력 텍스트 에어리어 ID를 확인해 주세요 (inputCode, outputCode).");
                return;
            }
            
            const inputCode = inputTextArea.value;
            
            // 옵션 3 상태를 UI에서 가져오는 로직 (예시: 체크박스 ID가 option3인 경우)
            // 실제 HTML ID에 맞게 수정이 필요합니다.
            const option3Checkbox = document.getElementById('option3'); 
            const isOption3Checked = option3Checkbox ? option3Checkbox.checked : true; // 기본값 true로 설정 (테스트 용이)
            
            // 2. HTML 코드 수정 로직 실행
            const modifiedCode = modifyHtml(inputCode, isOption3Checked);
            
            // 3. 결과 텍스트에어리어에 출력
            outputTextArea.value = modifiedCode;
        }


        // 4. 버튼 클릭 이벤트 연결
        document.addEventListener('DOMContentLoaded', () => {
            const modifyButton = document.getElementById('modifyButton');
            if (modifyButton) {
                modifyButton.addEventListener('click', handleCodeModification);
            } else {
                console.warn("버튼 ID를 확인해 주세요 (modifyButton).");
            }
        });
        
        // ------------------------------------------------------------------
        // [추가 기능]: 결과창 클릭 시 전체 선택
        // ------------------------------------------------------------------
        document.addEventListener('DOMContentLoaded', () => {
            const outputTextarea = document.getElementById('output');
            
            outputTextarea.addEventListener('click', () => {
                if (outputTextarea.value.length > 0) {
                    outputTextarea.select();
                }
            });
        });

    </script>
</body>
</html>

regexp

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자바스크립트 정규 표현식(RegExp) 상세 가이드 및 테스트</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f4f4f9;
        }
        h1, h2, h3 {
            color: #2c3e50;
            border-bottom: 2px solid #3498db;
            padding-bottom: 5px;
            margin-top: 30px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
            background-color: #fff;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            font-size: 0.95em;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: left;
        }
        th {
            background-color: #3498db;
            color: white;
            font-weight: bold;
        }
        code {
            background-color: #ecf0f1;
            padding: 2px 4px;
            border-radius: 4px;
            font-family: Consolas, monospace;
            color: #c0392b;
        }
        pre {
            background-color: #2c3e50;
            color: #ecf0f1;
            padding: 15px;
            border-radius: 5px;
            overflow-x: auto;
        }
        
        /* 테스트 환경 스타일 */
        .tester-container {
            padding: 25px;
            border: 2px solid #2c3e50;
            border-radius: 10px;
            background-color: #ecf0f1;
            margin-top: 40px;
        }
        .input-group label {
            font-weight: bold;
            display: block;
            margin-top: 15px;
            color: #2c3e50;
        }
        .input-group input[type="text"], .input-group textarea {
            width: 100%;
            padding: 10px;
            margin-top: 5px;
            box-sizing: border-box;
            border: 1px solid #bdc3c7;
            border-radius: 5px;
            font-size: 16px;
        }
        button {
            background-color: #2ecc71;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 18px;
            margin-top: 20px;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #27ae60;
        }
        #output {
            min-height: 150px;
            white-space: pre-wrap;
            background-color: #fff;
            border: 1px solid #3498db;
            padding: 15px;
            margin-top: 15px;
            border-radius: 5px;
            font-family: Consolas, monospace;
        }
    </style>
</head>
<body>

    <h1>자바스크립트 정규 표현식 상세 가이드</h1>
    <p><strong>정규 표현식(Regular Expression, RegExp)</strong>은 문자열에서 특정 패턴을 검색, 추출, 또는 치환하기 위해 사용되는 강력한 문자열 처리 도구입니다.</p>

    <hr>

    <h2>2. 정규 표현식 생성 방법</h2>
    <p>정규 표현식은 두 가지 방법으로 생성할 수 있습니다.</p>

    <table>
        <thead>
            <tr>
                <th>방법</th>
                <th>문법</th>
                <th>설명</th>
                <th>예시</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><strong>리터럴</strong></td>
                <td><code>/패턴/플래그</code></td>
                <td>스크립트 로드 시 컴파일되어, **정적인 패턴**에 사용하면 성능이 좋습니다.</td>
                <td><code>const re = /abc/i;</code></td>
            </tr>
            <tr>
                <td><strong>생성자</strong></td>
                <td><code>new RegExp("패턴", "플래그")</code></td>
                <td>런타임에 컴파일되며, **동적인 패턴** (예: 변수나 사용자 입력)을 사용할 때 유용합니다.</td>
                <td><code>const re = new RegExp("abc", "i");</code></td>
            </tr>
        </tbody>
    </table>

    <h2>3. 정규 표현식 플래그 (Flags)</h2>
    <p>정규식의 동작 방식을 설정하는 옵션입니다. <code>/패턴/</code> 뒤에 붙여 사용합니다.</p>

    <table>
        <thead>
            <tr>
                <th>플래그</th>
                <th>이름</th>
                <th>설명</th>
                <th>예시</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><code>g</code></td>
                <td>Global</td>
                <td>**모든 일치 항목**을 찾습니다.</td>
                <td><code>"apple banana apple".match(/apple/g); // ["apple", "apple"]</code></td>
            </tr>
            <tr>
                <td><code>i</code></td>
                <td>Ignore Case</td>
                <td>**대소문자를 구별하지 않고** 일치시킵니다.</td>
                <td><code>"Hello WORLD".match(/world/i); // ["WORLD"]</code></td>
            </tr>
            <tr>
                <td><code>m</code></td>
                <td>Multiline</td>
                <td>입력 문자열의 시작(<code>^</code>)과 끝(<code>$</code>)을 **각 행의 시작과 끝**으로 인식합니다.</td>
                <td><code>"a\nb".match(/^b/m); // ["b"]</code></td>
            </tr>
            <tr>
                <td><code>s</code></td>
                <td>DotAll</td>
                <td><code>.</code> 메타 문자가 **줄바꿈 문자(\n)까지 포함**한 모든 문자와 일치하도록 합니다.</td>
                <td><code>"a\nb".match(/a.b/s); // ["a\nb"]</code></td>
            </tr>
        </tbody>
    </table>

    <h2>4. 핵심 메타 문자 및 이스케이프</h2>
    <p>패턴을 정의하는 데 사용되는 특별한 의미를 가진 문자들입니다.</p>

    <table>
        <thead>
            <tr>
                <th>문자</th>
                <th>설명</th>
                <th>예시 (패턴)</th>
                <th>결과 설명</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><code>.</code></td>
                <td>줄바꿈을 제외한 모든 단일 문자</td>
                <td><code>/a.c/</code></td>
                <td>"abc", "a9c" 에 일치 (문자 하나)</td>
            </tr>
            <tr>
                <td><code>*</code>, <code>+</code>, <code>?</code></td>
                <td>반복 (0회 이상, 1회 이상, 0 또는 1회)</td>
                <td><code>/a+b/</code></td>
                <td>"ab", "aaab" 에 일치</td>
            </tr>
            <tr>
                <td><code>{n,m}</code></td>
                <td>반복 횟수 지정</td>
                <td><code>/\d{3,4}/</code></td>
                <td>"123", "1234" 에 일치</td>
            </tr>
            <tr>
                <td><code>^</code>, <code>$</code></td>
                <td>시작, 끝</td>
                <td><code>/^\d+$/</code></td>
                <td>숫자로만 구성된 문자열에 일치</td>
            </tr>
            <tr>
                <td><code>|</code></td>
                <td>OR (논리적 합)</td>
                <td><code>/html|css/</code></td>
                <td>"html" 또는 "css" 에 일치</td>
            </tr>
            <tr>
                <td><code>()</code>, <code>[]</code>, <code>[^]</code></td>
                <td>그룹, 문자 집합, 부정 집합</td>
                <td><code>/([a-z])\1/</code></td>
                <td>연속된 동일 소문자("aa", "bb")에 일치 (\1은 첫 번째 그룹 참조)</td>
            </tr>
            <tr>
                <td><code>\</code></td>
                <td>이스케이프</td>
                <td><code>/a\.b/</code></td>
                <td>"a.b" 문자열에 일치 (<code>.</code>을 문자 그대로 인식)</td>
            </tr>
        </tbody>
    </table>

    <h2>5. 자주 사용되는 특수 시퀀스 (Shorthand Character Classes)</h2>
    <p>미리 정의된 문자 집합의 단축 표기법입니다.</p>

    <table>
        <thead>
            <tr>
                <th>시퀀스</th>
                <th>설명</th>
                <th>동등 표현</th>
                <th>예시</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><code>\d</code>, <code>\D</code></td>
                <td>숫자, 숫자가 아닌 문자</td>
                <td><code>[0-9]</code>, <code>[^0-9]</code></td>
                <td><code>/\d{3}/</code> 는 우편번호 세 자리에 일치</td>
            </tr>
            <tr>
                <td><code>\w</code>, <code>\W</code></td>
                <td>단어 문자(영문/숫자/\_), 단어 문자가 아닌 문자</td>
                <td><code>[a-zA-Z0-9_]</code>, <code>[^a-zA-Z0-9_]</code></td>
                <td><code>/\w+/</code> 는 변수 이름(e.g., "my_var1") 전체에 일치</td>
            </tr>
            <tr>
                <td><code>\s</code>, <code>\S</code></td>
                <td>공백 문자, 공백 문자가 아닌 문자</td>
                <td><code>[ \f\n\r\t\v]</code>, <code>[^ \f\n\r\t\v]</code></td>
                <td><code>/단어\s+단어/</code> 는 단어 사이의 여러 공백에 일치</td>
            </tr>
            <tr>
                <td><code>\b</code>, <code>\B</code></td>
                <td>단어 경계, 단어 경계가 아닌 위치</td>
                <td></td>
                <td><code>/\bcat\b/</code> 는 "cat"에 일치 ("catalogue"에는 불일치)</td>
            </tr>
        </tbody>
    </table>

    <h2>6. 자바스크립트 정규식 메서드 (6가지 주요 메서드)</h2>
    <p>정규식을 활용하여 문자열을 처리하는 주요 메서드입니다. 괄호 안의 대상 객체에 따라 메서드 실행 주체가 달라집니다.</p>
    <table>
        <thead>
            <tr>
                <th>메서드</th>
                <th>적용 대상</th>
                <th>설명</th>
                <th>예시 (결과)</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><code>test()</code></td>
                <td><code>RegExp</code></td>
                <td>문자열이 패턴과 일치하는지 확인 (일치 여부만 **boolean**으로 반환)</td>
                <td><code>/\d+/.test("a123"); // true</code></td>
            </tr>
            <tr>
                <td><code>exec()</code></td>
                <td><code>RegExp</code></td>
                <td>일치 항목을 검색하고, 일치 정보(그룹 캡처, 인덱스 등)가 담긴 **배열 또는 null** 반환</td>
                <td><code>/(\d+)/.exec("num123"); // ["123", "123", index: 3, ...]</code></td>
            </tr>
            <tr>
                <td><code>match()</code></td>
                <td><code>String</code></td>
                <td>패턴과 일치하는 항목을 검색. <code>g</code> 플래그 유무에 따라 **모든 일치 항목 배열** 또는 상세 정보 배열 반환</td>
                <td><code>"a1b2".match(/\d/g); // ["1", "2"]</code></td>
            </tr>
            <tr>
                <td><code>matchAll()</code></td>
                <td><code>String</code></td>
                <td>전체 일치 항목에 대한 반복자(Iterator)를 **반환** (반드시 `g` 플래그 사용)</td>
                <td><code>[..."a1b2".matchAll(/\d/g)]; // [["1", index: 1, ...], ["2", index: 3, ...]]</code></td>
            </tr>
            <tr>
                <td><code>search()</code></td>
                <td><code>String</code></td>
                <td>일치하는 첫 번째 항목의 **인덱스** 검색</td>
                <td><code>"hello world".search(/world/); // 6 (일치하지 않으면 -1)</code></td>
            </tr>
            <tr>
                <td><code>replace()</code></td>
                <td><code>String</code></td>
                <td>일치하는 패턴을 다른 문자열로 **치환** (원본 변경 X, 새 문자열 반환)</td>
                <td><code>"a.b.c".replace(/\./g, "-"); // "a-b-c"</code></td>
            </tr>
            <tr>
                <td><code>split()</code></td>
                <td><code>String</code></td>
                <td>정규식을 구분자로 사용하여 문자열을 **배열로 분할**</td>
                <td><code>"1, 2, 3".split(/,\s*/); // ["1", "2", "3"]</code></td>
            </tr>
        </tbody>
    </table>
    
    <hr>
    
    <div class="tester-container">
        <h2>  정규식 테스트 환경 (match() 기반)</h2>
        <p>패턴과 문자열을 입력하고 버튼을 눌러 결과를 확인해 보세요. (기본적으로 `match()`의 결과를 보여줍니다.)</p>
        
        <div class="input-group">
            <label for="regexPattern">정규식 패턴 (슬래시 제외):</label>
            <input type="text" id="regexPattern" value="a(b+)c" placeholder="예: \d{3}-\d{4}">
        </div>
        <div class="input-group">
            <label for="regexFlags">플래그 (e.g., g, i, m):</label>
            <input type="text" id="regexFlags" value="g" placeholder="예: gi">
        </div>
        <div class="input-group">
            <label for="testString">테스트할 문자열:</label>
            <textarea id="testString" rows="4" placeholder="예: 010-1234-5678, test@email.com">xyzabccabccc</textarea>
        </div>
        <button onclick="runRegexTest()">정규식 테스트 실행</button>
        
        <h3 style="border-bottom: none;">결과 (Output)</h3>
        <div id="output">여기에 결과가 표시됩니다.</div>
    </div>

    <script>
        function runRegexTest() {
            const pattern = document.getElementById('regexPattern').value;
            const flags = document.getElementById('regexFlags').value;
            const testString = document.getElementById('testString').value;
            const outputDiv = document.getElementById('output');
            
            outputDiv.innerHTML = '테스트 중...';
            
            try {
                // 1. RegExp 객체 생성
                const regex = new RegExp(pattern, flags);
                
                // 2. String.prototype.match() 메서드 사용
                const matchResult = testString.match(regex);
                
                let resultText = '--- String.prototype.match() 결과 ---\n';
                if (matchResult) {
                    resultText += `일치 성공! (총 ${matchResult.length}개)\n\n`;
                    
                    if (flags.includes('g')) {
                        // g 플래그 사용 시: 전체 일치 목록 출력
                        resultText += '일치 항목 (전체):\n';
                        matchResult.forEach((match, index) => {
                            resultText += `[${index + 1}]: ${match}\n`;
                        });
                    } else {
                        // g 플래그 미사용 시: 첫 번째 일치 및 그룹 캡처 정보 출력
                        resultText += `전체 일치: ${matchResult[0]}\n`;
                        resultText += `시작 인덱스: ${matchResult.index}\n`;
                        resultText += `원본 문자열: ${matchResult.input}\n`;

                        if (matchResult.length > 1) {
                            resultText += '\n캡처 그룹 목록:\n';
                            for (let i = 1; i < matchResult.length; i++) {
                                resultText += `그룹 ${i}: ${matchResult[i] || '(캡처 없음)'}\n`;
                            }
                        }
                    }

                } else {
                    resultText += '일치하는 항목이 없습니다.';
                }
                
                // 3. RegExp.prototype.test() 결과 추가 
                const regexForTest = new RegExp(pattern, flags); 
                const testResult = regexForTest.test(testString);
                resultText += `\n\n--- RegExp.prototype.test() 결과 ---\n`;
                resultText += `일치 여부: ${testResult}`;

                // 4. String.prototype.search() 결과 추가
                const regexForSearch = new RegExp(pattern); 
                const searchResult = testString.search(regexForSearch);
                resultText += `\n\n--- String.prototype.search() 결과 ---\n`;
                resultText += `첫 번째 일치 인덱스: ${searchResult} (${searchResult === -1 ? '일치 없음' : '성공'})`;

                outputDiv.innerText = resultText;
                
            } catch (e) {
                outputDiv.innerText = `[정규식 패턴 오류 발생]\n${e.message}\n\n*특수문자(예: *, +, ?, ( 등)을 일반 문자로 쓰려면 \\를 앞에 붙여야 합니다. (예: \\*)`;
            }
        }
        
        // 페이지 로드 시 기본 테스트 실행
        window.onload = runRegexTest;
    </script>
</body>
</html>

video

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>스크롤 동영상 자동 재생</title>
    <style>
/* 기본 스타일 및 레이아웃 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
        Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    margin: 0;
    background-color: #f0f2f5;
    color: #333;
}

.container {
    max-width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
}

.header,
.footer {
    text-align: center;
    padding: 80vh 20px; /* 스크롤 공간 확보 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}
.header h1 {
    margin-bottom: 8px;
}
.header p {
    margin-top: 0;
    color: #666;
}


/* 비디오 행 스타일 */
.video-row {
    display: flex;
    gap: 8px; /* 비디오 사이의 간격 */
    margin-bottom: 10vh; /* 각 행 사이의 스크롤 공간 확보 */
    background-color: #fff;
    padding: 8px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    opacity: 0.5; /* 비활성 상태일 때 투명도 */
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
    transform: scale(0.95);
}

/* 활성화된 행 스타일 */
.video-row.is-playing {
    opacity: 1;
    transform: scale(1);
}

/* 마지막 비디오 행의 아래쪽 마진 제거 */
.video-row:last-of-type {
    margin-bottom: 0;
}

/* 비디오 아이템을 감싸는 래퍼 */
.video-wrapper {
    position: relative;
    width: calc(50% - 4px); /* 2열 그리드 */
    cursor: pointer;
}

/* 비디오 아이템 스타일 */
.video-item {
    width: 100%;
    height: 250px; /* 모든 비디오의 높이를 고정 */
    object-fit: cover; /* 비율을 유지하면서 래퍼를 꽉 채움 (잘리는 부분 발생 가능) */
    border-radius: 8px;
    background-color: #000;
    display: block;
}

/* 자세히보기 링크 */
.details-link {
    display: none; /* 평소에는 숨김 */
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2147483647; /* 비디오 컨트롤러보다 위에 오도록 */
    color: #fff;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

/* 전체화면 이전 버튼 */
.fullscreen-back-btn {
    display: none; /* 평소에는 숨김 */
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2147483647; /* 비디오 컨트롤러보다 위에 오도록 */
    padding: 8px 16px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: 1px solid white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
}

/* 래퍼가 전체화면일 때 '이전' 버튼과 '자세히보기' 링크 표시 */
.video-wrapper:fullscreen .fullscreen-back-btn,
.video-wrapper:fullscreen .details-link {
    display: block;
}
    </style>
</head>
<body>

    <div class="container">
        <div class="header">
            <h1>스크롤하여 동영상 재생</h1>
            <p>화면 중앙에 오는 행의 동영상이 재생됩니다.</p>
        </div>

        <!-- 첫번째 행 -->
        <div class="video-row">
            <div class="video-wrapper">
                <video class="video-item" muted playsinline poster="https://via.placeholder.com/400x300.png?text=Video+1-1" src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
                <button class="fullscreen-back-btn">&lt; 이전</button>
                <a href="#" class="details-link">자세히보기</a>
            </div>
            <div class="video-wrapper">
                <video class="video-item" muted playsinline poster="https://via.placeholder.com/400x300.png?text=Video+1-2" src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4"></video>
                <button class="fullscreen-back-btn">&lt; 이전</button>
                <a href="#" class="details-link">자세히보기</a>
            </div>
        </div>

        <!-- 두번째 행 -->
        <div class="video-row">
            <div class="video-wrapper">
                <video class="video-item" muted playsinline poster="https://via.placeholder.com/400x300.png?text=Video+2-1" src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
                <button class="fullscreen-back-btn">&lt; 이전</button>
                <a href="#" class="details-link">자세히보기</a>
            </div>
            <div class="video-wrapper">
                <video class="video-item" muted playsinline poster="https://via.placeholder.com/400x300.png?text=Video+2-2" src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4"></video>
                <button class="fullscreen-back-btn">&lt; 이전</button>
                <a href="#" class="details-link">자세히보기</a>
            </div>
        </div>

        <!-- 세번째 행 -->
        <div class="video-row">
            <div class="video-wrapper">
                <video class="video-item" muted playsinline poster="https://via.placeholder.com/400x300.png?text=Video+3-1" src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
                <button class="fullscreen-back-btn">&lt; 이전</button>
                <a href="#" class="details-link">자세히보기</a>
            </div>
            <div class="video-wrapper">
                <video class="video-item" muted playsinline poster="https://via.placeholder.com/400x300.png?text=Video+3-2" src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4"></video>
                <button class="fullscreen-back-btn">&lt; 이전</button>
                <a href="#" class="details-link">자세히보기</a>
            </div>
        </div>

        <div class="footer">
            <p>페이지 끝</p>
        </div>
    </div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const videoRows = document.querySelectorAll('.video-row');
    const videoWrappers = document.querySelectorAll('.video-wrapper');

    // 첫 번째 비디오 재생이 끝나면 두 번째 비디오를 재생하는 핸들러
    const playNextVideo = (e) => {
        // e.target은 첫 번째 비디오
        const firstVideo = e.target;
        const firstVideoWrapper = firstVideo.closest('.video-wrapper');

        // 두 번째 비디오는 nextElementSibling으로 찾음
        const secondVideoWrapper = firstVideoWrapper.nextElementSibling;
        if (secondVideoWrapper && secondVideoWrapper.classList.contains('video-wrapper')) {
            const secondVideo = secondVideoWrapper.querySelector('.video-item');
            secondVideo.play().catch(error => console.error("두 번째 비디오 재생 실패:", error));
        }
    };

    const observerOptions = {
        root: null, // 뷰포트를 root로 사용
        rootMargin: '-50% 0px -50% 0px', // 뷰포트의 수직 중앙 지점을 기준으로 교차 감지
        threshold: 0 // 요소가 1px이라도 중앙 영역에 들어오면 콜백 실행
    };

    const intersectionObserver = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            const row = entry.target;
            const videos = row.querySelectorAll('.video-item');
            const firstVideo = videos[0];

            if (entry.isIntersecting) {
                // 행이 화면 중앙에 들어왔을 때
                row.classList.add('is-playing'); // 활성 스타일 적용
                
                // 첫 번째 비디오 재생
                firstVideo.play().catch(error => console.error("자동 재생 실패:", error));

                // 첫 번째 비디오가 끝나면 두 번째 비디오를 재생하도록 이벤트 리스너 추가
                // 'ended' 이벤트는 한 번만 실행되도록 { once: true } 옵션 추가
                firstVideo.addEventListener('ended', playNextVideo, { once: true });

            } else {
                // 행이 화면 중앙에서 벗어났을 때
                row.classList.remove('is-playing'); // 활성 스타일 제거

                // 이 행의 모든 비디오 정지 및 시간 리셋
                videos.forEach(video => {
                    video.pause();
                    video.currentTime = 0;
                });

                // 다른 곳에서 트리거되지 않도록 이벤트 리스너 제거
                firstVideo.removeEventListener('ended', playNextVideo);
            }
        });
    }, observerOptions);

    // 각 비디오 행을 observer에 등록
    videoRows.forEach(row => {
        intersectionObserver.observe(row);
    });

    // 각 비디오 래퍼에 이벤트 리스너 설정
    videoWrappers.forEach(wrapper => {
        const video = wrapper.querySelector('.video-item');
        const backBtn = wrapper.querySelector('.fullscreen-back-btn');
        const detailsLink = wrapper.querySelector('.details-link');

        // 자세히보기 링크 클릭
        detailsLink.addEventListener('click', (e) => {
            e.stopPropagation(); // 부모 요소로의 이벤트 전파를 막습니다.
            console.log('자세히보기 링크 클릭:', video.src);
            // 실제 링크 이동 로직: location.href = '...';
        });

        // 비디오 래퍼 클릭 시 전체화면
        wrapper.addEventListener('click', () => {
            // 이미 다른 요소가 전체화면인 경우 무시
            if (document.fullscreenElement || document.webkitFullscreenElement) {
                return;
            }

            // iOS Safari는 video 요소에 대해서만 webkitEnterFullscreen을 지원합니다.
            if (typeof video.webkitEnterFullscreen === 'function') {
                // iOS에서는 네이티브 플레이어로 전환되므로, 소리만 켜줍니다.
                video.muted = false;
                video.webkitEnterFullscreen();
            } else if (typeof wrapper.requestFullscreen === 'function') {
                // 다른 브라우저에서는 래퍼를 전체화면으로 만듭니다.
                wrapper.requestFullscreen().catch(err => {
                    console.error(`전체화면 전환 오류: ${err.message} (${err.name})`);
                });
            }
        });

        // 전체화면 '이전' 버튼 클릭
        backBtn.addEventListener('click', (e) => {
            e.stopPropagation(); // 부모 요소로의 이벤트 전파를 막습니다.
            if (document.fullscreenElement) {
                document.exitFullscreen();
            }
        });
    });

    // 전체화면 상태 변경 핸들러
    const handleFullscreenChange = () => {
        const fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement;

        if (!fullscreenElement) {
            // 전체화면이 해제될 때
            const previouslyFullscreenVideo = document.querySelector('.video-item[data-fullscreened="true"]');
            
            if (previouslyFullscreenVideo) {
                previouslyFullscreenVideo.muted = true;
                previouslyFullscreenVideo.controls = false;
                delete previouslyFullscreenVideo.dataset.fullscreened; // 속성 제거
            }
        } else {
            // 전체화면이 될 때
            let videoInFullscreen;
            if (fullscreenElement.classList.contains('video-wrapper')) {
                videoInFullscreen = fullscreenElement.querySelector('.video-item');
            } else if (fullscreenElement.tagName === 'VIDEO') {
                videoInFullscreen = fullscreenElement;
            }

            if (videoInFullscreen) {
                videoInFullscreen.dataset.fullscreened = "true"; // 전체화면이 된 비디오에 표시
                // 표준 API를 사용하는 브라우저를 위해 속성 설정
                if (!videoInFullscreen.webkitEnterFullscreen) {
                    videoInFullscreen.muted = false;
                    videoInFullscreen.controls = true;
                }
            }
        }
    };

    // 전체화면 변경 이벤트를 표준과 웹킷 접두사 모두에 대해 등록
    document.addEventListener('fullscreenchange', handleFullscreenChange);
    document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
});
</script>

</body>
</html>

html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8" />
    <title>전체 동의 체크박스</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="agreement-plugin.js"></script>
    <style>
        ul { list-style-type: none; }
        ul ul { margin-left: 20px; }
    </style>
</head>
<body>
    <h2>전체 동의 체크박스 테스트</h2>

<div class="terms">

    <div class="check_wrap">
        <div class="box_chk">
            <label>
                <input type="checkbox" name="" class="agree_all">
                전체 동의
            </label>
        </div>
    </div>

    <div class="box_terms_wrap">
        <div class="agree_wrap">
            <div class="box_check">
                <input type="checkbox" name="" id="agree01">
                <label for="agree01">동의 1</label>
            </div>
        </div>
    </div>

    <div class="box_terms_wrap">
        <div class="agree_wrap">
            <div class="box_check">
                <input type="checkbox" name="" id="agree02">
                <label for="agree02">동의 2</label>
            </div>
            <ul class="agree_list">
                <li>
                    <p class="box_check02">
                        <input type="checkbox" name="" id="agree02_1">
                        <label for="agree02_1">자식 동의 1</label>
                    </p>
                </li>
                <li>
                    <p class="box_check02">
                        <input type="checkbox" name="" id="agree02_2">
                        <label for="agree02_2">자식 동의 2</label>
                    </p>
                    <!-- 2-depth 자식 그룹 (손자) -->
                    <ul class="agree_list">
                        <li>
                            <p class="box_check02">
                                <input type="checkbox" name="" id="agree02_2_1">
                                <label for="agree02_2_1">손자 동의 1 (2-depth)</label>
                            </p>
                        </li>
                        <li>
                            <p class="box_check02">
                                <input type="checkbox" name="" id="agree02_2_2">
                                <label for="agree02_2_2">손자 동의 2 (2-depth)</label>
                            </p>
                        </li>
                    </ul>
                    </p>
                </li>
                <li>
                    <p class="box_check02">
                        <input type="checkbox" name="" id="agree02_3">
                        <label for="agree02_3">자식 동의 3</label>
                    </p>
                </li>
            </ul>
        </div>
    </div>

    <div class="box_terms_wrap">
        <div class="agree_wrap">
            <div class="box_check">
                <input type="checkbox" name="" id="agree03">
                <label for="agree03">동의 3</label>
            </div>
        </div>
    </div>

    <div class="box_terms_wrap">
        <div class="agree_wrap">
            <div class="box_check">
                <input type="checkbox" name="" id="agree04">
                <label for="agree04">동의 2</label>
            </div>
            <ul class="agree_list">
                <li>
                    <p class="box_check02">
                        <input type="checkbox" name="" id="agree04_1">
                        <label for="agree04_1">자식 동의 1</label>
                    </p>
                </li>
                <li>
                    <p class="box_check02">
                        <input type="checkbox" name="" id="agree04_2">
                        <label for="agree04_2">자식 동의 2</label>
                    </p>
                </li>
                <li>
                    <p class="box_check02">
                        <input type="checkbox" name="" id="agree04_3">
                        <label for="agree04_3">자식 동의 3</label>
                    </p>
                </li>
            </ul>
        </div>
    </div>

</div>


<hr>


<div class="form_items">

    <div class="agree_list01">
        <div class="box_terms_wrap">
            <div class="agree_wrap">
                <div class="box_check">
                    <input type="checkbox" name="" id="agree1">
                    <label for="agree1">동의 1</label>
                </div>
            </div>
        </div>

        <div class="box_terms_wrap">
            <div class="agree_wrap">
                <div class="box_check">
                    <input type="checkbox" name="" id="agree2">
                    <label for="agree2">동의 2</label>
                </div>
                <ul class="agree_list">
                    <li>
                        <p class="box_check02">
                            <input type="checkbox" name="" id="agree2_1">
                            <label for="agree2_1">자식 동의 1</label>
                        </p>
                    </li>
                    <li>
                        <p class="box_check02">
                            <input type="checkbox" name="" id="agree2_2">
                            <label for="agree2_2">자식 동의 2</label>
                        </p>
                    </li>
                    <li>
                        <p class="box_check02">
                            <input type="checkbox" name="" id="agree2_3">
                            <label for="agree2_3">자식 동의 3</label>
                        </p>
                    </li>
                </ul>
            </div>
        </div>

        <div class="box_terms_wrap">
            <div class="agree_wrap">
                <div class="box_check">
                    <input type="checkbox" name="" id="agree3">
                    <label for="agree3">동의 3</label>
                </div>
            </div>
        </div>

        <div class="box_terms_wrap">
            <div class="agree_wrap">
                <div class="box_check">
                    <input type="checkbox" name="" id="agree4">
                    <label for="agree4">동의 2</label>
                </div>
                <ul class="agree_list">
                    <li>
                        <p class="box_check02">
                            <input type="checkbox" name="" id="agree4_1">
                            <label for="agree4_1">자식 동의 1</label>
                        </p>
                    </li>
                    <li>
                        <p class="box_check02">
                            <input type="checkbox" name="" id="agree4_2">
                            <label for="agree4_2">자식 동의 2</label>
                        </p>
                    </li>
                    <li>
                        <p class="box_check02">
                            <input type="checkbox" name="" id="agree4_3">
                            <label for="agree4_3">자식 동의 3</label>
                        </p>
                    </li>
                </ul>
            </div>
        </div>

    </div>
</div>
    

    <script>
        $(function() {
            // 첫 번째 약관 그룹(.terms)에 플러그인을 기본 설정으로 적용합니다.
            $('.terms').agreementCheckboxHandler();

            // 두 번째 약관 그룹(.form_items)에도 플러그인을 적용합니다.
            // 이 그룹은 '전체 동의' 체크박스의 클래스가 다르므로, 옵션을 통해 지정해줍니다.
            $('.form_items').agreementCheckboxHandler({
                allCheckbox: '.agree_group_all' // '전체 동의' 체크박스 선택자 변경
            });
        });
    </script>
</body>
</html>

(function($) {
    /**
     * @name agreementCheckboxHandler
     * @description 다양한 구조의 약관 동의 체크박스 상호작용을 처리하는 유연한 jQuery 플러그인입니다.
     * @version 2.1.0
     *
     * @param {Object} options - 플러그인 동작을 제어하는 설정 객체입니다.
     * @param {string} [options.allCheckbox='.agree_all'] - '전체 동의' 체크박스를 식별하는 CSS 선택자입니다. 해당하는 요소가 없으면 '전체 동의' 기능은 비활성화됩니다.
     * @param {string} [options.mainCheckbox='.agree_wrap > .box_check > input[type="checkbox"]'] - '전체 동의' 상태를 결정하는 최상위 레벨의 동의 항목들을 식별하는 선택자입니다.
     * @param {string} [options.checkboxWrapper='p, .box_check'] - 개별 체크박스와 라벨을 감싸는 컨테이너의 선택자입니다. 부모-자식 관계를 파악하는 데 사용됩니다.
     * @param {string} [options.childList='.agree_list'] - 자식 동의 항목들을 담고 있는 리스트 컨테이너의 선택자입니다. (예: 'ul.agree_list', 'div.child-group')
     * @param {string} [options.childListItem='li'] - 자식 리스트 컨테이너 내부의 각 항목을 감싸는 요소의 선택자입니다. (예: 'li', 'div.item')
     *
     * @example
     * // 기본 설정으로 플러그인 실행 (ul > li 구조)
     * $('.terms').agreementCheckboxHandler();
     *
     * // 자식 리스트가 div > div 구조일 경우
     * $('.terms-div').agreementCheckboxHandler({
     *   childList: 'div.agree_list',
     *   childListItem: 'div.agree_item'
     * });
     */
    $.fn.agreementCheckboxHandler = function(options) {
        // 1. 기본 설정과 사용자 정의 옵션을 병합합니다.
        const settings = $.extend({
            allCheckbox: '.agree_all',
            mainCheckbox: '.agree_wrap > .box_check > input[type="checkbox"]',
            checkboxWrapper: 'p, .box_check',
            childList: '.agree_list',
            childListItem: 'li',
        }, options);

        // 2. 선택된 각 컨테이너(예: '.terms', '.form_items')에 대해 플러그인을 개별적으로 실행합니다.
        return this.each(function() {
            const $container = $(this);
            const $agreeAll = $container.find(settings.allCheckbox);

            // --- 헬퍼 함수 ---

            /**
             * 상위 부모 체크박스들의 상태를 재귀적으로 업데이트합니다.
             * @param {jQuery} $checkbox - 상태 변경을 시작한 체크박스
             */
            function updateParents($checkbox) {
                // 1. 현재 체크박스를 포함하는 가장 가까운 자식 리스트 컨테이너를 찾습니다.
                const $list = $checkbox.closest(settings.childList);
                if (!$list.length) return; // 자식 리스트에 속하지 않으면 부모가 없으므로 종료합니다.

                // 2. 해당 리스트($list)의 직계 자식 항목에 포함된 모든 체크박스들을 찾습니다.
                //    이 체크박스들은 서로 '형제' 관계에 있습니다.
                //    (예: ul.agree_list > li > p > input)
                const $siblings = $list.find('> ' + settings.childListItem + ' > ' + settings.checkboxWrapper).find('> input[type="checkbox"]');

                // 3. 모든 형제들이 체크되었는지 확인합니다.
                const allChecked = $siblings.length > 0 && $siblings.length === $siblings.filter(':checked').length;

                // 4. 이 자식 리스트($list)를 소유한 '부모 체크박스'를 찾습니다.
                //    - 시나리오 1 (1-depth 자식): 부모 체크박스의 래퍼(.box_check)와 자식 리스트(.agree_list)가 형제 관계일 때.
                //    - 시나리오 2 (Multi-depth 자식): 자식 리스트(.agree_list)가 부모 체크박스를 포함하는 리스트 아이템(li) 내부에 중첩되어 있을 때.
                let $parentCheckbox = $list.siblings(settings.checkboxWrapper).find('input[type="checkbox"]');
                if (!$parentCheckbox.length) {
                    // 시나리오 2: 가장 가까운 상위 리스트 아이템(li)을 찾아, 그 바로 아래에 있는 체크박스를 부모로 간주합니다.
                    $parentCheckbox = $list.closest(settings.childListItem).find('> ' + settings.checkboxWrapper).find('input[type="checkbox"]');
                }
                if (!$parentCheckbox.length) return; // 부모를 찾지 못하면 종료합니다.

                // 5. 부모의 상태가 현재 자식들의 집계 상태와 다를 경우에만 업데이트하고, 다시 상위 부모의 업데이트를 요청합니다.
                if ($parentCheckbox.prop('checked') !== allChecked) {
                    $parentCheckbox.prop('checked', allChecked);
                    updateParents($parentCheckbox); // 재귀 호출로 연쇄적으로 부모를 업데이트합니다.
                }
            }

            /**
             * '전체 동의' 체크박스의 상태를 업데이트합니다.
             */
            function updateAgreeAllState() {
                if ($agreeAll.length) {
                    const $mainCheckboxes = $container.find(settings.mainCheckbox);
                    const allMainChecked = $mainCheckboxes.length > 0 && $mainCheckboxes.length === $mainCheckboxes.filter(':checked').length;
                    $agreeAll.prop('checked', allMainChecked);
                }
            }

            // --- 이벤트 핸들러 ---

            // 3. '전체 동의' 체크박스에 대한 이벤트 핸들러 (존재하는 경우에만 바인딩)
            if ($agreeAll.length) {
                $agreeAll.on('change', function() {
                    // 컨테이너 내의 모든 체크박스 상태를 '전체 동의' 상태와 동기화합니다.
                    $container.find('input[type="checkbox"]').prop('checked', $(this).prop('checked'));
                });
            }

            // 4. 개별 체크박스들에 대한 이벤트 핸들러 (이벤트 위임 사용)
            $container.on('change', 'input[type="checkbox"]', function(e) {
                const $this = $(this);

                // '전체 동의' 체크박스 자체의 변경 이벤트는 위에서 이미 처리했으므로 무시합니다.
                if ($agreeAll.length && $this.is($agreeAll)) {
                    return;
                }

                // A. 자식(하위) 요소들 상태 업데이트, 하향식 전파 (부모 체크 → 모든 자손 체크)
                // 현재 체크박스에 속한 자식 리스트를 찾아 그 안의 모든 체크박스 상태를 변경합니다.
                // 이 체크박스가 자식을 가지고 있지 않다면(손자가 없는 형태), $childList.length는 0이 되므로 아무 작업도 수행하지 않습니다.
                const $childList = $this.closest(settings.checkboxWrapper).siblings(settings.childList);
                if ($childList.length) {
                    $childList.find('input[type="checkbox"]').prop('checked', $this.prop('checked'));
                }

                // B. 부모(상위) 요소들 상태 업데이트, 상향식 전파 (자식 체크 → 모든 상위 부모 상태 업데이트)
                updateParents($this);

                // C. '전체 동의' 체크박스 상태 업데이트
                updateAgreeAllState();
            });
        });
    };
}(jQuery));

필수동의 경고창

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8" />
    <title>전체 동의 체크박스</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="agreement-plugin.js"></script>
    <style>
        ul { list-style-type: none; }
        ul ul { margin-left: 20px; }
    </style>
</head>
<body>
    <h2>전체 동의 체크박스 테스트</h2>

<div class="terms">

    <div class="check_wrap">
        <div class="box_chk">
            <label>
                <input type="checkbox" name="" class="agree_all">
                전체 동의
            </label>
        </div>
    </div>

    <div class="box_terms_wrap">
        <div class="agree_wrap">
            <div class="box_check">
                <input type="checkbox" name="" id="agree01" required>
                <label for="agree01">동의 1</label>
            </div>
        </div>
    </div>

    <div class="box_terms_wrap">
        <div class="agree_wrap">
            <div class="box_check">
                <input type="checkbox" name="" id="agree02">
                <label for="agree02">동의 2</label>
            </div>
            <ul class="agree_list">
                <li>
                    <p class="box_check02">
                        <input type="checkbox" name="" id="agree02_1">
                        <label for="agree02_1">자식 동의 1</label>
                    </p>
                </li>
                <li>
                    <p class="box_check02">
                        <input type="checkbox" name="" id="agree02_2">
                        <label for="agree02_2">자식 동의 2</label>
                    </p>
                    <!-- 2-depth 자식 그룹 (손자) -->
                    <ul class="agree_list">
                        <li>
                            <p class="box_check02">
                                <input type="checkbox" name="" id="agree02_2_1">
                                <label for="agree02_2_1">손자 동의 1 (2-depth)</label>
                            </p>
                        </li>
                        <li>
                            <p class="box_check02">
                                <input type="checkbox" name="" id="agree02_2_2">
                                <label for="agree02_2_2">손자 동의 2 (2-depth)</label>
                            </p>
                        </li>
                    </ul>
                </li>
                <li>
                    <p class="box_check02">
                        <input type="checkbox" name="" id="agree02_3">
                        <label for="agree02_3">자식 동의 3</label>
                    </p>
                </li>
            </ul>
        </div>
    </div>

    <div class="box_terms_wrap">
        <div class="agree_wrap">
            <div class="box_check">
                <input type="checkbox" name="" id="agree03" required>
                <label for="agree03">동의 3</label>
            </div>
        </div>
    </div>

    <div class="box_terms_wrap">
        <div class="agree_wrap">
            <div class="box_check">
                <input type="checkbox" name="" id="agree04">
                <label for="agree04">동의 2</label>
            </div>
            <ul class="agree_list">
                <li>
                    <p class="box_check02">
                        <input type="checkbox" name="" id="agree04_1">
                        <label for="agree04_1">자식 동의 1</label>
                    </p>
                </li>
                <li>
                    <p class="box_check02">
                        <input type="checkbox" name="" id="agree04_2">
                        <label for="agree04_2">자식 동의 2</label>
                    </p>
                </li>
                <li>
                    <p class="box_check02">
                        <input type="checkbox" name="" id="agree04_3">
                        <label for="agree04_3">자식 동의 3</label>
                    </p>
                </li>
            </ul>
        </div>
    </div>

    <div style="text-align: center; margin-top: 20px;">
        <button type="button" id="btn-terms-next">다음</button>
    </div>

</div>


<hr>


<div class="form_items">

    <div class="agree_list01">
        <div class="box_terms_wrap">
            <div class="agree_wrap">
                <div class="box_check">
                    <input type="checkbox" name="" id="agree1" required>
                    <label for="agree1">동의 1</label>
                </div>
            </div>
        </div>

        <div class="box_terms_wrap">
            <div class="agree_wrap">
                <div class="box_check">
                    <input type="checkbox" name="" id="agree2">
                    <label for="agree2">동의 2</label>
                </div>
                <ul class="agree_list">
                    <li>
                        <p class="box_check02">
                            <input type="checkbox" name="" id="agree2_1">
                            <label for="agree2_1">자식 동의 1</label>
                        </p>
                    </li>
                    <li>
                        <p class="box_check02">
                            <input type="checkbox" name="" id="agree2_2">
                            <label for="agree2_2">자식 동의 2</label>
                        </p>
                    </li>
                    <li>
                        <p class="box_check02">
                            <input type="checkbox" name="" id="agree2_3">
                            <label for="agree2_3">자식 동의 3</label>
                        </p>
                    </li>
                </ul>
            </div>
        </div>

        <div class="box_terms_wrap">
            <div class="agree_wrap">
                <div class="box_check">
                    <input type="checkbox" name="" id="agree3">
                    <label for="agree3">동의 3</label>
                </div>
            </div>
        </div>

        <div class="box_terms_wrap">
            <div class="agree_wrap">
                <div class="box_check">
                    <input type="checkbox" name="" id="agree4">
                    <label for="agree4">동의 2</label>
                </div>
                <ul class="agree_list">
                    <li>
                        <p class="box_check02">
                            <input type="checkbox" name="" id="agree4_1">
                            <label for="agree4_1">자식 동의 1</label>
                        </p>
                    </li>
                    <li>
                        <p class="box_check02">
                            <input type="checkbox" name="" id="agree4_2">
                            <label for="agree4_2">자식 동의 2</label>
                        </p>
                    </li>
                    <li>
                        <p class="box_check02">
                            <input type="checkbox" name="" id="agree4_3">
                            <label for="agree4_3">자식 동의 3</label>
                        </p>
                    </li>
                </ul>
            </div>
        </div>

    </div>

    <div style="text-align: center; margin-top: 20px;">
        <button type="button" id="btn-form-items-next">다음</button>
    </div>
</div>
    

    <script>
        $(function() {
            // 첫 번째 약관 그룹(.terms)에 플러그인을 기본 설정으로 적용합니다.
            $('.terms').agreementCheckboxHandler();

            // 두 번째 약관 그룹(.form_items)에도 플러그인을 적용합니다.
            // 이 그룹은 '전체 동의' 체크박스의 클래스가 다르므로, 옵션을 통해 지정해줍니다.
            $('.form_items').agreementCheckboxHandler({
                allCheckbox: '.agree_group_all' // '전체 동의' 체크박스 선택자 변경
            });

            /**
             * 필수 약관 동의 유효성을 검사하는 함수
             * @param {string} containerSelector - 검사를 수행할 최상위 컨테이너 선택자
             * @returns {boolean} - 유효성 통과 여부
             */
            function validateRequiredAgreements(containerSelector) {
                const $container = $(containerSelector);
                // 컨테이너 내에서 'required' 속성이 있지만 체크되지 않은 첫 번째 체크박스를 찾습니다.
                const $firstUnchecked = $container.find('input[type="checkbox"][required]:not(:checked)').first();

                if ($firstUnchecked.length > 0) {
                    // 미동의 항목이 있는 경우
                    const checkboxId = $firstUnchecked.attr('id');
                    const labelText = $(`label[for="${checkboxId}"]`).text();
                    
                    alert(`'${labelText}' 항목은 필수 동의 항목입니다.`);
                    $firstUnchecked.focus(); // 사용자 편의를 위해 해당 항목으로 포커스 이동
                    return false; // 유효성 검사 실패
                }

                return true; // 유효성 검사 성공
            }

            // 첫 번째 그룹의 '다음' 버튼 클릭 이벤트
            $('#btn-terms-next').on('click', function() {
                if (validateRequiredAgreements('.terms')) {
                    alert('[첫 번째 그룹] 모든 필수 항목에 동의하셨습니다. 다음 단계로 진행합니다.');
                }
            });

            // 두 번째 그룹의 '다음' 버튼 클릭 이벤트
            $('#btn-form-items-next').on('click', function() {
                if (validateRequiredAgreements('.form_items')) {
                    alert('[두 번째 그룹] 모든 필수 항목에 동의하셨습니다.');
                }
            });
        });
    </script>
</body>
</html>

<template id="ongoing-tasks-template">
    <tr class="worker-1">
                <td class="task-name">기존 진행중인 업무2</td>
                <td class="task-worker">김삼성</td>
                <td class="task-planner">기획자2</td>
                <td class="task-duedate">2025-09-05</td>
                <td class="task-assigneddate">2025-08-14</td>
                <td class="task-actions">
                    <button class="edit-btn">수정</button>
                    <button class="complete-btn">완료</button>
                    <button class="delete-btn">삭제</button>
                </td>
            </tr><tr class="worker-2">
                <td class="task-name">기존 진행중인 업무1</td>
                <td class="task-worker">김현대</td>
                <td class="task-planner">기획자1</td>
                <td class="task-duedate">2025-08-20</td>
                <td class="task-assigneddate">2025-08-14</td>
                <td class="task-actions">
                    <button class="edit-btn">수정</button>
                    <button class="complete-btn">완료</button>
                    <button class="delete-btn">삭제</button>
                </td>
            </tr><tr class="worker-2">
                <td class="task-name">제미나이 사용법</td>
                <td class="task-worker">김현대</td>
                <td class="task-planner">이기획</td>
                <td class="task-duedate">2025-08-19</td>
                <td class="task-assigneddate">2025-08-16</td>
                <td class="task-actions">
                    <button class="edit-btn">수정</button>
                    <button class="complete-btn">완료</button>
                    <button class="delete-btn">삭제</button>
                </td>
            </tr><tr class="worker-3">
                <td class="task-name">또 다른 업무 하나 추가</td>
                <td class="task-worker">박삼성</td>
                <td class="task-planner">삼기획</td>
                <td class="task-duedate">2025-08-20</td>
                <td class="task-assigneddate">2025-08-16</td>
                <td class="task-actions">
                    <button class="edit-btn">수정</button>
                    <button class="complete-btn">완료</button>
                    <button class="delete-btn">삭제</button>
                </td>
            </tr><tr class="worker-4">
                <td class="task-name">업무 1번 진행하는거</td>
                <td class="task-worker">이신한</td>
                <td class="task-planner">삼기획</td>
                <td class="task-duedate">2025-08-19</td>
                <td class="task-assigneddate">2025-08-16</td>
                <td class="task-actions">
                    <button class="edit-btn">수정</button>
                    <button class="complete-btn">완료</button>
                    <button class="delete-btn">삭제</button>
                </td>
            </tr>
</template>

<template id="completed-tasks-template">
    <tr>
                <td>기존 완료된 업무1</td>
                <td>현대</td>
                <td>기획자3</td>
                <td>2025-08-20</td>
                <td>2025-08-10</td>
                <td>2025-08-12</td>
            </tr><tr>
                <td>업무 리스트 추가하기....</td>
                <td>이신한</td>
                <td>삼기획</td>
                <td>2025-08-21</td>
                <td>2025-08-16</td>
                <td>2025-08-16</td>
            </tr>
</template>

버전2

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>업무 Todo List</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="main-header">
            <h1>업무 Todo List</h1>
            <div class="header-buttons">
                <button id="generateCodeBtn">업무 코드 생성</button>
                <button id="generateBackupCodeBtn">완료된 업무 백업 코드 생성</button>
                <button id="clearStorageBtn">업무 스토리지 비우기</button>
            </div>
        </div>
        
        <div class="todo-input-area">
            <label for="taskNameInput">업무명:</label>
            <input type="text" id="taskNameInput" placeholder="업무명을 입력하세요">
            <label for="workerSelect">작업자:</label>
            <select id="workerSelect" name="worker">
                <option value="김현대">김현대</option>
                <option value="이신한">이신한</option>
                <option value="박삼성">박삼성</option>
                <option value="최국민">최국민</option>
            </select>
            <label for="plannerSelect">기획자:</label>
            <select id="plannerSelect" name="planner">
                <option value="일기획">일기획</option>
                <option value="이기획">이기획</option>
                <option value="삼기획">삼기획</option>
                <option value="사기획">사기획</option>
            </select>
            <label for="dueDateInput">완료예정일:</label>
            <input type="date" id="dueDateInput" name="duedate">
            <button id="saveBtn">저장</button>
        </div>

        <div class="task-section">
            <div id="ongoingTasksTitle"></div>
            <table id="ongoingTasksTable">
                <thead>
                    <tr>
                        <th>업무명</th>
                        <th>작업자</th>
                        <th>기획자</th>
                        <th>완료일</th>
                        <th>배정일</th>
                        <th>비고</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><td colspan="6">진행중인 업무를 불러오는 중...</td></tr>
                </tbody>
            </table>
        </div>

        <div class="task-section">
            <h2>완료된 업무</h2>
            <table id="completedTasksTable">
                <thead>
                    <tr>
                        <th>업무명</th>
                        <th>작업자</th>
                        <th>기획자</th>
                        <th>완료일</th>
                        <th>배정일</th>
                        <th>실제 완료일</th>
                        <th>비고</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><td colspan="7">완료된 업무를 불러오는 중...</td></tr>
                </tbody>
            </table>
        </div>

        <div class="code-output-section">
            <h3>진행중인 업무 HTML 코드</h3>
            <pre id="ongoingCodeOutput" class="code-block"></pre>
            <h3>완료된 업무 HTML 코드</h3>
            <pre id="completedCodeOutput" class="code-block"></pre>
            <h3>완료된 업무 백업 HTML 코드</h3>
            <pre id="backupCodeOutput" class="code-block"></pre>
        </div>
    
        <div id="backup-section"><!-- 백업 섹션은 스크립트로 동적 로드됩니다. --></div>
    </div>

    <script src="script.js"></script>
</body>
</html>

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    margin: 0;
    padding: 20px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.main-header h1 {
    margin: 0;
}

h1, h2, h3 {
    color: #333;
}

.todo-input-area {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.header-buttons {
    display: flex;
    gap: 5px;
}

.header-buttons button,
.todo-input-area input, 
.todo-input-area select, .todo-input-area button {
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.todo-input-area button {
    background-color: #5cb85c;
    color: white;
    cursor: pointer;
    border: none;
}

#generateCodeBtn, #generateBackupCodeBtn { background-color: #0275d8; }
#clearStorageBtn { background-color: #f0ad4e; }

.code-output-section {
    margin-top: 30px;
}

.task-section {
    margin-bottom: 30px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

table th, table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

table th {
    background-color: #f2f2f2;
    font-weight: bold;
}

table tr:hover {
    background-color: #f5f5f5;
}

.worker-1 { background-color: #e6f7ff; }
.worker-2 { background-color: #eafff0; }
.worker-3 { background-color: #fffbe6; }
.worker-4 { background-color: #f0e6ff; }
.worker-5 { background-color: #ffe6e6; }
.worker-6 { background-color: #e6fff7; }
.worker-7 { background-color: #fff0f5; }
.worker-8 { background-color: #f5ffef; }

/* ... 기존 CSS 코드 ... */

.worker-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
    margin-top: 5px;
}

.worker-stat {
    padding: 3px 8px;
    border-radius: 3px;
    color: #333;
}

/* 아래는 worker-stat의 배경색을 작업자별로 지정하는 예시입니다. */
.worker-stat.worker-1 { background-color: #c9e9ff; }
.worker-stat.worker-2 { background-color: #d8ffdf; }
.worker-stat.worker-3 { background-color: #fff9d7; }
.worker-stat.worker-4 { background-color: #e3d7ff; }
.worker-stat.worker-5 { background-color: #ffdde6; }
.worker-stat.worker-6 { background-color: #d7fff2; }
.worker-stat.worker-7 { background-color: #ffd8f0; }
.worker-stat.worker-8 { background-color: #e9ffdf; }

/* ... 기존 CSS 코드 ... */

.task-actions button {
    margin-right: 5px;
    padding: 5px 10px;
    cursor: pointer;
    border: none;
    border-radius: 3px;
    color: white;
}

.edit-btn { background-color: #f0ad4e; }
.complete-btn { background-color: #5cb85c; }
.delete-btn { background-color: #d9534f; }
.save-edit-btn { background-color: #0275d8; }

.cancel-complete-btn {
    padding: 5px 10px;
    cursor: pointer;
    border: none;
    border-radius: 3px;
    color: white;
    background-color: #777; /* 회색 계열로 취소 버튼 표현 */
    margin-right: 5px;
}

.delete-complete-btn {
    padding: 5px 10px;
    cursor: pointer;
    border: none;
    border-radius: 3px;
    color: white;
    background-color: #d9534f;
}

.backup-section {
    margin-top: 40px;
}

.tab-container {
    margin-top: 10px;
}

.tab-nav {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #ddd;
}

.tab-nav button {
    padding: 12px 18px;
    border: none;
    border-bottom: 3px solid transparent; /* 활성 상태 표시줄 공간 확보 */
    background-color: transparent;
    cursor: pointer;
    font-size: 15px;
    color: #555;
    margin-bottom: -1px; /* 활성 테두리가 컨테이너 테두리와 겹치도록 설정 */
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.tab-nav button:hover {
    color: #000;
    background-color: #f5f5f5;
}

.tab-nav button.active {
    font-weight: 600;
    color: #333;
    border-bottom-color: #5cb85c; /* 앱의 기본 색상 사용 */
}

.tab-content {
    border: 1px solid #ddd;
    border-top: none;
    padding: 20px;
    border-radius: 0 0 4px 4px;
}

.tab-content .tab-panel {
    display: none;
}

.tab-content .tab-panel.active {
    display: block;
}

/**
 * @file Todo List 애플리케이션의 모든 클라이언트 사이드 로직을 관리합니다.
 */

$(document).ready(function() {
    // --- 1. 전역 변수 및 DOM 요소 캐싱 ---
    const $taskNameInput = $('#taskNameInput');
    const $workerSelect = $('#workerSelect');
    const $plannerSelect = $('#plannerSelect');
    const $dueDateInput = $('#dueDateInput');
    const $saveBtn = $('#saveBtn');
    const $ongoingTasksTableBody = $('#ongoingTasksTable tbody');
    const $completedTasksTableBody = $('#completedTasksTable tbody');
    const $ongoingTasksTitle = $('#ongoingTasksTitle');
    const $generateCodeBtn = $('#generateCodeBtn');
    const $clearStorageBtn = $('#clearStorageBtn');
    const $ongoingCodeOutput = $('#ongoingCodeOutput');
    const $completedCodeOutput = $('#completedCodeOutput');
    const $generateBackupCodeBtn = $('#generateBackupCodeBtn');
    const $backupCodeOutput = $('#backupCodeOutput');

    // 애플리케이션 상태 변수
    let ongoingTasks = [];
    let completedTasks = [];
    let isAscending = true; // 작업자 정렬 방향
    let workerIdMap = {};
    let nextWorkerId = 1;

    /**
     * 작업자 이름에 고유한 ID를 할당하고 반환합니다. (UI 색상 지정을 위해 사용)
     * @param {string} workerName - 작업자 이름.
     * @returns {number} 작업자의 고유 ID.
     */
    const getWorkerId = (workerName) => {
        if (!workerIdMap[workerName]) {
            workerIdMap[workerName] = nextWorkerId++;
        }
        return workerIdMap[workerName];
    };

    // --- 2. 헬퍼(Helper) 함수 ---
    /**
     * 'YYYY-MM-DD' 형식의 오늘 날짜 문자열을 반환합니다.
     * @returns {string} 오늘 날짜.
     */
    const getTodayDate = () => {
        const today = new Date();
        const year = today.getFullYear();
        const month = String(today.getMonth() + 1).padStart(2, '0');
        const day = String(today.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
    };

    /**
     * 현재 업무 목록(진행중, 완료)을 브라우저의 localStorage에 저장합니다.
     */
    const saveToLocalStorage = () => {
        localStorage.setItem('ongoingTasks', JSON.stringify(ongoingTasks));
        localStorage.setItem('completedTasks', JSON.stringify(completedTasks));
    };

    // --- 3. 렌더링(Rendering) 함수 ---
    /**
     * '진행중인 업무' 목록과 통계를 화면에 렌더링합니다.
     * [최적화] 배열(map)을 사용해 HTML 문자열을 만든 후 한 번에 DOM에 삽입하여 성능을 향상시킵니다.
     */
    const renderOngoingTasks = () => {
        const workerCounts = {};

        // 업무 목록 HTML 생성
        const tasksHtml = ongoingTasks.map((task, index) => {
            const workerId = getWorkerId(task.worker);

            // 작업자별 업무 수 계산
            workerCounts[task.worker] = (workerCounts[task.worker] || 0) + 1;

            return `
                <tr class="worker-${workerId}" data-index="${index}">
                    <td class="task-name">${task.taskName}</td>
                    <td class="task-worker">${task.worker}</td>
                    <td class="task-planner">${task.planner}</td>
                    <td class="task-duedate">${task.dueDate}</td>
                    <td class="task-assigneddate">${task.assignedDate}</td>
                    <td class="task-actions">
                        <button class="edit-btn">수정</button>
                        <button class="complete-btn">완료</button>
                        <button class="delete-btn">삭제</button>
                    </td>
                </tr>
            `;
        }).join('');

        $ongoingTasksTableBody.html(tasksHtml || '<tr><td colspan="6">진행중인 업무가 없습니다.</td></tr>');

        // 작업자별 통계 HTML 생성
        const workerStatsHtml = Object.keys(workerCounts).map(worker => {
            const workerId = getWorkerId(worker);
            return `<span class="worker-stat worker-${workerId}">${worker}:${workerCounts[worker]}</span>`;
        }).join('');

        // 제목 및 통계 업데이트
        $ongoingTasksTitle.html(`
            <h2>진행중인 업무 ${ongoingTasks.length}건</h2>
            <div class="worker-stats">${workerStatsHtml}</div>
        `);
    };

    /**
     * '완료된 업무' 목록을 화면에 렌더링합니다.
     * [최적화] 배열(map)을 사용해 HTML 문자열을 만든 후 한 번에 DOM에 삽입하여 성능을 향상시킵니다.
     */
    const renderCompletedTasks = () => {
        const tasksHtml = completedTasks.map((task, index) => `
            <tr data-index="${index}">
                <td>${task.taskName}</td>
                <td>${task.worker}</td>
                <td>${task.planner}</td>
                <td>${task.dueDate}</td>
                <td>${task.assignedDate}</td>
                <td>${task.completedDate}</td>
                <td>
                    <button class="cancel-complete-btn">취소</button>
                    <button class="delete-complete-btn">삭제</button>
                </td>
            </tr>
        `).join('');

        // [수정] colspan을 7로 변경
        $completedTasksTableBody.html(tasksHtml || '<tr><td colspan="7">완료된 업무가 없습니다.</td></tr>');
    };
    
    // --- 4. 데이터 로딩 및 초기화 ---
    /**
     * task.html 파일에서 <template> 태그를 읽어 초기 업무 데이터를 배열로 로드합니다.
     * @returns {Promise<void>} 데이터 로드가 완료되면 resolve되는 Promise 객체.
     */
    const loadTasksFromHtml = () => {
        return new Promise((resolve, reject) => {
            // task.html 파일을 한 번만 요청하여 효율성을 높입니다.
            $.get('task.html').done(data => {
                try {
                    const $html = $(data);

                    // 진행중인 업무 템플릿 파싱
                    const ongoingTemplateContent = $html.filter('#ongoing-tasks-template').prop('content');
                    ongoingTasks = []; // 배열 초기화
                    $(ongoingTemplateContent).children('tr').each(function() {
                        const $tr = $(this);
                        const task = {
                            taskName: $tr.find('.task-name').text().trim(),
                            worker: $tr.find('.task-worker').text().trim(),
                            planner: $tr.find('.task-planner').text().trim(),
                            dueDate: $tr.find('.task-duedate').text().trim(),
                            assignedDate: $tr.find('.task-assigneddate').text().trim()
                        };
                        getWorkerId(task.worker);
                        ongoingTasks.push(task);
                    });

                    // 완료된 업무 템플릿 파싱
                    const completedTemplateContent = $html.filter('#completed-tasks-template').prop('content');
                    completedTasks = []; // 배열 초기화
                    $(completedTemplateContent).children('tr').each(function() {
                        const $tr = $(this);
                        const task = {
                            taskName: $tr.children().eq(0).text().trim(),
                            worker: $tr.children().eq(1).text().trim(),
                            planner: $tr.children().eq(2).text().trim(),
                            dueDate: $tr.children().eq(3).text().trim(),
                            assignedDate: $tr.children().eq(4).text().trim(),
                            completedDate: $tr.children().eq(5).text().trim()
                        };
                        getWorkerId(task.worker);
                        completedTasks.push(task);
                    });
                    resolve();
                } catch (e) {
                    reject(e);
                }
            }).fail((jqXHR, textStatus, error) => reject(error));
        });
    };

    /**
     * 애플리케이션을 시작하는 메인 함수입니다.
     * 애플리케이션을 초기화합니다.
     * LocalStorage에 데이터가 있으면 로드하고, 없으면 HTML 템플릿에서 기본값을 로드합니다.
     */
    const initializeApp = () => {
        // [개선] 백업 섹션 UI를 비동기적으로 로드합니다.
        $('#backup-section').load('task_backup.html');

        const storedOngoingTasks = localStorage.getItem('ongoingTasks');
        const storedCompletedTasks = localStorage.getItem('completedTasks');

        if (storedOngoingTasks && storedCompletedTasks) {
            ongoingTasks = JSON.parse(storedOngoingTasks);
            completedTasks = JSON.parse(storedCompletedTasks);
            
            // 페이지 로드 시 workerIdMap을 다시 채웁니다.
            ongoingTasks.forEach(task => getWorkerId(task.worker));
            completedTasks.forEach(task => getWorkerId(task.worker));
            
            renderOngoingTasks();
            renderCompletedTasks();
        } else {
            loadTasksFromHtml().then(() => {
                saveToLocalStorage();
                renderOngoingTasks();
                renderCompletedTasks();
            }).catch(error => {
                console.error("초기 데이터 로딩에 실패했습니다:", error);
                $ongoingTasksTableBody.html('<tr><td colspan="6">초기 업무 로딩에 실패했습니다.</td></tr>');
                $completedTasksTableBody.html('<tr><td colspan="6">초기 업무 로딩에 실패했습니다.</td></tr>');
            });
        }

        setupEventListeners();
    };

    // --- 5. 이벤트 핸들러(Event Handlers) 등록 ---
    const setupEventListeners = () => {
        /**
         * 입력 폼의 데이터를 기반으로 새로운 업무를 추가합니다.
         * 입력값 유효성 검사를 수행하고, 성공 시 데이터를 저장하고 화면을 다시 렌더링합니다.
         */
        const addTask = () => {
            const taskName = $taskNameInput.val();
            const worker = $workerSelect.val();
            const planner = $plannerSelect.val();
            const dueDate = $dueDateInput.val();
            const assignedDate = getTodayDate();
            
            if (taskName && worker && planner && dueDate) {
                const newTask = { taskName, worker, planner, dueDate, assignedDate };
                ongoingTasks.push(newTask);
                saveToLocalStorage();
                renderOngoingTasks();
                // [UX 개선] 업무명만 초기화하여 연속적인 입력 편의성 향상
                $taskNameInput.val('').focus();
            } else {
                alert('모든 필드를 입력해주세요.');
            }
        };

        // 저장 버튼 클릭 시 업무 추가
        $saveBtn.on('click', addTask);

        // [UX 개선] 업무명 입력 필드에서 Enter 키를 눌러도 저장되도록 기능 추가
        $taskNameInput.on('keypress', function(e) {
            if (e.which === 13) { // Enter 키 코드
                e.preventDefault(); // 기본 동작(폼 제출 등) 방지
                addTask();
            }
        });

        // [성능 최적화] 이벤트 위임(Event Delegation)을 사용하여 동적으로 추가된 버튼에도 이벤트가 동작하도록 합니다.
        // '삭제' 버튼 클릭 이벤트
        $ongoingTasksTableBody.on('click', '.delete-btn', function() {
            if (confirm('정말로 삭제하시겠습니까?')) {
                const $tr = $(this).closest('tr');
                const index = $tr.data('index');
                ongoingTasks.splice(index, 1);
                saveToLocalStorage();
                renderOngoingTasks();
            }
        });

        // '수정' 버튼 클릭 이벤트: 테이블 행을 편집 가능한 폼으로 변경
        $ongoingTasksTableBody.on('click', '.edit-btn', function() {
            const $tr = $(this).closest('tr');
            const index = $tr.data('index');
            const task = ongoingTasks[index];

            $tr.addClass('editing');
            $tr.find('.task-name').html(`<input type="text" value="${task.taskName}">`);
            $tr.find('.task-worker').html($workerSelect.clone().val(task.worker));
            $tr.find('.task-duedate').html(`<input type="date" value="${task.dueDate}">`);
            $tr.find('.task-actions').html('<button class="save-edit-btn">수정완료</button>');
        });

        // '수정완료' 버튼 클릭 이벤트: 변경된 내용을 저장
        $ongoingTasksTableBody.on('click', '.save-edit-btn', function() {
            const $tr = $(this).closest('tr');
            const index = $tr.data('index');
            const newTaskName = $tr.find('.task-name input').val();
            const newWorker = $tr.find('.task-worker select').val();
            const newDueDate = $tr.find('.task-duedate input').val();
            
            if (newTaskName && newWorker && newDueDate) {
                ongoingTasks[index].taskName = newTaskName;
                ongoingTasks[index].worker = newWorker;
                ongoingTasks[index].dueDate = newDueDate;
                
                saveToLocalStorage();
                renderOngoingTasks();
            } else {
                alert('수정할 내용을 모두 입력해주세요.');
            }
        });

        // '완료' 버튼 클릭 이벤트: 진행중인 업무를 완료 목록으로 이동
        // [수정] 확인(confirm) 창 없이 바로 완료 처리
        $ongoingTasksTableBody.on('click', '.complete-btn', function() {
            const $tr = $(this).closest('tr');
            const index = $tr.data('index');
            const completedTask = ongoingTasks.splice(index, 1)[0];
            completedTask.completedDate = getTodayDate();
            completedTasks.push(completedTask);

            saveToLocalStorage();
            renderOngoingTasks();
            renderCompletedTasks();
        });

        // [신규] '취소' 버튼 클릭 이벤트: 완료된 업무를 진행중 목록으로 복원
        $completedTasksTableBody.on('click', '.cancel-complete-btn', function() {
            const $tr = $(this).closest('tr');
            const index = $tr.data('index');
            const taskToRestore = completedTasks.splice(index, 1)[0];
            delete taskToRestore.completedDate; // 완료일 속성 제거
            ongoingTasks.push(taskToRestore);
            saveToLocalStorage();
            renderOngoingTasks();
            renderCompletedTasks();
        });

        // [신규] 완료된 업무 '삭제' 버튼 클릭 이벤트
        $completedTasksTableBody.on('click', '.delete-complete-btn', function() {
            if (confirm('이 완료된 업무를 영구적으로 삭제하시겠습니까?')) {
                const $tr = $(this).closest('tr');
                const index = $tr.data('index');
                completedTasks.splice(index, 1);
                saveToLocalStorage();
                renderCompletedTasks();
            }
        });
        // '업무 코드 생성' 버튼 클릭 이벤트
        $generateCodeBtn.on('click', () => {
            const ongoingTableHtml = $ongoingTasksTableBody.html();
            const completedTableHtml = $completedTasksTableBody.html();
            $ongoingCodeOutput.text(ongoingTableHtml);
            $completedCodeOutput.text(completedTableHtml);
        });

        // '완료된 업무 백업 코드 생성' 버튼 클릭 이벤트
        $generateBackupCodeBtn.on('click', () => {
            if (completedTasks.length === 0) {
                $backupCodeOutput.text('코드 생성할 완료된 업무 데이터가 없습니다.');
                return;
            }

            // '완료된 업무' 데이터(completedTasks)를 기반으로 '비고' 열이 없는 HTML 코드를 생성합니다.
            const backupBodyHtml = completedTasks.map(task => {
                // 각 줄을 들여쓰기하여 가독성을 높입니다.
                return `            <tr>
                <td>${task.taskName}</td>
                <td>${task.worker}</td>
                <td>${task.planner}</td>
                <td>${task.dueDate}</td>
                <td>${task.assignedDate}</td>
                <td>${task.completedDate}</td>
            </tr>`;
            }).join('\n');
            
            $backupCodeOutput.text(backupBodyHtml);
        });

        // '업무 스토리지 비우기' 버튼 클릭 이벤트
        $clearStorageBtn.on('click', () => {
            if (confirm('모든 업무 데이터를 삭제하고 초기값으로 되돌리시겠습니까?')) {
                localStorage.removeItem('ongoingTasks');
                localStorage.removeItem('completedTasks');
                
                // HTML 파일에서 초기 데이터를 다시 로드
                loadTasksFromHtml().then(() => {
                    saveToLocalStorage();
                    renderOngoingTasks();
                    renderCompletedTasks();
                }).catch(error => {
                    alert('초기화에 실패했습니다. task.html 파일이 있는지 확인해주세요.');
                    console.error(error);
                });
                
                $ongoingCodeOutput.empty();
                $completedCodeOutput.empty();
                $backupCodeOutput.empty();
            }
        });
        
        // '작업자' 테이블 헤더 클릭 이벤트: 작업자 이름으로 정렬
        $('#ongoingTasksTable th:contains("작업자")').on('click', () => {
            isAscending = !isAscending;

            ongoingTasks.sort((a, b) => {
                const workerA = a.worker.toLowerCase();
                const workerB = b.worker.toLowerCase();
                
                if (isAscending) {
                    return workerA.localeCompare(workerB);
                } else {
                    return workerB.localeCompare(workerA);
                }
            });

            saveToLocalStorage();
            renderOngoingTasks();
        });

        /**
         * 주어진 DOM 요소의 텍스트 전체를 선택(블록 지정)합니다.
         * @param {HTMLElement} element - 텍스트를 선택할 DOM 요소.
         */
        const selectText = (element) => {
            const range = document.createRange();
            range.selectNodeContents(element);
            const selection = window.getSelection();
            selection.removeAllRanges();
            selection.addRange(range);
        };

        // 생성된 HTML 코드를 클릭하면 전체 선택되도록 하는 이벤트
        $ongoingCodeOutput.on('click', function() {
            selectText(this);
        });
        
        $completedCodeOutput.on('click', function() {
            selectText(this);
        });

        $backupCodeOutput.on('click', function() {
            selectText(this);
        });

        // [수정] 백업 탭 클릭 이벤트: 동적으로 로드된 콘텐츠에 이벤트 핸들러를 바인딩하기 위해 이벤트 위임 사용
        // 정적 부모 요소인 #backup-section에 이벤트를 위임합니다.
        $('#backup-section').on('click', '#backupTabNav button', function() {
            const $this = $(this);
            if ($this.hasClass('active')) {
                return; // 이미 활성화된 탭이면 아무것도 안 함
            }

            // 모든 탭과 패널에서 active 클래스 제거
            $('#backupTabNav .active').removeClass('active');
            $('#backupTabContent .active').removeClass('active');

            // 클릭된 탭과 해당 패널에 active 클래스 추가
            $this.addClass('active');
            $('#' + $this.data('tab')).addClass('active');
        });
    };

    // --- 6. 애플리케이션 시작 ---
    initializeApp();
});

<div class="task-section backup-section">
    <h2>완료된 업무 백업</h2>
    <div class="tab-container">
        <div class="tab-nav" id="backupTabNav">
            <button class="active" data-tab="panel-1">1월</button>
            <button data-tab="panel-2">2월</button>
            <button data-tab="panel-3">3월</button>
            <button data-tab="panel-4">4월</button>
            <button data-tab="panel-5">5월</button>
            <button data-tab="panel-6">6월</button>
            <button data-tab="panel-7">7월</button>
            <button data-tab="panel-8">8월</button>
            <button data-tab="panel-9">9월</button>
            <button data-tab="panel-10">10월</button>
            <button data-tab="panel-11">11월</button>
            <button data-tab="panel-12">12월</button>
        </div>
        <div class="tab-content" id="backupTabContent">
            <div class="tab-panel active" id="panel-1">
                <h3>1월 완료된 업무</h3>
                <table>
                    <thead>
                        <tr>
                            <th>업무명</th>
                            <th>작업자</th>
                            <th>기획자</th>
                            <th>완료일</th>
                            <th>배정일</th>
                            <th>실제 완료일</th>
                            <th>비고</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr data-index="0">
                            <td>기존 완료된 업무1</td>
                            <td>현대</td>
                            <td>기획자3</td>
                            <td>2025-08-20</td>
                            <td>2025-08-10</td>
                            <td>2025-08-12</td>
                            <td><button class="cancel-complete-btn">취소</button></td>
                        </tr>
                    
                        <tr data-index="1">
                            <td>업무 리스트 추가하기....</td>
                            <td>이신한</td>
                            <td>삼기획</td>
                            <td>2025-08-21</td>
                            <td>2025-08-16</td>
                            <td>2025-08-16</td>
                            <td><button class="cancel-complete-btn">취소</button></td>
                        </tr>
                    
                        <tr data-index="2">
                            <td>업무명 자동저장 4</td>
                            <td>이신한</td>
                            <td>일기획</td>
                            <td>2025-08-19</td>
                            <td>2025-08-16</td>
                            <td>2025-08-16</td>
                            <td><button class="cancel-complete-btn">취소</button></td>
                        </tr>
                    
                    </tbody>
                </table>
            </div>
            <div class="tab-panel" id="panel-2">
                <h3>2월 완료된 업무</h3>
                <table>
                    <thead>
                        <tr>
                            <th>업무명</th>
                            <th>작업자</th>
                            <th>기획자</th>
                            <th>완료일</th>
                            <th>배정일</th>
                            <th>실제 완료일</th>
                            <th>비고</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr><td colspan="7">2월 완료된 업무를 불러오는 중...</td></tr>
                    </tbody>
                </table>
            </div>
            <div class="tab-panel" id="panel-3">
                <h3>3월 완료된 업무</h3>
                <table>
                    <thead>
                        <tr>
                            <th>업무명</th>
                            <th>작업자</th>
                            <th>기획자</th>
                            <th>완료일</th>
                            <th>배정일</th>
                            <th>실제 완료일</th>
                            <th>비고</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr><td colspan="7">3월 완료된 업무를 불러오는 중...</td></tr>
                    </tbody>
                </table>
            </div>
            <div class="tab-panel" id="panel-4">
                <h3>4월 완료된 업무</h3>
                <table>
                    <thead>
                        <tr>
                            <th>업무명</th>
                            <th>작업자</th>
                            <th>기획자</th>
                            <th>완료일</th>
                            <th>배정일</th>
                            <th>실제 완료일</th>
                            <th>비고</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr><td colspan="7">4월 완료된 업무를 불러오는 중...</td></tr>
                    </tbody>
                </table>
            </div>
            <div class="tab-panel" id="panel-5">
                <h3>5월 완료된 업무</h3>
                <table>
                    <thead>
                        <tr>
                            <th>업무명</th>
                            <th>작업자</th>
                            <th>기획자</th>
                            <th>완료일</th>
                            <th>배정일</th>
                            <th>실제 완료일</th>
                            <th>비고</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr><td colspan="7">5월 완료된 업무를 불러오는 중...</td></tr>
                    </tbody>
                </table>
            </div>
            <div class="tab-panel" id="panel-6">
                <h3>6월 완료된 업무</h3>
                <table>
                    <thead>
                        <tr>
                            <th>업무명</th>
                            <th>작업자</th>
                            <th>기획자</th>
                            <th>완료일</th>
                            <th>배정일</th>
                            <th>실제 완료일</th>
                            <th>비고</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr><td colspan="7">6월 완료된 업무를 불러오는 중...</td></tr>
                    </tbody>
                </table>
            </div>
            <div class="tab-panel" id="panel-7">
                <h3>7월 완료된 업무</h3>
                <table>
                    <thead>
                        <tr>
                            <th>업무명</th>
                            <th>작업자</th>
                            <th>기획자</th>
                            <th>완료일</th>
                            <th>배정일</th>
                            <th>실제 완료일</th>
                            <th>비고</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr><td colspan="7">7월 완료된 업무를 불러오는 중...</td></tr>
                    </tbody>
                </table>
            </div>
            <div class="tab-panel" id="panel-8">
                <h3>8월 완료된 업무</h3>
                <table>
                    <thead>
                        <tr>
                            <th>업무명</th>
                            <th>작업자</th>
                            <th>기획자</th>
                            <th>완료일</th>
                            <th>배정일</th>
                            <th>실제 완료일</th>
                            <th>비고</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr><td colspan="7">8월 완료된 업무를 불러오는 중...</td></tr>
                    </tbody>
                </table>
            </div>
            <div class="tab-panel" id="panel-9">
                <h3>9월 완료된 업무</h3>
                <table>
                    <thead>
                        <tr>
                            <th>업무명</th>
                            <th>작업자</th>
                            <th>기획자</th>
                            <th>완료일</th>
                            <th>배정일</th>
                            <th>실제 완료일</th>
                            <th>비고</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr><td colspan="7">9월 완료된 업무를 불러오는 중...</td></tr>
                    </tbody>
                </table>
            </div>
            <div class="tab-panel" id="panel-10">
                <h3>10월 완료된 업무</h3>
                <table>
                    <thead>
                        <tr>
                            <th>업무명</th>
                            <th>작업자</th>
                            <th>기획자</th>
                            <th>완료일</th>
                            <th>배정일</th>
                            <th>실제 완료일</th>
                            <th>비고</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr><td colspan="7">10월 완료된 업무를 불러오는 중...</td></tr>
                    </tbody>
                </table>
            </div>
            <div class="tab-panel" id="panel-11">
                <h3>11월 완료된 업무</h3>
                <table>
                    <thead>
                        <tr>
                            <th>업무명</th>
                            <th>작업자</th>
                            <th>기획자</th>
                            <th>완료일</th>
                            <th>배정일</th>
                            <th>실제 완료일</th>
                            <th>비고</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr><td colspan="7">11월 완료된 업무를 불러오는 중...</td></tr>
                    </tbody>
                </table>
            </div>
            <div class="tab-panel" id="panel-12">
                <h3>12월 완료된 업무</h3>
                <table>
                    <thead>
                        <tr>
                            <th>업무명</th>
                            <th>작업자</th>
                            <th>기획자</th>
                            <th>완료일</th>
                            <th>배정일</th>
                            <th>실제 완료일</th>
                            <th>비고</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr><td colspan="7">12월 완료된 업무를 불러오는 중...</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

페이지 이동후 원하는 곳까지 부드럽게 스크롤되게 하기

demun — Wed, 5 Jun 2019 11:21:53 +0900

문서를 만들다보면 해당페이지로 이동후 원하는 위치까지 스크롤이 되는 경우를 원할때가 있습니다.

이때 문서가 html 이든 jsp(do), asp 든 상관없이 원하는 액션이 되길 원합니다.

이런 액션이 종종 있어서 아예 만들어봤습니다.

필요한 부분

index.html: 이동하기전 보여져야할 페이지(링크가 있는 페이지)
target.html: 최종 이동할 페이지(스크롤할 영역이 있는 페이지)
main.js: 해당영역까지 부드럽게 스크롤이 될 스크립트

아래 페이지의 내용은 이렇습니다.

링크를 보시면 'target.html#section1' 형식입니다. '해당페이지#해당영역아이디'

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>index</title>
</head>
<body>
    <a class="section3" href="target.html#section1">
        <div>
            <p>Go to section scroll-section1</p>
        </div>
    </a>
    <a class="section3" href="target.html#section2">
        <div>
            <p>Go to section scroll-section2</p>
        </div>
    </a>
    <a class="section3" href="target.html#section3">
        <div>
            <p>Go to section scroll-section3</p>
        </div>
    </a>
    <a class="section3" href="target.html#section4">
        <div>
            <p>Go to section scroll-section4</p>
        </div>
    </a>
</body>
</html>

id 영역을 잡고 보기편하게 높이값을 1000px 를 지정하고 배경색을 지정했습니다.

target.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>scroll</title>
    <style>
        * { margin: 0; padding: 0; }
        section { color: #fff; height: 1000px; text-align: center; line-height: 1000px; font-size: 5em;}
        .bg1 { background-color: #f30; }
        .bg2 { background-color: #630; }
        .bg3 { background-color: #a06; }
        .bg4 { background-color: #660; }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="main.js"></script>
</head>
<body>
    <section class="bg1" id="scroll-section1">
        <p>section 1</p>
    </section>
    <section class="bg2" id="scroll-section2">
        <p>section 2</p>
    </section>
    <section class="bg3" id="scroll-section3">
        <p>section 3</p>
    </section>
    <section class="bg4" id="scroll-section4">
        <p>section 4</p>
    </section>
</body>
</html>

주소값 page_url 을 가지고와서 substring으로 문자열을 추출하는데 lastIndexOf로 마지막문자열을 검색하여 page_id 변수에 담습니다.

'#scroll-' + page_id 영역까지 스크롤합니다.

main.js

$(document).ready(function () {
    var page_url = window.location.href;
    var page_id = page_url.substring(page_url.lastIndexOf("#") + 1);
    // alert(page_id);

    if (page_id == 'section1') {
        $('html, body').animate({
            scrollTop: $('#scroll-' + page_id).offset().top
        }, 500);
    } else if (page_id == 'section2') {
        $('html, body').animate({
            scrollTop: $('#scroll-' + page_id).offset().top
        }, 500);
    } else if (page_id == 'section3') {
        $('html, body').animate({
            scrollTop: $('#scroll-' + page_id).offset().top
        }, 500);
    } else if (page_id == 'section4') {
        $('html, body').animate({
            scrollTop: $('#scroll-' + page_id).offset().top
        }, 500);
    }

});

파일을 다운로드해서 사용해보세요.

코드를 이쁘게 표시하는 방법 Prism

demun — Thu, 20 Dec 2018 10:59:06 +0900

블로그상에서 코드를 이쁘게 보이기 위해서 여러가지 플러그인을 사용해봤습니다.

이전까지만해도 가장 많이 사용했던 플러그인은 highlightjs 였습니다.

구문강조 highlightjs 사용법 -> http://demun.tistory.com/2419?category=388459

블로그상에서 구문강조 할때는 여러가지 유의해야 합니다 막 바꾸다가는 이전 작업물이 제대로 나오지 않는다던가, 또는 다시 작업해야하는 양이 많아질수 있습니다.

저도 이전에 highlightjs 를 사용했기때문에 이번에는 prismjs 로 변경을 해서 작업해야하는 양이 좀 되긴 합니다.

제가 구문강조 플러그인 선택한 이유

용량이 적습니다.(원하는 언어, 기능만 선택해서 사용가능)
기능이 많습니다.(숫자 표시, 하이라이트 기능 등등 이것도 원하는것만 사용가능)
사용법이 무척 간단합니다.

구문강조 Prism 사용하는 법

파일 포함하기. js 와 css 만 포함하면 끝입니다.

<!DOCTYPE html>
<html>
<head>
	...
	<link href="./images/prism.css" rel="stylesheet" />
</head>
<body>
	...
	<script src="./images/prism.js"></script>
</body>
</html>

이렇게 js 와 css 만 포함하면 됩니다.

사용하는 방법은 사용하고자 하는 블럭에 language-xxxx 형식으로 언어만 지정하면 끝입니다.

<pre><code class="language-xxxx">....</code></pre>

html은 language-html 또는 language-markup 으로 css는 language-css 으로 javascript는 language-js 또는 language-javascript 등으로 언어만 지정하면 됩니다.

js 와 css 파일은 prism 다운로드 페이지에서 다운받으면 됩니다.

https://prismjs.com/download.html

기본적으로 압축된 버젼(Minified version)으로 사용하고 1번부분에서 테마를 지정할 수 있습니다.

선택하면 바로 적용되며 우측에 DARK, FUNKY, OKAIDIA .. 등을 클릭하면 어떤 테마인지 미리볼수 있습니다.

2번 언어에서는 기본적으로, html,css,javascript 등이 포함된 버젼이 사용되고, 추가적으로 언어를 선택만하면 추가됩니다.

아래로 스크롤을 하면 플러그인을 선택하는 곳이 있습니다.

저는 대략 Line Highligh 와 Line Numbers 기능을 선택했습니다.

이렇게 원하는 기능을 선택하면 아래에 js 와 css 부분에 자동으로 추가됩니다.

하단에 다운로드를 클릭해서 파일을 사용하면 됩니다.

테마는 https://prismjs.com 나 다운로드페이지 https://prismjs.com/download.html 등에서 미리볼수 있습니다.

플러그인을 어떻게 사용하는지는 각각의 플러그인 페이지에 나와있습니다.

플로그인 리스트가 있으면 좋을텐데 직접 주소창에 적고 확인해야 합니다.

주소에 플러그인 이름을 적으면 해당 페이지로 이동합니다.

line-highlight 기능은 https://prismjs.com/plugins/line-highlight 로, line-numbers 는 https://prismjs.com/plugins/line-numbers 로 이동하면 사용법을 볼 수 있습니다.

추가 링크

구문강조 highlightjs 사용법 -> http://demun.tistory.com/2419

티스토리 치환자 본문에 표시하는 방법 -> http://demun.tistory.com/2027

Visual Studio Code(비주얼 스튜디오 코드) 에디터 상단에 파일 전체 경로 보이기

demun — Mon, 15 Oct 2018 07:45:11 +0900

vscode(Visual Studio Code)는 기본적으로 에디터 상단에 파일명 - 폴더명을 표시하게 되어 있습니다.

하지만 파일의 전체 경로가 필요할 때가 있습니다. 특히 숨김파일이나 설정파일 같은 경우죠.

설정파일을 한번 열어보겠습니다. 파일 - 기본설정 - 설정 또는 Ctrl + , 입니다.

title 로 검색을 하면 아래와 같은 화면이 나옵니다.

설명이 다 되어 있으니 원하는 키워드를 입력해서 사용하세요.

저의 경우 전체경로를 보이게 하기위해 `${activeEditorLong}` 를 지정했습니다.

파일을 열어보면 전체 경로가 나온것을 알수 있습니다.

움짤 만들어주는 프로그램 AllCap

demun — Thu, 25 Jan 2018 07:00:00 +0900

움짤을 만드는 방법은 여러가지가 있습니다. 제가 알려드릴 프로그램은 AllCap 입니다.

이 프로그램은 동영상을 녹화하면 움짤인 gif 이미지로 만들어줍니다.

예제로 만든 움짤 이미지를 한번 보세요.

무설치 프로그램으로 한번 사용해보면 누구나 쉽게 움짤을 만들수 있습니다.

AllCap -> https://blog.naver.com/ds3evx/220195337169

AllCap를 실행하면 아래와 같은 화면이 나옵니다.

OK를 누르고 마우스우측버튼에 움짤 만들기를 클릭합니다.

그럼 아래처럼 캡쳐 영역이 나오고 하단에 설명이 나옵니다.

마우스를 보시면 영역을 지정할 수 있습니다. 영역을 지정하면 아래 Record(F5) 를 클릭해서 동영상을 녹화합니다.

그럼 간단이 움짤이 만들어집니다. 편집후저장을 통해서 저장하기전 먼저 편집과정을 거칠수도 있습니다.

키패드 누름을 나타내는 프로그램 PointerFocus -> http://demun.tistory.com/2528 과 같이 사용하면 아주 좋은 움짤을 만들수 있습니다.

키패드 누름을 나타내는 프로그램 PointerFocus

demun — Thu, 25 Jan 2018 07:00:00 +0900

동영상을 녹화할때 키패드 누른것을 알려줄때가 있습니다.

단축키를 무었을 눌렀는지 나타내야하는데 이는 프로그램으로 할 수 있습니다.

예제 이미지를 한번 보시죠.

웹상에 이런 프로그램들이 많이 있습니다.

KeyCastOW PxKeystrokesForScreencasts KeyPose 하지만 제가 사용해본 결과 가장 좋은것은 PointerFocus 입니다.

생김새는 아래와 같이 생겼습니다. 아래그림은 키보드 부분만 활성화를 시켜서 단축키를 누르면 위처럼 단축키가 표시됩니다.

이 프로그램은 http://www.pointerfocus.com/ 에서 다운로드 받을수 있습니다.

움짤 만들어주는 프로그램 AllCap -> http://demun.tistory.com/2529 과 함께 사용하면 좋은 움짤을 만들수 있습니다.

Visual Studio Code(비주얼 스튜디오 코드)에서 task 사용하기

demun — Thu, 11 Jan 2018 07:00:00 +0900

이글은 https://demun.github.io/vscode-tutorial/task/ 에서 볼 수 있습니다.

테스크는 grunt, gulp 등과 같은 작업주자 또는 빌드도구를 말합니다.

vscode 에서는 빌드도구를 에디터 자체내에서 이용할 수 있도록 지원합니다.

타입스크립트 빌드하기

타입스크립트는 빌드과정을 거쳐 자바스크립트로 변환해야 사용할 수 있습니다. 따로 빌드도구를 사용하지 않고 vscode 에서 빌드하는 과정을 알려드립니다.

콘솔창에서 아래와 같이 입력합니다.

mkdir task-test  # task-test 폴더생성
cd task-test     # task-test 폴더로 이동
tsc --init       # tsconfig.json 생성
code .           # vscode 열기

코드 실행 모습

vscode 열린 모습

이제 HelloWorld.ts 파일을 새로 만듭니다.

구문은 아래와 같이 작성해둡니다.

class Startup {
    public static main(): number {
        console.log('Hello World');
        return 0;
    }
}

Startup.main();

이제 빌드를 해봅니다. 빌드단축키는 ctrl+shift+b 입니다.

tsc 빌드 를 선택합니다.

빌드가 되어 HelloWorld.js 파일이 생성된것이 보입니다.

HelloWorld.js 를 열어보면 빌드가 되서 자바스립트 구문으로 된것이 보입니다.

작업 자동 감지

vscode 는 작업주자를 자동으로 감지하고 실행할 수 있습니다.

아래처럼 작업주자가 있어도 ctrl+shift+b 를 클릭하면 작업주자가 나옵니다.

sass 파일 컴파일하기

sass 파일을 컴파일하여 css 파일로 만들수 있습니다.

먼저 sass 파일을 컴파일하려면 nodejs 가 설치되어 있어야하며, sass 파일을 컴파일하려면 node-sass 를 설치해야합니다.

아래처럼 콘솔창에 입력하세요.

npm install -g node-sass

아래처럼 간단한 sass 파일이 있다고 가정 합니다.

빌드 단축키인 ctrl+shift+b 를 클릭하면 아래처럼 작업구성이 되어 있지 않다고 나옵니다.

빌드 작업 구성을 클릭합니다.

템플릿에서 tasks.json 파일만들기를 선택합니다.

Others 임의의 외부 명령을 실행하는 예를 선택합니다.

그럼 .vscode 라는 폴더가 생성되고 그 안에 tasks.json 파일이 만들어집니다.

구문을 아래처럼 변경합니다.

환경구성을 했으니 빌드 단축키인 ctrl+shift+b 를 누릅니다.

Node Sass Compiler 를 선택합니다.

컴파일이 된 모습이 나타납니다.

style.css 파일을 열어보면 컴파일된 모습이 나옵니다.

위에서 명령어인 node-sass style.scss style.css 는 node-sass 의 명령어입니다.

터미널에서 직접 명령어를 입력해도 동일하게 빌드됩니다.

node-sass 홈페이지 에 보면 각종 옵션이 나와있습니다.

sass 컴파일 자동화하기

자동화하기 위해서 작업주자인 gulp 를 사용해보겠습니다. 그러기위해서는 gulp 와 일부 플러그인을 설치해야합니다.

npm install -g gulp # 위의 과정을 거쳤다면 안해도 됩니다.
npm install gulp gulp-sass # 현재 폴더 위치에서 실행합니다.

gulpfile.js 를 만들고 아래와 같이 작성합니다.

// Sass configuration
var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function() {
    gulp.src('*.scss')
        .pipe(sass())
        .pipe(gulp.dest(function(f) {
            return f.base;
        }))
});

여기선 간단히 말하면 gulp.task('sass, ... 은 작업이름이 sass 이고, gulp.task('default, [sass], ... 은 작업이름이 default 입니다.

gulp.task('default', ['sass'], function() {
    gulp.watch('*.scss', ['sass']);
})

에서 gulp.watch() 는 실시간으로 sass 파일을 감시하는 구문입니다.

빌드작업의 단축키인 ctrl+shift+b 를 클릭하면 아래처럼 Sass Compile 가 나옵니다.

작업 - 작업실행을 클릭합니다.

gulp: default 를 선택합니다.

작업 출력을 스캔하지 않고 계속을 선택합니다.

작업이 실행되는 모습이 보입니다.

위에서 언급했던 실시간 감지기능을 알아보기 위해 vscode 에서 두 파일을 열었습니다.

sass 파일을 수정하면 css 파일도 같이 수정이 되는것을 볼 수 있습니다.

자바스크립트, SASS, LESS, Markdown, TypeScript .... 등등 컴파일하는 방법은 홈페이지를 참고하길 바랍니다.

https://code.visualstudio.com/docs/languages/overview

Visual Studio Code(비주얼 스튜디오 코드)에서 디버깅하기

demun — Wed, 10 Jan 2018 07:00:00 +0900

이글은 https://demun.github.io/vscode-tutorial/debug/ 에서 볼 수 있습니다.

vscode 에서 디버깅은 핵심기능중 하나입니다.

vscode 에는 node.js 런타임에 대한 디버깅 지원기능이 내장되어 있어 JavaScript, TypeScript 및 JavaScript로 변환된 다른 언어를 디버깅 할 수 있습니다. 그러기에 기본적으로 디버깅은 하려면 nodejs 를 설치해야 합니다.

다른 언어에 대해서는 확장기능을 설치해서 이용이 가능합니다.

vscode 폴더에 wecome.js 라는 자바스크립트 코드를 하나 만들고 디버깅을 해봅니다.

고급 디버깅을 하려면 환경설정을 해줘야 합니다. 상단에 'launch.json' 구성을 클릭하면 디버깅 환경설정파일이 생성됩니다.

'launch.json' 파일은 '.vscode' 폴더에 생성됩니다.

'launch.json' 의 구성에서 이름을 알기 쉽게 변경해봅니다.

디버깅을 클릭하면 변경한 js 디버깅이라는 이름으로 변경되어 있습니다.

중단점을 설정하고 디버깅시작을 하면 디버깅 작업창이 뜹니다.

계속/일시중지 F5
단위실행 F10
단계정보 F11
단계출력 shift+F11
다시시작 ctrl+shift+F5
중지 shift+F5

launch.json

다음 속성은 실행구성에 필수 요소입니다.

type : 실행구성에 사용할 디버거 유형(node, php, python..등)
request : 실행구성의 요청유형 현재는 'launch', 'attach` 입니다.
name : 디버그 드롭다운에 나타나는 디버그 런치 이름

다음은 실행구성에서 사용할수 있는 선택적 속성입니다.

preLaunchTask : 디버그 세션이 시작되기 전에 작업을 시작하려면 이 속성을 tasks.json 에 지정된 이름으로 설정해야합니다.
internalConsoleOptions : 디버깅 세션동안 다버그 콘솔 패널의 가시성을 제어합니다.
debugServer : 디버그를 시작하는 대신 지정 포트에 연결합니다.

많은 디버거가 다음 속성 중 일부를 지원합니다.

program : 디버거를 시작할 때 실행할 실행 파일 또는 파일
args: 디버깅 할 프로그램에 전달된 인수
env: 환경 변수
cwd: 의존성 및 기타 파일을 찾기위한 현재 작업 디렉토리
port: 실행중인 프로세스에 연결할 때의 포트
stopOnEntry: 프로그램이 시작되면 즉시 중단
console: 어떤 종류를 콘솔을 사용할지 지정. 예를 들어 internalConsole, integratedTerminal, externalTerminal.

vscode는 문자열 내부의 변수 대체를 지원 launch.json하며 다음과 같이 미리 정의 된 변수가 있습니다.

${workspaceFolder} : vscode에서 연 폴더의 경로
${workspaceFolderBasename} : vscode에서 슬래시없이 열리는 폴더 이름 (/)
${file} : 현재 열려있는 파일
${relativeFile} : workspaceFolder 에서 현재 열린 파일
${fileBasename} : 현재 열려있는 파일의 기본 이름
${fileBasenameNoExtension} : 파일 확장명이 없는 현재 열린 파일의 기본 이름
${fileDirname} : 현재 열려있는 파일의 디렉토리 이름
${fileExtname} : 현재 열려있는 파일의 확장자
${cwd} : 시작시 태스크 러너의 현재 작업 디렉토리
${lineNumber} : 활성 파일에서 현재 선택된 행 번호

참고: https://code.visualstudio.com/docs/editor/debugging

Visual Studio Code(비주얼 스튜디오 코드)에서 git 사용하기

demun — Tue, 9 Jan 2018 07:00:00 +0900

이글은 https://demun.github.io/vscode-tutorial/git/ 에서 볼 수 있습니다.

vscode 는 git 을 사용하기 위한 기능이 기본적으로 추가되어 있습니다.

git 을 사용하려면 먼저 https://github.com 에 회원가입이 되어 있어야하고, git-scm 에서 git 프로그램을 다운로드하고 설치해야 합니다.

가입이 안되어 있다면 https://github.com 에 회원가입을 하고 프로그램도 설치하시길 바랍니다.

설치가 되어 있다고 가정하고 vscode 에서 git 을 사용하는 방법을 알아보겠습니다.

최초설정

git 에 내이름과 이메일등을 먼저 등록하는 것이 좋습니다. vscode 에서 git 을 사용하다보면 나중에 이름과 이메일을 물어옵니다. 그러니 먼저 설정해둡니다.

이름과 이메일은 최초 한번만 설정하면 됩니다.

콘솔창을 열고 아래의 내용을 본인의 것으로 바꿔주세요.

git config --global user.name "이름"
git config --global user.email "이메일"

vscode 에서 git 사용하기

git 을 사용하려면 vscode 에서 지원하는 터미널에서 명령어를 입력해서 진행해도 똑같이 사용할 수 있습니다.

하지만 여기서는 그런 명령어없이 간단하게 클릭만으로 저장소를 사용하는 방법을 알려드립니다.

여기서는 테스트를 위해서 저장소를 생성하고 클론하는 방향으로 진행해보겠습니다. 저장소가 있는경우 클론부터 진행하면 됩니다.

먼저 저장소를 생성합니다.

vscode-git 이라는 저장소를 만들었습니다.

저장소 주소를 복사합니다.

ctrl+shift+p 를 눌러 명령팔렛트를 열어서 git clone 를 누릅니다.

저장소 주소를 물어오고, 복사한 주소를 넣습니다.

로컬컴퓨터의 위치를 물어오면 적당한 곳을 지정해줍니다.

그럼 아래처럼 알림이 뜨고, 리포지토리 열기를 클릭합니다.

vscode 가 재시작되고 로컬의 저장소가 열립니다.

readme 파일을 수정해봅니다. 그럼 자동으로 git 부분에 수정한부분이 표시됩니다.

커밋 메시지를 적고, ctrl+Enter 을 눌러도 되고, 상단에 커밋아이콘을 클릭해도 됩니다.

알림창이 뜨고, 예 또는 항상을 클릭합니다.

이부분까지 하면 git 사이트에 커밋메시지가 보입니다.

상단에 메뉴부분을 클릭하면 확장메뉴가 나오는데 푸시를 클릭합니다.

이부분에서 위에서의 최초설정이 안되어 있으면 이름과 이메일을 물어옵니다.

하지만 설정을 했다면 바로 진행됩니다.

저장소에 보면 수정한 부분이 반영이 되어 있습니다.

지금은 수정사항이 없으니 커밋하고 푸시를 했지만, 여러번 반복하다보면 커밋 -> 풀 -> 푸시 순서로 해야합니다.

변경점 보기

수정된 파일을 클릭하면 수정된 부분을 볼 수 있습니다.

1번을 클릭하면 우측에 새로 파일이 나타나고, 2, 3번처럼 변경된 부분이 보입니다.

Visual Studio Code(비주얼 스튜디오 코드) 단축키

demun — Mon, 8 Jan 2018 12:45:35 +0900

비주얼 스튜디오 코드의 튜토리얼은 https://demun.github.io/vscode-tutorial/shortcuts 통해 배포됩니다.

파일 > 기본 설정 > 바로가기 키 에서 현재 활성화된 키보드 단축키를 볼 수 있습니다 .

기본 편집

키	명령	명령 ID
ctrl+X	행 삭제 (빈 선택)	editor.action.clipboardCutAction
ctrl+C	행 복사 (빈 선택)	editor.action.clipboardCopyAction
ctrl+shift+k	행 삭제	editor.action.deleteLines
ctrl+Enter	아래에 행 삽입	editor.action.insertLineAfter
ctrl+shift+Enter	위에 행 삽입	editor.action.insertLineBefore
alt+Down	행을 아래로 이동	editor.action.moveLinesDownAction
alt+Up	행을 위로 이동	editor.action.moveLinesUpAction
shift+alt+Down	위에 행 복사 추가	editor.action.copyLinesDownAction
shift+alt+Up	아래에 행 복사 추가	editor.action.copyLinesUpAction
ctrl+d	다음 선택 찾기	editor.action.addSelectionToNextFindMatch
ctrl+k ctrl+d	마지막 선택 항목을 다음 찾기 항목으로 이동	editor.action.moveSelectionToNextFindMatch
ctrl+u	마지막 커서 작업 실행 취소	cursorUndo
shift+alt+i	선택한 각 줄 끝의 커서 삽입	editor.action.insertCursorAtEndOfEachLineSelected
ctrl+shift+l	현재 선택 항목을 모두 선택	editor.action.selectHighlights
ctrl+F2	현재 단어의 모든 항목 선택	editor.action.changeAll
ctrl+i	현재 행 선택	expandLineSelection
ctrl+alt+Down	커서를 아래에 추가	editor.action.insertCursorBelow
ctrl+alt+Up	커서를 위에 추가	editor.action.insertCursorAbove
ctrl+shift+\	일치하는 대괄호로 건너 뛰기	editor.action.jumpToBracket
ctrl +]	라인 들여쓰기	editor.action.indentLines
ctrl+[	라인 내어쓰기	editor.action.outdentLines
Home	행의 시작으로 이동	cursorHome
End	행의 끝으로 이동	cursorEnd
ctrl+End	파일 끝으로 이동	cursorBottom
ctrl+Home	파일 시작으로 이동	cursorTop
ctrl+Down	스크롤 다운	scrollLineDown
ctrl+Up	스크롤 업	scrollLineUp
alt+PageDown	아래로 페이지 스크롤	scrollPageDown
alt+PageUp	페이지 위로 스크롤	scrollPageUp
ctrl+shift+[	영역 접기	editor.fold
ctrl+shift+]	영역 펼치기	editor.unfold
ctrl+K ctrl+[	모든 하위 영역 접기	editor.foldRecursively
ctrl+K ctrl+]	모든 상위 영역 펼치기	editor.unfoldRecursively
ctrl+K ctrl+0	모든 영역 접기	editor.foldAll
ctrl+K ctrl+j	모든 영역 펼치기	editor.unfoldAll
ctrl+K ctrl+c	행 주석 추가	editor.action.addCommentLine
ctrl+K ctrl+u	행 주석 제거	editor.action.removeCommentLine
ctrl+/	주석 토글	editor.action.commentLine
shift+alt+a	커서위치에 주석 토글	editor.action.blockComment
ctrl+f	찾기	actions.find
ctrl+h	바꾸기	editor.action.startFindReplaceAction
F3	다음 찾기	editor.action.nextMatchFindAction
shift+F3	이전 찾기	editor.action.previousMatchFindAction
alt+Enter	모든 일치 항목을 선택	editor.action.selectAllMatches
alt+c	대소 문자 찾기를 토글	toggleFindCaseSensitive
alt+r	정규식 찾기 전환	toggleFindRegex
alt+w	전체 단어 찾기 토글	toggleFindWholeWord
ctrl+m	포커스 설정을 위해 Tab 키 사용 토글	editor.action.toggleTabFocusMode
할당되지 않음	렌더링 공백을 토글합니다.	toggleRenderWhitespace
alt+z	단어 감싸기 토글	editor.action.toggleWordWrap

언어 편집

키	명령	명령 ID
ctrl+스페이스바	트리거 제안	editor.action.triggerSuggest
ctrl+shift+스페이스바	트리거 매개 변수 힌트	editor.action.triggerParameterHints
shift+alt+f	문서 서식 지정	editor.action.formatDocument
ctrl+k ctrl+f	형식 선택	editor.action.formatSelection
F12	정의로 이동	editor.action.goToDeclaration
ctrl+k ctrl+i	호버 표시	editor.action.showHover
alt+F12	키워드 정의	editor.action.previewDeclaration
ctrl+k F12	키워드 정의 우측에 열기	editor.action.openDeclarationToTheSide
ctrl+.	빠른 수정	editor.action.quickFix
shift+F12	참조 표시	editor.action.referenceSearch.trigger
F2	심볼 이름 바꾸기	editor.action.rename
ctrl+shift+.	다음 값으로 바꾸기	editor.action.inPlaceReplace.down
ctrl+shift+,	이전 값으로 바꾸기	editor.action.inPlaceReplace.up
shift+alt+오른쪽	선택 확장	editor.action.smartSelect.grow
shift+alt+왼쪽	선택 축소	editor.action.smartSelect.shrink
ctrl+k ctrl+x	공백 제거	editor.action.trimTrailingWhitespace
ctrl+km	언어 모드 변경	workbench.action.editor.changeLanguageMode

네비게이션

키	명령	명령 ID
ctrl+t	모든 기호 표시	workbench.action.showAllSymbols
ctrl+g	행으로 이동	workbench.action.gotoLine
ctrl+p	빠른 열기, 파일로 이동	workbench.action.quickOpen
ctrl+shift+o	기호로 이동	workbench.action.gotoSymbol
ctrl+shift+m	오류 보기	workbench.actions.view.problems
F8	다음 오류 또는 경고로 이동	editor.action.marker.next
shift+F8	이전 오류 또는 경고로 이동	editor.action.marker.prev
ctrl+shift+p	모든 명령 표시	workbench.action.showCommands
ctrl+shift+Tab	편집기 기록 탐색	workbench.action.openPreviousRecentlyUsedEditorInGroup
alt+왼쪽	뒤로 이동	workbench.action.navigateBack
alt+오른쪽	앞으로 이동	workbench.action.navigateForward

에디터/윈도우 관리

키	명령	명령 ID
ctrl+shift+n	새창 열기	workbench.action.newWindow
ctrl+w	창 닫기	workbench.action.closeWindow
ctrl+F4	편집기 닫기	workbench.action.closeActiveEditor
ctrl+kf	폴더 닫기	workbench.action.closeFolder
할당되지 않음	편집기 그룹 사이주기	workbench.action.navigateEditorGroups
ctrl+\	편집기 나누기	workbench.action.splitEditor
ctrl+1	첫번째 편집기 그룹에 초점 맞추기	workbench.action.focusFirstEditorGroup
ctrl+2	두번째 편집기 그룹에 초점 맞추기	workbench.action.focusSecondEditorGroup
ctrl+3	세번째 편집기 그룹에 초점 맞추기	workbench.action.focusThirdEditorGroup
ctrl+k ctrl+왼쪽	왼쪽 편집기 그룹에 초점 맞추기	workbench.action.focusPreviousGroup
ctrl+k ctrl+오른쪽	오른쪽 편집기 그룹에 초점 맞추기	workbench.action.focusNextGroup
ctrl+shift+PageUp	왼쪽으로 편집기 이동	workbench.action.moveEditorLeftInGroup
ctrl+shift+PageDown	오른쪽으로 편집기 이동	workbench.action.moveEditorRightInGroup
ctrl+k 왼쪽	활성 편집기 그룹을 왼쪽으로 이동	workbench.action.moveActiveEditorGroupLeft
ctrl+k 오른쪽	활성 편집기 그룹을 오른쪽으로 이동	workbench.action.moveActiveEditorGroupRight
ctrl+alt+오른쪽	편집기를 다음 그룹으로 이동	workbench.action.moveEditorToNextGroup
ctrl+alt+왼쪽	편집기를 이전 그룹으로 이동	workbench.action.moveEditorToPreviousGroup

파일 관리

키	명령	명령 ID
ctrl+n	새탭 열기	workbench.action.files.newUntitledFile
ctrl+o	파일 열기	workbench.action.files.openFile
ctrl+s	저장	workbench.action.files.save
ctrl+ks	모두 저장	workbench.action.files.saveAll
ctrl+shift+s	다른 이름으로 저장	workbench.action.files.saveAs
ctrl+F4	닫기	workbench.action.closeActiveEditor
할당되지 않음	기타 닫기	workbench.action.closeOtherEditors
ctrl+kw	그룹 닫기	workbench.action.closeEditorsInGroup
할당되지 않음	다른 그룹 닫기	workbench.action.closeEditorsInOtherGroups
할당되지 않음	왼쪽에서 왼쪽 그룹 닫기	workbench.action.closeEditorsToTheLeft
할당되지 않음	그룹을 오른쪽으로 닫기	workbench.action.closeEditorsToTheRight
ctrl+k ctrl+w	모두 닫기	workbench.action.closeAllEditors
ctrl+shift+t	닫힌 편집기 다시 열기	workbench.action.reopenClosedEditor
ctrl+k Enter	계속 열기	workbench.action.keepEditor
ctrl+Tab	다음 열기	workbench.action.openNextRecentlyUsedEditorInGroup
ctrl+shift+Tab	이전 열기	workbench.action.openPreviousRecentlyUsedEditorInGroup
ctrl+kp	활성 파일의 경로 복사	workbench.action.files.copyPathOfActiveFile
ctrl+kr	현재 파일 탐색기로 열기	workbench.action.files.revealActiveFileInWindows
ctrl+ko	현재 파일 새 창에 열기	workbench.action.files.showOpenedFileInNewWindow
할당되지 않음	열린 파일 비교	workbench.files.action.compareFileWith

디스플레이

키	명령	명령 ID
F11	전체 화면 토글	workbench.action.toggleFullScreen
ctrl+kz	젠 모드 토글	workbench.action.toggleZenMode
Escape Escape	젠 모드에서 나가기	workbench.action.exitZenMode
ctrl+=	확대	workbench.action.zoomIn
ctrl+-	축소	workbench.action.zoomOut
ctrl+Numpad 0	재설정 확대	workbench.action.zoomReset
ctrl+b	사이드바 토글	workbench.action.toggleSidebarVisibility
ctrl+shift+e	탐색기 표시 / 포커스 전환	workbench.view.explorer
ctrl+shift+f	검색보기	workbench.view.search
ctrl+shift+g	소스 제어 표시	workbench.view.scm
ctrl+shift+d	디버그 표시	workbench.view.debug
ctrl+shift+x	확장 표시	workbench.view.extensions
ctrl+shift+u	출력 보기	workbench.action.output.toggleOutput
ctrl+q	명령창에서 빠른 열기	workbench.action.quickOpenView
ctrl+shift+c	새 프롬프트 열기	workbench.action.terminal.openNativeConsole
ctrl+shift+v	마크다운 미리보기 토글	markdown.showPreview
ctrl+kv	마크다운 측면에 미리보기	markdown.showPreviewToSide
ctrl+`	통합 터미널 토글	workbench.action.terminal.toggleTerminal

검색

키	명령	명령 ID
ctrl+shift+f	검색보기	workbench.view.search
ctrl+shift+h	파일에서 바꾸기	workbench.action.replaceInFiles
alt+c	대 / 소문자 전환	toggleSearchCaseSensitive
alt+w	전체 단어 맞추기 토글	toggleSearchWholeWord
alt+r	정규 표현식 사용 토글	toggleSearchRegex
ctrl+shift+j	검색 세부 사항 전환	workbench.action.search.toggleQueryDetails
F4	검색 바꾸기 열기	search.action.focusNextSearchResult
shift+F4	이전 검색 바꾸기 검색 결과	search.action.focusPreviousSearchResult
alt+Down	다음 검색 용어 표시	search.history.showNext
alt+Up	이전 검색 용어 표시	search.history.showPrevious

환경 설정

키	명령	명령 ID
ctrl+,	사용자 설정 열기	workbench.action.openGlobalSettings
할당되지 않음	작업 공간 설정 열기	workbench.action.openWorkspaceSettings
ctrl+k ctrl+s	키보드 단축키 열기	workbench.action.openGlobalKeybindings
할당되지 않음	사용자 스니펫 열기	workbench.action.openSnippets
ctrl+k ctrl+t	색상 테마 선택	workbench.action.selectTheme
할당되지 않음	디스플레이 언어 구성	workbench.action.configureLocale

디버그

키	명령	명령 ID
F9	중단점 토글	editor.debug.action.toggleBreakpoint
F5	디버그 시작	workbench.action.debug.start
F5	디버그 확인	workbench.action.debug.continue
ctrl+F5	시작(디버깅하지 않음)	workbench.action.debug.run
F6	중지	workbench.action.debug.pause
F11	들어가기	workbench.action.debug.stepInto
shift+F11	스텝 아웃	workbench.action.debug.stepOut
F10	스텝 오버	workbench.action.debug.stepOver
shift+F5	중지	workbench.action.debug.stop
ctrl+k ctrl+i	호버 표시	editor.debug.action.showDebugHover

작업주자 목록

키	명령	명령 ID
ctrl+shift+b	빌드 작업 실행	workbench.action.tasks.build
할당되지 않음	테스트 작업 실행	workbench.action.tasks.test

확장 프로그램

키	명령	명령 ID
할당되지 않음	확장 프로그램 설치	workbench.extensions.action.installExtension
할당되지 않음	설치된 확장 프로그램 표시	workbench.extensions.action.showInstalledExtensions
할당되지 않음	오래된 확장명 표시	workbench.extensions.action.listOutdatedExtensions
할당되지 않음	추천 확장 프로그램보기	workbench.extensions.action.showRecommendedExtensions
할당되지 않음	인기 확장 프로그램 표시	workbench.extensions.action.showPopularExtensions
할당되지 않음	모든 확장 기능 업데이트	workbenc

티스토리 블로그에서 페이스북으로 자동 글전송하기

demun — Fri, 5 Jan 2018 07:00:00 +0900

티스토리에 글을 포스팅하면 페이스북으로 자동으로 전송하는 플러그인이 있습니다.

관리자화면 - 플러그인으로 갑니다.

페이스북 글 보내기 플러그인을 선택합니다.

아래 계정 연결하기를 통해 페이스북과 연결을 합니다.

저의 경우 연결을 했기때문에 아래처럼 나오지만 연결을 안한경우는 연결하면 됩니다.

그리고 적용하면 됩니다.

이제 티스토리 블로그에서 글을 쓰면 자동으로 페이스북에 전송이 됩니다.

주의할 점

티스토리에서 한번 저장하면 자동으로 페이스북에 전송이 되기 때문에 제목등이 잘못된채로 저장을 하면 잘못된 제목으로 전송이 됩니다.

이럴때는 티스토리에서 제목을 수정하여도 페이스북에는 그대로 있습니다.

이때는 티스토리에서 수정한후, 페이스북에 가서 수정을 해줘야 합니다.

페이스북에 가서 게시물의 우측에 더보기 버튼을 클릭해서 게시물수정을 통해 수정을 하면 됩니다.

Visual Studio Code(비주얼 스튜디오 코드) 사용법

demun — Thu, 4 Jan 2018 08:45:12 +0900

비주얼 스튜디오 코드의 튜토리얼은 https://demun.github.io/vscode-tutorial/ 통해 배포됩니다.

시작

비주얼 스튜디오 코드는 가볍고, 맥,리눅스,윈도우에서 모두 실행 가능하고, 무료인 코드편집기입니다. Sublimetext, Atom 에디터의 장점들을 잘 모아 만든 에디터입니다. 특히 서브라임텍스트의 한글입력 문제,인코딩 문제를 깔끔히 해결한 에디터입니다.

다양한 언어를 지원하며, 확장 프로그램을 통해 에디터 기능을 확장시킬수 있습니다.

설치

맥, 리눅스 를 통해 설치를 할 수 있으며, 윈도우는 인스트롤러를 통해 다운로드해서 설치를 진행할 수 있습니다.

윈도우는 .NET Framework 4.5.2 이상이 필요합니다.

설치 프로그램에서 vscode를 %PATH% 에 추가하므로 콘솔에서 'kbd'를 입력해서 해당 폴더에서 vscode를 열 수 있습니다. %PATH% 환경 변수를 변경하려면 콘솔을 다시 시작해야 합니다.

vscode 는 설치시 자동으로 설치되는 확장기능이 있습니다. 그런 확장기능을 이용하려면 따로 설치해야하는 요소들이 있습니다. git을 사용하려면 git-scm 을 설치해야하고, 자바스크립트 등의 확장기능을 이용하려면 nodejs 를 설치해야하며, TypeScript 등을 설치해야합니다.

추가적으로 이용할 도구에 따라 Yeoman, Gulp, Bower 등등을 설치할수도 있습니다.

기초

vscode 를 실행하면 첫화면에 시작하기 하면이 나옵니다.

시작할때 마다 보일수도 있고, 왼쪽 하단에 체크를 풀면 안나오게 할 수도 있습니다.

우측 하단에 알아보기 > 대화형 실습에서 직접 코드를 실행하고 결과를 볼수 있는 놀이터도 있습니다.

명령팔레트

에디터의 모든 명령에 바로 접근할 수 있는 명령팔레트입니다.

단축키: ctrl+shift+p

또한 우측에 보면 기본단축키로 명령을 실행할 수도 있습니다.

단축키에 대한 모든 명령은 맥, 리눅스, 윈도우 에 있습니다.

ctrl+p : 파일이나 기호를 탐색합니다.
ctrl+shift+tab : 마지막 연 파일에 접근합니다.
ctrl+shift+p : 편집기 명령으로 바로 이동합니다.
ctrl+shift+o : 파일의 특정 기호로 이동합니다.
ctrl+g : 파일의 특정 행으로 이동합니다.

ctrl+p 를 눌러 ? 를 입력하면 명령창에서 행할수 있는 명령 목록이 나옵니다.

빠른열기

모든 파일을 단축키로 빠르게 열수 있습니다.

단축키: ctrl+p

상태표시줄

에디터 하단에 현재 상태를 표시하고 있습니다.

단축키: ctrl+shift+m

신속하게 프로젝트의 오류 및 경로로 이동합니다.

F8 또는 shift+F8 을 이용해서 오류 사이를 이동할 수 있습니다. 또는 키보드의 위아래 화살표로 이동이 가능합니다.

언어모드

파일형식에 맞는 언어모드로 자동으로 인식하지만 못할때는 단축키로 지정할 수 있습니다.

단축키: ctrl+km

ctrl+km 은 ctrl+k 을 누르고 다음으로 m 을 누르면 됩니다.

테마변경

기본적으로 제공하는 테마를 단축키로 빠르게 선택할 수 있습니다.

단축키: ctrl+k, ctrl+t

또한 파일>기본설정>색 테마 로 선택할 수도 있습니다.

파일아이콘테마

기본적으로 파일의 아이콘을 표시하지만 확장기능을 통해 직관적으로 파일의 아이콘을 보여줍니다.

파일>기본설정>파일 아이콘 테마 를 통해서 적용할 수 있습니다.

Material Icon Theme 를 설치한 후 적용한 아이콘테마의 모습입니다.

단축키

기본 단축키는 ctrl+k, ctrl+s 를 통해 열람할 수 있습니다.

단추키를 사용자정의 할때는 keybindings.json 파일을 통해 지정할 수 있습니다.

기본설정

vscode 의 모든 설정은 파일>기본설정>설정에 지정되어 있습니다.

단축키: ctrl+,

왼쪽의 기본설정을 복사해서 오른쪽의 사용자설정에 붙여넣고 수정해서 사용합니다.
또는 왼쪽의 기본설정에 연필 아이콘을 클릭하면 편집을 통해 수정하면 오른쪽에 자동 입력되어 집니다.

확장프로그램

에디터의 기본 기능보다 더 많은 기능을 마켓 플레이스에서 다운로드해서 사용할 수 있습니다.

단축키: ctrl+shift+x

vscode 는 확장프로그램을 좀더 효율적으로 관리하기 위해 설치된 확장만 표시, 모든 확장 표시, 사용할 수 없는 확장 표시 등등...다양한 메뉴를 제공하고 있습니다.

터미널

vscode 는 하단에 터미널을 통해 명령을 실행할 수도 있습니다. 보기>통합터미널 로 열 수 있습니다.

단축키: ctrl+`

사이드바 전환

에디터의 사이드바를 열고 닫습니다.

단축키: ctrl+b

젠모드

단축키: ctrl+k, z

나란히편집

에디터를 둘 또는 셋으로 나란이 놓고 사용할 수 있습니다.

단축키: ctrl+\

에디터간 전환은 ctrl+1, ctrl+2, ctrl+3 등으로 할 수 있으며, ctrl+w 누르면 탭이 닫힙니다.

다중커서

커서를 여러개 만들어서 한번에 작업을 할 수 있습니다.

단축키: ctrl+alt+up , ctrl+alt+down

행 복사

단축키: shift+alt+up , shift+alt+down

코드접기/펴기

단축키: ctrl+shfit+[ , ctrl+shfit+]

마크다운 미리보기

단축키: ctrl+shfit+v

또한 옆에서 미리보기를 하면서 수정까지 실시간으로 반영되게 할 수도 있습니다.

단축키: ctrl+kv

emmet

vscode 에서는 기본적으로 emmet 확장기능을 지원합니다.

젠코딩을 하면 툴팁으로 어떻게 보여지는 미리보기를 통해 보여져서 코딩하기 정말 좋습니다.

emmet 은 기본적으로 활성화되어 있어 바로 사용가능하지만 혹시 활성화가 안된다면 설정에 아래구문을 확인하면 됩니다.

"emmet.triggerExpansionOnTab": true

밴드 디어클라우드 나인이 샤이니 종현의 유서를 공개

demun — Tue, 19 Dec 2017 09:09:13 +0900

어제밤 갑자기 비보가 전해졌습니다. 뜻하지도 않던 샤이니 종현의 사망소식이였습니다. 안타까운 소식입니다.

다시한번 생각이 납니다만 연예인이라고, 인기가 있다고 다 좋은것만은 아닌것 같습니다.

샤이니는 연예인이 된것이 후회스럽다고 하네요.

아래는 유서의 내용입니다.

난 속에서부터 고장났다.
천천히 날 갉아먹던 우울은 결국 날 집어삼켰고
난 그걸 이길 수 없었다.
나는 날 미워했다. 끊기는 기억을 붙들고 아무리 정신차리라고 소리쳐봐도 답은 없었다.
막히는 숨을 틔어줄 수 없다면 차라리 멈추는게 나아.
날 책임질 수 있는건 누구인지 물었다.
너뿐이야.
난 오롯이 혼자였다.
끝낸다는 말은 쉽다.
끝내기는 어렵다.
그 어려움에 여지껏 살았다.
도망치고 싶은거라 했다.
맞아. 난 도망치고 싶었어.
나에게서.
너에게서.
거기 누구냐고 물었다. 나라고 했다. 또 나라고 했다. 그리고 또 나라고했다.
왜 자꾸만 기억을 잃냐 했다. 성격 탓이란다. 그렇군요. 결국엔 다 내탓이군요.
눈치채주길 바랬지만 아무도 몰랐다. 날 만난적 없으니 내가 있는지도 모르는게 당연해.
왜 사느냐 물었다. 그냥. 그냥. 다들 그냥 산단다.
왜 죽으냐 물으면 지쳤다 하겠다.
시달리고 고민했다. 지겨운 통증들을 환희로 바꾸는 법은 배운 적도 없었다.
통증은 통증일 뿐이다.
그러지 말라고 날 다그쳤다.
왜요? 난 왜 내 마음대로 끝도 못맺게 해요?
왜 아픈지를 찾으라 했다.
너무 잘 알고있다. 난 나 때문에 아프다. 전부 다 내 탓이고 내가 못나서야.
선생님 이말이 듣고싶었나요?
아뇨. 난 잘못한게 없어요.
조근한 목소리로 내성격을 탓할때 의사 참 쉽다 생각했다.
왜 이렇게까지 아픈지 신기한 노릇이다. 나보다 힘든 사람들도 잘만 살던데. 나보다 약한 사람들도 잘만 살던데. 아닌가보다. 살아있는 사람 중에 나보다 힘든 사람은 없고 나보다 약한 사람은 없다.
그래도 살으라고 했다.
왜 그래야하는지 수백번 물어봐도 날위해서는 아니다. 널위해서다.
날 위하고 싶었다.
제발 모르는 소리 좀 하지 말아요.
왜 힘든지를 찾으라니. 몇번이나 얘기해 줬잖아. 왜 내가 힘든지. 그걸로는 이만큼 힘들면 안돼는거야? 더 구체적인 드라마가 있어야 하는거야? 좀 더 사연이 있었으면 하는 거야?
이미 이야기했잖아. 혹시 흘려들은 거 아니야? 이겨낼 수있는건 흉터로 남지 않아.
세상과 부딪히는 건 내 몫이 아니었나봐.
세상에 알려지는 건 내 삶이 아니었나봐.
다 그래서 힘든 거더라. 부딪혀서, 알려져서 힘들더라. 왜 그걸 택했을까. 웃긴 일이다.
지금껏 버티고 있었던게 용하지.
무슨 말을 더해. 그냥 수고했다고 해줘.
이만하면 잘했다고. 고생했다고 해줘.
웃지는 못하더라도 탓하며 보내진 말아줘.
수고했어.
정말 고생했어.
안녕.

보라카이는 태풍으로 서울은 눈으로

demun — Mon, 18 Dec 2017 09:58:40 +0900

보라카이는 태풍으로 한국에는 눈으로 ...

현재도 서울에는 눈이 엄청내리고 있습니다.

제26호 태풍 '카이탁'이 강타한 필리핀에서 산사태와 홍수로 30명 넘게 숨지는 등 인명피해가 커지고 있습니다.

필리핀 중부의 유명 관광지 보라카이 섬에는 한국인 관광객 수백 명이 태풍으로 배편이 끊겨 사흘째 발이 묶여있습니다.

주필리핀 한국대사관의 세부분관 관계자는 18일 "보라카이 섬에는 한국인 관광객 400여 명이 있는 것으로 파악됐다"며 "지난 16일부터 선박 운항이 중단돼 섬을 빠져나오지 못했다"고 밝혔습니다.

지금 18일 서울에 올겨울 들어 처음으로 대설주의보가 내려졌습니다.

기상청은 이날 오전 9시를 기해 서울과 경기 성남·양평·광주·하남·남양주·구리·과천 지역에 대설주의보를 발효했습니다.

대설주의보는 24시간 내 적설량 5㎝ 이상일 때, 대설경보는 24시간 내 적설량 20㎝ 이상일 때 내려집니다.

이찬오 요리사 마약혐의로 구속

demun — Fri, 15 Dec 2017 22:38:56 +0900

요리에 대한 이슈 때문에 요리사들이 한참 핫한 직업이 됐습니다

냉장고를 부탁해등 요리 프로그램등도 유명해지고 요리사들도 유명세를 떨치고 있습니다.

그런데 이찬오 요사기가 마약 혐의로 구속되었습니다.

아무래도 타격이 있을것 같습니다.

덩달아 요리사들도 타격을 받는건 아닌지

문재인 대통령 방중에 일어난 기자폭행사건

demun — Fri, 15 Dec 2017 13:19:01 +0900

현재 시점이 예민한 상태입니다. 북한의 핵문제에 중국과의 사드문제 등등....

문재인대통령이 중국을 방문해서 일을 보고 있는데 이런 폭행사건이 일어날줄이야....

중국 경호원이 한국 기자들이 폭행을 당하는 사건이 일어났습니다.

대통령이 귀빈자격으로 방문중일때 이런 사건이 일어난것은 매우 이례적이라고 합니다.

강경화 외교부장관이 입장표명을 했고, 중국도 현재 진상조사를 진행중이다.

이유야 어떻든 폭행사건이 일어난점은 참 안타까운일이다.

문 대통령이 참석한 한중 무역 파트너십 개막식에서 한국일보와 매일경제 소속 청와대 출입 사진기자 2명이 별다른 이유 없이 문 대통령 취재를 막는 중국 측 경호원들에 항의하다가 집단 폭행을 당했다.

외국 언론도 이런 사항에 대해서 예의주시하고 있다고 한다.

어찌됐던간에 진상이 명확하게 발혀져야하고, 문제가 있다면 책임을 져야합니다.

디즈니가 21세기 폭스사 인수

demun — Fri, 15 Dec 2017 09:17:51 +0900

인터넷 뉴스를 보면서 관심이 끌리는 기사를 종종 보곤합니다.

디즈니는 유명하죠. 아무래도 에니메이션을 만드는 회사라고는 다 아실겁니다. 근데 어마어마하죠.

21세기폭스사를 인수한다고 합니다. 57조라는 금액으로....부채까지하면 71조가 넘는 어마어마한 금액....

21세기폭스사도 유명합니다. 잘 알고 있는 마블영화...또 엑스맨, 아바타2까지 만든다고 하는데....그런 회사를 인수한거죠.

그것도 그것이지만 디즈니의 위력은 참 대단합니다.

스타워즈, 어벤져스, 엑스맨, 겨울왕국, 니모를 찾아서......정말 셀수도 없는 유명작이 있는 회사........이제 하나로 됩니다.

Visual Studio Code(비주얼 스튜디오 코드) 라이브서버 Live Server

demun — Mon, 11 Dec 2017 07:00:00 +0900

Grunt 나 Gulp 같은 작업주자를 사용하면 실시간으로 감시하고 로컬서버를 열어서 보여주곤합니다.

VSCode에서는 Live Server 플러그인을 설치하면 그런 환경설정없이 바로 로컬서버를 열어서 확인할 수 있습니다.

1. Live Server 설치

먼서 VSCode 에서 Live Server를 설치하세요.

설치했다면 재시작을 해야합니다.

2. Live Server 사용하기

테스트로 index.html 을 하나 만들었습니다. 비주얼스튜디오코드를 보면 하단 우측에 못보던 Go Live 라는것이 새로 생겼습니다.

이걸 클릭합니다.

클릭하면 기본 포트인 5500 포트로 해당 파일을 엽니다.

브라우져로 바로 해당파일이 열리고 로컬서버가 열린걸 볼 수 있습니다.

에디터에서 수정후 저장을 하면 로컬서버에서 바로 반영이 되어 보여집니다.

Live Server 에 대한 자세한 내용은 https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer 에 있습니다.

Visual Studio Code(비주얼 스튜디오 코드) 아이콘 테마 Material Icon Theme

demun — Wed, 6 Dec 2017 11:08:33 +0900

비주얼스듀디오코드는 기본적으로 지원하는 아이콘이 있습니다. 그냥 사용해도 되지만 좀더 명확한 파일아이콘을 사용하고 싶다면 플러그인을 다운로드해서 사용하면 됩니다.

vscode-icons 도 있지만 Material Icon Theme 가 더 많은 아이콘을 지원하는것 같습니다.

지원하는 아이콘을 보면 아래와 같습니다.

사용을 하려면 먼저 설치를 해야겠죠.

1. Material Icon Theme 설치

저는 벌써 설치를 해서 아래처럼 나오지만 설치를 안한분은 설치버튼을 통해서 설치를 하세요.

재시작하세요.

2. Material Icon Theme 적용

파일 -> 기본설정 -> 파일 아이콘 테마 를 클릭합니다.

그럼 Material Icon Theme 를 선택해주기만 하면 됩니다.

예제로 폴더아이콘과 파일아이콘을 보세요.

Visual Studio Code(비주얼 스튜디오 코드) 설정 동기화 플러그인 Settings Sync 사용법

demun — Wed, 6 Dec 2017 10:46:25 +0900

이전에 Sublimetext 에서 설정동기화 플러그인을 사용해서 설정을 동기화하는 방법을 다뤘습니다. -> http://demun.tistory.com/2512

Settings Sync 는 설정을 동기화해서 다른 피시에서도 동일하게 사용하게 해줍니다.

서브라임텍스트보다 더 설정은 더 간단합니다.

깃헙의 토큰만 입력하면 gist id 를 자동으로 생성해주고, gist id 만 복사해서 다른 컴퓨터에서 입력하고 사용하면 됩니다.

토큰 만들기
Settings Sync 설정하기
동기화하기

필요한것은 github.com 의 토큰입니다.

토큰이 없다면 먼저 깃헙의 토큰을 만들어줍니다. 서브라임에서 만들어줬던 토큰을 복사하셨다면 그걸 이용하셔도 됩니다. 토큰이 없다면 아래처럼 해주세요.

1.토큰 만들기

Settings -> Developer settings -> Personal access tokens 에서 Generate new token 을 눌러 토큰을 새로 생성합니다.

설명란에는 대략 적어주고, gits 에 체크를 하고 맨 하단에 Generate token 버튼을 눌러 토큰을 생성합니다.

그럼 아래처럼 토큰이 나오는데요 복사해서 다른곳에 저장해둡니다.

2. VSCode 에서 Settings Sync 사용하기

먼저 Settings Sync 플러그인을 설치합니다.

설치를 했다면 재시작을 해야합니다.

이제 Ctrl+Shift+p 를 눌러서 명령창에서 sync 라고 입력하면 아래처럼 나옵니다.

Sync: Update/Upload Settings 를 선택합니다.

이처럼 토큰을 입력하라고 하면 위에서 저장해둔 토큰을 입력하고 엔터를 누릅니다.

그럼 GIST ID 가 나옵니다. 이걸 복사해서 저장해둡니다.

이 과정을 진행하면 자동으로 https://gist.github.com 에 본인의 아이디에 만들어집니다. 사이트에 접속해서 확인해도 됩니다.

여기까지 진행되면 자동으로 현재 VSCode 의 설정이 모두 Gist 에 업로드됩니다.

콘솔창에 토큰, 아이디 등이 나오고 업로드된 플러그인 등 설정이 보입니다.

3. 동기화하기

이제 설정법을 업로드하였으니 다른 컴퓨터의 VSCode 에서 다운로드만 받으면 됩니다.

위에서 처럼 먼저 Settings Sync 를 설치를 합니다.

Ctrl+Shift+p 를 눌러 sync 를 입력하면 아래처럼 나오는 Sync: Update/Upload Settings 를 선택합니다.

그럼 아래처럼 git 의 토큰을 물어옵니다. 저장해둔 토큰을 입력하면 됩니다.

그다음 바로 창이 뜨면 위에서 저장해둔 GIST ID 를 입력합니다.

만약 이과정이 잘못되면 설정을 다시 리셋하고 위과정을 다시 하면 됩니다.

서브라임에서는 GIST ID 를 따로 만들어줘야 하는데 VSCode 에서는 자동으로 만들어줍니다. 그래서 이단계를 생략하고 진행할 수 있죠.

이제 어느쪽에서든지 설정을 업로드하면 그것이 최신이 되어 동기화되어 집니다.

글쓰기 도구 mkdocs 소개입니다.

demun — Tue, 5 Dec 2017 13:40:00 +0900

온라인상에서 글쓰기 도구라고 검색하면 많은 툴이 나옵니다.

그중에서도 sphinx 나 read the docs 같은 툴이 있습니다.

mkdocs 는 마크다운 형식으로 문서를 작성하고 github 에 올리면 Github Pages 로 호스팅되어 볼 수 있습니다.

깃 저장소는 https://github.com/demun/mkdocs-tuts 이며 mkdocs 로 제작되는 튜토리얼이 호스팅되는 주소는 https://demun.github.io/mkdocs-tuts/ 입니다.

아래는 로컬에서 작업중인 화면을 캡쳐한 것입니다.

대문블로그 소개

demun — Thu, 16 Nov 2017 12:40:39 +0900

대문블로그 소개라는 글을 만들고 시간이 지남에 따라 약간씩 손을 더 보는군요. 2013-06-07 에 다시한번 수정합니다.

방문자들에게 글쓴이의 소개는 당연하다고 생각합니다. 무엇보다 소개를 한뒤는 글에 대한 책임도 있을것이고 의무도 있기에 방문자들 또한 신뢰감을 갖습니다.

소개가 없는글, 블로그는 신뢰감을 떨어뜨리는 효과를 가져옵니다.

대문은 누구인가?

프로그래밍이나 전문적인 지식도 없고 컴퓨터 관련 직업도 가진적이 없습니다. 단지 컴퓨터를 좋아하고 블로그를 하다보니 이것 저것 알게된것이고 특이 포터블에 관심을 갖고 현재는 서버를 운영하면서 포터블 전문 커뮤니티를 운영하고 있습니다.
이전에는 포터블이란 프로그램에 매진했으나 현재는 퍼블리싱을 하고 있으며 접근성 프로젝트 및 퍼블리셔로 일하고 있습니다..

대문은 무슨 뜻인가?

사람이든 또는 다른 어느 매체든 통로가 있고 그 통로로 인해 방문하거나 이동하게 됩니다.
대문은 index 파일과 비슷한 뜻입니다. 즉 문이라는 이야기죠.
집에 들어갈때 대문을 열고 들어가는 그 대문입니다.

블로그를 방문하든, 또는 다른곳에 가든 꼭 먼저 열어야하는 문이 있지요. 인터넷에서는 링크로 알려졌지만 오프라인에서는 어디든 가려면 문을 열고 들어가야 합니다.

어디를 통하든 허브역할을 하는 곳이 되고 싶어서 대문이라고 이름을 짓게 된것입니다.

연락처는?

현재는 다시 demun.tistory.com 으로 컴백한 상태입니다. 이전에는 포터블을 좀더 키워볼려고 portablea.com 이라는 도메인을 구입해서 그 도메인을 사용했고 demun.kr 도 사용했지만 현재는 티스토리 블로그가 메인입니다.

블로그 : http://demun.tistory.com
메일 : hjm01@naver.com
네이트 메신져 : wu0309@nate.com (잘 사용안함)
RSS피드 http://feeds.feedburner.com/Demun
트위터 : http://twitter.com/portablea ==> 변경 ==> http://twitter.com/demunblog
페이스북 : https://www.facebook.com/demunblog

뭘 하는가?

Portable app 제작 및 배포
Xpress Enging 스킨 제작 및 배포
티스토리 블로그 스킨 제작 및 배포
워드프레스 스킨 제작
웹접근성 프로젝트 및 퍼블리싱

[플러그인] sublimetext(서브라임텍스트) Sync Settings 설정동기화 하기

demun — Tue, 14 Nov 2017 13:59:00 +0900

Sync Settings 플러그인은 설정을 동기화하는 플러그인입니다.

이전에 작성했던 방법도 있습니다. Sublimetext(서브라임텍스트) 동기화(syncing) -> http://demun.tistory.com/2505

Sync Settings 플러그인은 git 과 gits 를 사용해서 서브라임텍스트의 설정을 동기화하는 방법입니다. 동기화하는 과정에서 설지안한 플러그인까지 모두 설치하고 동기화를 합니다.

처음 한번 설정하기가 번거롭지만 한번 설정하기만 하면 무척 편리합니다. 어디에서는 최신의 설정법을 동기화 할 수 있습니다.

github.com 에 가입이 되어 있어야 합니다. 가입이 안된분은 가입을 먼저 해주세요.

가입했다고 가정하에 진행합니다.

Sync Settings 의 자세한 내용은 이 곳에 있습니다. -> https://packagecontrol.io/packages/Sync%20Settings

사용순서는 아래와 같습니다.

github 에 token 생성
서브라임텍스트에서 Sync Settings 플러그인 설치
gits 에 설정법 업로드
다른 서브라임텍스트에서 설정법 내려받기(동기화)

1. github 에 token 생성

먼저 github 사이트에 로그인해서 설정으로 들어갑니다. github -> https://github.com/

아래처럼 Settings / Developer settings / Personal access tokens 에서 Generate new token 을 클릭해서 토큰을 생성합니다.

Token description 에는 알아볼수있도록 토큰의 설명을 적습니다. 중요한것은 gist 에 체크를 하는것입니다.

생성을 하면 아래처럼 새로 생성된 토큰이 보이는데요. 여기서 이것을 복사해서 잘 적어둡니다.

왜냐면 나중에 붙여넣기해서 사용해야하는데 한번 지나가면 다시 알수 없습니다.

2.서브라임텍스트에서 Sync Settings 플러그인 설치

이제 서브라임텍스트에서 Sync Settings 플러그인을 설치합니다.

잘 아시겠지만 Ctrl + Shift + p 를 눌러 커맨드창을 엽니다.

ip 만 입력하면 Package Control: Install Package 가 나오면 엔터를 칩니다.

곧바로 이어서 sync 만 입력하면 Sync Settings 가 선택되어지고 엔터를 클릭해서 플러그인을 설치합니다.

3. gits 에 설정법 업로드

gist 사이트에 새로 설정 구문을 생성합니다. gist -> https://gist.github.com/

대략 아래처럼 적고 아래에 있는 Create secret gist 를 클릭합니다.

그럼 아래처럼 만들어진것을 알 수 있습니다. 여기서 주소를 보시면 https:git.github.com/아이디/gist주소 가 나오는데 gist 주소를 복사해둡니다.

그럼 서브라임텍스트로 돌아와서 Preferences - Package Settings - Sync Settings - Settings - User 를 클릭해서 설정창을 엽니다.

여기서 access_token 은 github.com 에서 만든 토큰을, gist_id 에는 gist 에서 만든 gist주소를 넣습니다.

그 아래 excluded_files 는 제외할 파일 목록인데 지정해도, 안해도 됩니다.

그럼 이제 설정법이 끝났습니다.

이제 지금 사용하고 있는 설정을 gist 에 업로드 합니다.

Ctrl + Shift + p 를 눌러 sync up 이라고 입력하면 Sync Settings: Upload 라고 나오고 클릭합니다.

그럼 아래처럼 설정법 업로드가 성공됐다고 나옵니다.

gist 사이트에 가보면 업로드한 설정법이 보입니다.

4. 다른 서브라임텍스트에서 설정법 내려받기(동기화)

업로드까지 완성했으니 다른 곳에서 설정법을 내려받기(동기화) 해보겠습니다.

Ctrl + Shift + p 를 눌러 sync do 하면 Sync Settings: Download 가 선택되고 엔터를 누릅니다.

그럼 설정법 다운로드가 완성됐다고 나옵니다.

이렇듯 한번만 업로드를 진행하면 gist 에 있는것이 최신 설정법이 되고, 다시 수정하거나 새로운 플로그인을 설치해서 업로드하면 gist 에 있는것이 최신것이 되고 다시 다운로드 받아서 사용하면 됩니다.

이제까지 서브라임텍스트 동기화 플러그인중에서 가장 사용법이 간단합니다. 설정법이 한번은 적지않은 손이 들어가지만 Upload, Download 만 하면 되니 무척 간단합니다.

[플러그인] sublimetext(서브라임텍스트) 플러그인 OmniMarkupPreviewer 에서 미리보기가 안될때 처리방법

demun — Fri, 20 Oct 2017 16:42:15 +0900

OmniMarkupPreviewer 플러그인은 markdown 이나 다양한 파일을 미리보기해주는 플러그인입니다.

그런데 어떤 상황에서는 아래처럼 미리보기를 할 수 없습니다.

하지만 아래처럼 사용자 설정을 변경해면 해결됩니다.

`Preferences -> Package Settings -> OmniMarkupPreviewr -> Settings` 에서 포트와 설정을 아래처럼 변경한다


{
    "server_host": "0.0.0.0",
    "server_port": 9998,

    "renderer_options-MarkdownRenderer": {
     "extensions": ["tables", "fenced_code", "codehilite"]
    }
}

Ctrl+Shift+o 를 누르면 브라우져로 미리보기를 할 수 있습니다.

grunt

demun — Fri, 20 Jan 2017 13:42:16 +0900

Grunt 자동빌드도구인 그런트 키워드에 대한 글입니다.

그런트(Grunt) 출간 이벤트[마감]

demun — Fri, 9 Sep 2016 13:11:55 +0900

댓글 달아주신 분께 모두 메일 드렸습니다. 이번 이벤트는 마감합니다.

프론트엔드 자동화시스템 그런트라는 책을 출간하게 되었습니다.

블로그 이웃들에게도 책을 공유하고자 이렇게 포스팅을 합니다.

현재의 글을 자신의 블로그에 복사 붙여넣기해서 공유하거나, 책출판 내용을 포스팅하면 5분을 추첨해서 책을 발송해드립니다.

프론트엔드 자동화 시스템 그런트

Grunt, Yeoman, Bower,코드를 한단계 업그레이드 시킬 수 있는 가이드 -> http://book.naver.com/bookdb/book_detail.nhn?bid=11021303

책소개

『프론트엔드 자동화 시스템 그런트』는 어느 정도 HTML, CSS, JAVASCRIPT 등을 알고 있는 대상자를 위한 책이다.

1장은 서브라임텍스트라는 에디터의 사용법을 다룬다.

2장은 버전 관리를 할 수 있는 GITHUB 에 대해서 간단하게 설명한다.

3장은 플러그인 패키지 관리자인 BOWER에 대한 소개이다.

4장은 자동화도구인 GRUNT에 대한 설명이다.

5장은 GRUNT 고급 사용자 부분이다.

6장은 BOWER, GRUNT 를 포함하고 있는 자동화 패키지 관리자인 YEOMAN 부분이다.

cmd 보다 향상된 콘솔 cmder

demun — Thu, 25 Aug 2016 07:00:56 +0900

요즘에는 콘솔 즉 명령창(cmd) 를 많이 사용합니다.

Grunt 를 많이사용하니 npm install 등의 명령어도 많이 사용하고 이래저래 명령어를 많이 사용합니다.

더군다나 git 을 사용하니 관련 명령어도 많이 사용하구요.

그래서 좀더 사용하기 좋은 콘솔창은 없을까 찾다보니 좋은게 있더군요. 바로 cmder 입니다.

cmder 홈페이지 -> http://cmder.net/

단축키와 설정까지 할수있어 사용자의 입맛에 맞게 변경할수 있습니다.

다운로드 받아서 바로 사용하면 됩니다.

명령어를 사용하기 편하려면 해당 폴더에서 명령창을 여는경우가 많습니다.

git bash 의경우 해당 폴더에서 바로 마우스 우측버튼으로 열수가 있습니다.

그러면 아주 유용하죠.

cmder 도 위의 이미지처럼 마우스 우측버튼을 누르면 나오게 사용할수 있습니다. 무척 편리합니다.

cmder 의 저장소 -> https://github.com/cmderdev/cmder

에 보면 사용법이 나와 있습니다.

cmder 마우스 컨텍스트 메뉴에 넣기

cmder 을 다운로드 받은 폴더에서 cmd 창을 엽니다. 저는 C드라이브에 다운로드 받았습니다.

cmd 창을 열어야하는데 관리자권한으로 열어야합니다.

시작 - 검색에서 cmd 를 입력하면 cmd 가 나오는데 여기서 관리자권한으로 실행을 선택해주세요.

이제 cmder 이 있는 폴더로 이동해야 합니다.

cd .. 를 입력하면 상위폴더로 이동합니다. cd 폴더이름 하면 해당폴더로 이동합니다.

cmder 이 있는 폴더로 이동해서 아래코드를 넣어주세요.

cmder.exe /REGISTER ALL

아래의 이미지를 참고하세요.

그럼 마우스 우측버튼에 메뉴가 생성되었을 겁니다.

자 이제 다른 폴더에서 한번 열어보겠습니다.

cmder 의 기본 주소를 보면 해당폴더의 주소가 적혀있습니다.

자신의 스타일에 맞게 사용해보세요.

이제 주소를 치고 이동하는 불편함은 없을겁니다.

cdmer 에서 atom 치면 atom 에디터가 열리고 subl 이라고 치면 서브라임텍스트가 열립니다.

아 subl 은 path 를 해줘야합니다.

[플러그인] Sublimetext(서브라임텍스트) Sync View Scroll 두탭을 동시에 스크롤하면서 비교하기

demun — Mon, 4 Jul 2016 12:00:32 +0900

Sync View Scroll 은 동시에 두개의 탭을 보며 동기화할수 있는 플러그인입니다.

에디터를 사용하다보면 두개의 파일을 비교할때가 있습니다. 비교해서 수정할때 유용합니다.

예를들어 두개의 똑같은 파일을 열고 서로 비교해가며 스크롤해간다고 가정하면 1번파일을 스크롤하고, 다시 2번 파일을 스클롤을 해야 합니다. 하지만 Sync View Scroll는 한쪽에서 스크롤을 하면 다른쪽파일도 동시에 같이 스크롤이 됩니다.

설치

먼저 플러그인을 설치합니다.

Ctrl+Shift+p 를 눌러 Package Control: Install Package 를 선택합니다.

그후 나오는 명령창에서 Sync View Scroll 입력하여 선택합니다.

사용법

사용법은 무척 간단합니다. 동기화할 파일에서 단축키만 누르면 되고, 바로 스크롤하면 됩니다.

Ctrl+Shift+p 를 눌러 SyncScroll: Toggle Current View Scroll Sync 를 선택합니다.

간편하게 단축키 Ctrl+Shift+, 를 눌러서 사용하는것을 추천합니다.

여기서 단축키를 누를때 자세히 보면 첫번째줄에 커서가 가있습니다.

1번파일, 2번파일 모두 동일한 곳에 커서가 위치시킨후 단축키 Ctrl+Shift+,를 눌러서 시작하기 바랍니다.

그래야 동일하게 스크롤이 됩니다.

동영상을 첨부하니 참고하세요.

[팁]Sublimetext(서브라임텍스트) 동기화(syncing)

demun — Sun, 3 Jul 2016 20:32:45 +0900

서브라임텍스트(sublimetext) 동기화(syncing)은 현재 내컴퓨터에서 사용하던 설정과 패키지를 다른곳에서도 동일하게 사용하고, 다른곳에서 사용하던 설정들을 또 내컴퓨터에서도 동일하게 사용하는 일종의 동기화 방법입니다.

서브라임텍스트(sublimetent)를 사용하다보면 집에서도 사용하고, 회사에서도 사용하고, 또 노트북에서도 사용하고 등등 사용하는 곳이 여러곳일 수 있습니다.

그러면 그때마다 서브라임텍스트(sublimtext)를 설치를 하고 팩키지도 설치하고 개인설정 또한 다시 설정합니다.

이러한 번거로움을 덜어줄수 있는것이 동기화(syncing) 입니다.

즉 집에서 사용하던 서브라임텍스트(sublimetent) 환경을 그대로 회사나 다른곳에서도 동일하게 사용할 수 있다는 겁니다.

또다른 장점은 좋은 패키지를 발견하거나, 추가적으로 설정을 했을경우 다른환경에 있는 컴퓨터에서도 다시 설정하고나, 설치를 해줘야 합니다.

하지만 동기화를 진행하면 한번만 설치를 하면 다른컴퓨터에서도 동일하게 환경이 진행이 되어 따로 설치하거나 설정하지 않아도되는 장점이 있습니다.

서브라임텍스트(sublimetent)에서 사용하는 방법은 https://packagecontrol.io/docs/syncing 에서 볼수 있습니다. 여기에는 윈도우, 맥, 리눅스등에서 사용하는 방법이 나와 있습니다.

하지만 그냥 따라하기보다는 몇가지 주의사항이 있습니다. 반드시 알고 해야만 하는 사항이 있어서 여기에 글을 남김니다.

방법은 윈도우에서 사용하는 방법을 예제로 들겠습니다.

선지식

서브라임텍스트(sublimetent)의 모든 설정과 패키지는 user폴더에 있습니다. 이곳을 복사해서 다른곳에서 사용하면 기존에 사용하던 설정 그대로 사용할 수 있습니다.

윈도우에서는 C:\Users\사용자명\AppData\Roaming\Sublime Text 3\Packages\User 입니다.

서브라임텍스트(sublimetent) 메뉴에서 Preferences - Browse Packages 를 클릭하면 보여지는 User 폴더입니다.

github 를 이용하는 방법과 dropbox 를 이용하는 두가지 방법이 있지만 Dropbox 를 추천합니다.

github 는 일일이 add commit push 등을 해줘야 하지만 드롭박스는 자동으로 동기화가 진행이 되기때문에 편리합니다.

반드시 순서대로 해야합니다.

만약 순서가 바뀌거나, 그냥 복사해서 붙여넣기를 하면 동기화가 진행이 되질 않습니다.

드롭박스를 설치해야하고, 회원가입해서 로그인을 해야 합니다.

설치를 하면 아래처럼 컴퓨터 우측 하단에 아이콘이 보입니다.

진행순서

예를들어 집컴퓨터(1)에서 드롭박스(2)로 동기화를 진행합니다.
회사컴퓨터(3)에서 드롭박스(2)에 있는 패키지를 받아 동기화를 진행합니다.
이 순간부터 드롭박스(2)가 서버가 됩니다.
이제 3번 진행처럼 수정하든 패키지를 삭제, 추가하면 곧바로 드롭박스(2)에 동기화가 진행이 되어 서버역활을 하고, 다른컴퓨터들도 동기화가 됩니다.

순서는 아래 이미지 참고

실습

예제로 집컴퓨터, 회사컴퓨터로 명명하였습니다. 컴퓨터1번, 컴퓨터2번이라고 생각하세요.

설정이 많이 되어 있거나, 패키지를 모두 설치한 컴퓨터에서 작업을 합니다. 여기서는 집컴퓨터라고 하겠습니다.

제일먼저 (Dropbox)[https://www.dropbox.com]가 설치되어 있지 않으면 설치하고 회원가입해야 합니다. 회원가입 절차는 무척 간단합니다.

https://www.dropbox.com)[https://www.dropbox.com

첫번째.

집컴퓨터에서 아래의 명령어를 입력하세요.

윈도우이며, 서브라임텍스트(Sublimetext) 3 입니다. 만약 다른 종류이면 https://packagecontrol.io/docs/syncing 를 참고하세요. 순서는 같지만 명령어가 틀립니다.

cd '$env:appdata\Sublime Text 3\Packages\'
mkdir $env:userprofile\Dropbox\Sublime
mv User $env:userprofile\Dropbox\Sublime\
cmd /c mklink /D User $env:userprofile\Dropbox\Sublime\User

첫번째 줄의 cd.... 는 서브라임텍스트의 Packages 폴더로 이동을 합니다. 두번째로 드롭박스에 Sublime 폴더를 만듭니다. 세번째로 서브라임텍스트의 Packages 폴더의 내용을 Dropbox에 Sublime 폴더안에 붙여넣기합니다. 네번째로 Sublime Text 3의 Packages 와 Dropbox의 Sublime 폴더에 링크를 만듭니다.

이 네번째줄로 인해서 서브라임텍스트에서 무엇을 하든 자동으로 드롭박스에 복사가 됩니다.

두번째.

드롭박스에 올려진 파일들을 회사컴퓨터에서 받아야 합니다.

여기서 주의할점은 user 폴더를 지워야합니다.

C:\Users\사용자명\AppData\Roaming\Sublime Text 3\Packages\User 가 됩니다.

지우지 않고 작업을 하게되면 기존의 패키지와 집에서 있던 패키지와 엉키게 됩니다.

서브라임텍스트를 설치하고 Package Control 만 설치한 상태여하 한다는 말입니다.

또한 집에서 한것처럼 회사에서도 드롭박스를 설치해야 합니다. 그다음 아래대로 실행하세요.

user 폴더를 지웠다면 서브라임을 실행하지말고 끄고 아래의 명령어를 입력하세요.

cd '$env:appdata\Sublime Text 3\Packages\'
rmdir -recurse User
cmd /c mklink /D User $env:userprofile\Dropbox\Sublime\User

이걸로 작업은 끝입니다.

집컴퓨터와 회사컴퓨터를 드롭박스에 연결이 되고, 이제부터 어디에서든 수정하면 그 수정사항이 드롭박스에 반영이 되고, 다른곳에서 컴퓨터를 키면 드롭박스가 실행이되고, 동기화가 진행이 됩니다.

간혹 회사컴퓨터에서 패키지를 설치했는데 집컴퓨터에서 작동이 안될때가 있습니다 동기화가 제대로 진행이 안되는거죠. 그럴때는 패키지를 다시 설치 해주면 됩니다.

자 이제 집컴퓨터 또는 회사컴퓨터가 아닌 다른컴퓨터(컴퓨터3)에서도 동일하게 이용하려면 두번째부터 따라하시면 되고, 한번만 설정하면 됩니다.

기존처럼 사용하기만 하면 이제 모든 컴퓨터에서 동기화가 진행이 되고, 최신의 상태가 됩니다.

git bash 로 bower install 이 안될때 처리방법, bash.exe: warning: could not find /tmp, please create 메시지 해결방법

demun — Tue, 19 Jan 2016 21:31:13 +0900

어느날 갑자기 git bash 로 bower install 명령을 내렸더니 플러그인을 설치하지 못했다.

cmd 창으로 열어서 하면 잘된다. 무엇이 문제일까????

나와 같은 증상이 있었나보다 bower git is not installed 이런글이 나왔다.

문제는 해결법은 경로설정

시스템속성 - 고급 - 환경변수에서 `C:\Program Files\Git\cmd` 부분은 있었는데 추가로 `;C:\Program Files\Git\bin` 부분을 해주었더니 해결되었다.

또다른 문제

git bash 창을 열면 bash.exe: warning: could not find /tmp, please create 메시지가 나온다

해결방법을 알아볼려고 검색후 이것 저것 해보았지만 별소용이 없었다. 홈디렉토리에 tmp폴더를 만들어보고, 환경설정을 다시 해보았지만 안되었다.

해결방법은 깨끗하게 git 삭제하고 재설치하니 해결.....

의외로 간단하네.....

안될때는 정말 답답해요....

혹시 저와같은 증상이 있을까봐 글을 남깁니다.