EOND 스레드

이온디 1개월 전

2025. 06. 17 초고 작성 개발자들을 위한 나라는 없다 누구나 개발자가 될 수 있는 시대, 진짜 개발자의 가치를 찾아서 PDF 다운로드 온라인으로 읽기 새벽 3시, 모니터 앞에서 에너지드링크를 마시며 버그와 씨름하던 그 시절이 있었다. ChatGPT가 내가 3일간 짠 코드를 5분 만에 뚝딱 만들어내는 걸 보고 나서, 문득 이런 생각이 들었다. "개발자들을 위한 나라… 2025. 06. 17 초고 작성 개발자들을 위한 나라는 없다 누구나 개발자가 될 수 있는 시대, 진짜 개발자의 가치를 찾아서 PDF 다운로드 온라인으로 읽기 새벽 3시, 모니터 앞에서 에너지드링크를 마시며 버그와 씨름하던 그 시절이 있었다. ChatGPT가 내가 3일간 짠 코드를 5분 만에 뚝딱 만들어내는 걸 보고 나서, 문득 이런 생각이 들었다. "개발자들을 위한 나라는 정말 없는 건 아닐까?" 하지만 몇 달 후, 완전히 다른 결론에 도달했다. 이 책은 그 과정의 기록이다. AI 시대에 개발자의 가치가 사라지는 게 아니라, 모든 사람이 개발자가 되는 시대가 오고 있다는 이야기. 목차 프롤로그 개발자라는 직업의 종말과 시작 1장 10년 차 개발자가 ChatGPT에게 밀린 날 2장 AI가 5분 만에 해치운 나의 3일짜리 작업 3장 "코딩 몰라도 앱 만든다"는 거짓말과 진실 4장 카페 사장이 만든 POS 시스템 5장 AI 개발 도구 완전 정복 가이드 6장 코딩을 몰라도 되는 것 vs 반드시 알아야 하는 것 7장 일반인 개발자의 현실적 한계와 극복법 8장 전문 개발자의 생존 전략 9장 모든 직업이 개발자를 포함하는 시대 10장 사이드프로젝트의 종말, 개인프로젝트의 시작 에필로그 개발자로 살아남는다는 것의 새로운 의미 작성 시점 안내 이 책은 2025년 6월의 AI 기술 환경을 기준으로 작성되었습니다. AI의 발전 속도는 상상을 초월하기 때문에, 일부 내용은 현재 시점과 다를 수 있습니다. 당시의 기록으로 읽어주세요. 브라우저가 PDF 뷰어를 지원하지 않습니다. PDF를 다운로드하세요.

원본

이온디 1년 전

안녕하세요! 오늘은 Flexbox를 사용해서 왼쪽과 오른쪽에 요소들을 정렬하는 방법에 대해 간단하게 공유하려고 합니다. 특히 **margin-left: auto;**나 **형제 선택자(~)**를 활용한 방법으로 정렬을 할 때 유용한 팁이 될 것입니다. 문제 상황우리는 여러 개의 요소들이 있을 때, 특정 요소는 왼쪽에 배치하고, 다른 요소들은 오른쪽에 배치해야 하는 상황이 생깁니다. 예를 들어, 아래와 같은 HTML 구조가 있을 때: <div class="item-box"> <div cl… 안녕하세요! 오늘은 Flexbox를 사용해서 왼쪽과 오른쪽에 요소들을 정렬하는 방법에 대해 간단하게 공유하려고 합니다. 특히 **margin-left: auto;**나 **형제 선택자(~)**를 활용한 방법으로 정렬을 할 때 유용한 팁이 될 것입니다. 문제 상황우리는 여러 개의 요소들이 있을 때, 특정 요소는 왼쪽에 배치하고, 다른 요소들은 오른쪽에 배치해야 하는 상황이 생깁니다. 예를 들어, 아래와 같은 HTML 구조가 있을 때: <div class="item-box"> <div class="item left">1</div> <div class="item left">2</div> <div class="item right">3</div> <div class="item right">4</div> <div class="item right">5</div> </div> 이런 구조에서 left 클래스를 가진 요소들은 왼쪽에, right 클래스를 가진 요소들은 오른쪽에 정렬해야 하는데, 이때 Flexbox를 어떻게 활용할 수 있을까요? 해결 방법 1: margin-left: auto;와 ~ 형제 선택자 사용하기Flexbox에서 justify-content: space-between;을 사용하면 각 요소들 사이에 공간을 균등하게 배치할 수 있습니다. 하지만 오른쪽 요소들이 모두 오른쪽 끝에 밀리도록 하기 위해서는 margin-left: auto;를 활용해야 합니다. 먼저, right 클래스가 붙은 첫 번째 요소에만 margin-left: auto;를 적용하여 오른쪽으로 밀어주고, 이후 모든 right 요소들에 대해서는 margin-left: 0;을 적용하여 밀리지 않게 만듭니다. .item-box { display: flex; flex-wrap: wrap; justify-content: space-between; } .item { padding: 10px; margin: 5px; background-color: #f0f0f0; border: 1px solid #ddd; } .left { align-self: flex-start; } .right { align-self: flex-end; margin-left: auto; /* 첫 번째 right 요소만 오른쪽으로 밀기 */ } /* .right 클래스 뒤에 오는 모든 형제 .right 요소에 대해 margin-left 0 적용 */ .right ~ .right { margin-left: 0; } 결과1, 2는 왼쪽에 배치되고,3, 4, 5는 오른쪽에 배치됩니다.이렇게 하면 각 요소들이 원하는 위치에 정확하게 배치됩니다! https://codepen.io/eond/pen/zxYNrQy 정리margin-left: auto;는 Flexbox에서 남은 공간을 차지하는 역할을 하며, 이를 통해 요소들을 오른쪽으로 밀 수 있습니다.~ 형제 선택자는 같은 부모 요소 내에서 이후의 형제 요소들에만 스타일을 적용할 수 있어 유용합니다.이 방법은 매우 간단하면서도 실용적이기 때문에, 배치 순서를 변경하거나 특정 요소를 밀어내고 싶을 때 매우 유용합니다. 이렇게 Flexbox를 활용하여, 원하는 배치를 쉽게 설정할 수 있습니다. 여러분도 한번 시도해보세요!

원본

이온디 1년 전

sejin7940_copy 모듈인데 19년도 3월에 1.4버전 이후로 업데이트가 없더군요. 최근 해당 기능을 사용하기 위해서 조금 손 봤습니다. 라이믹스 최신 버전에서 동작합니다. 그리고 모듈 선택기에서도 전체 선택하는 기능을 추가했습니다. (1) 게시판 복사 모듈에서 오류를 수정하고 <script> function receiveSelectedModules(data) { const selectElement = document.getElementById('… sejin7940_copy 모듈인데 19년도 3월에 1.4버전 이후로 업데이트가 없더군요. 최근 해당 기능을 사용하기 위해서 조금 손 봤습니다. 라이믹스 최신 버전에서 동작합니다. 그리고 모듈 선택기에서도 전체 선택하는 기능을 추가했습니다. (1) 게시판 복사 모듈에서 오류를 수정하고 <script> function receiveSelectedModules(data) { const selectElement = document.getElementById('_target_module2'); data.forEach(module => { const option = document.createElement('option'); option.value = module.moduleSrl; option.text = `${module.moduleName} (${module.moduleTitle})`; selectElement.appendChild(option); }); } </script> 이 부분을 추가했습니다. (2) 모듈 선택기 modules/module/tpl/module_selector.html <load target="./js/module_admin.js" /> <div class="x_modal-header"> <h1>{$lang->module_selector}</h1> </div> <form id="moduleForm" action="./" method="get" class="rx_ajax x_modal-body x_form-horizontal" no-error-return-url="true" style="max-height:none"> <input type="hidden" name="module" value="module" /> <input type="hidden" name="act" value="dispModuleSelectList" /> <input type="hidden" name="id" value="{$id}" /> <input type="hidden" name="type" value="{$type}" /> <div class="x_control-group"> <div class="x_controls"> <button type="button" onclick="insertSelectedModules()">선택된 항목 추가</button> <select name="selected_module" id="selected_module"> <option loop="$mid_list => $key,$val" value="{$key}" selected="selected"|cond="$key == $selected_module">{$val->title}</option> </select> <input type="submit" value="{$lang->cmd_search}" class="x_btn" /> </div> </div>  <h2 cond="$category_name" style="margin-top:40px;">{$category_name}</h2> <table class="x_table x_table-striped x_table-hover" style="border-top:1px dotted #ddd"> <thead> <tr> <th><input type="checkbox" id="selectAll" /></th> <th>{$lang->mid}</th> <th>{$lang->browser_title}</th> <th>{$type=='single'?$lang->cmd_select:$lang->cmd_insert}</th> <tr> </thead> <tbody> <tr loop="$list => $mid_name,$module_info"> <td><input type="checkbox" name="selected_modules[]" value="{$module_info->module_srl}" /></td> <td>{$mid_name}</td> <td>{$module_info->browser_title}</td> <td><a href="#" onclick="insertModule('{$id|escapejs}', {$module_info->module_srl}, '{$mid_name|escapejs}', '{$module_info->browser_title|escapejs}', {$type=='single'?'false':'true'}); return false;" class="button green"><span>{$type=='single'?$lang->cmd_select:$lang->cmd_insert}</span></a></td> </tr> </tbody> </table>  </form> <script> document.getElementById('selectAll').addEventListener('click', function(event) { const checkboxes = document.querySelectorAll('input[name="selected_modules[]"]'); checkboxes.forEach(checkbox => checkbox.checked = event.target.checked); }); function insertSelectedModules() { const selectedModules = document.querySelectorAll('input[name="selected_modules[]"]:checked'); const selectedData = []; selectedModules.forEach(module => { const moduleSrl = module.value; const moduleName = module.closest('tr').querySelector('td:nth-child(2)').innerText; const moduleTitle = module.closest('tr').querySelector('td:nth-child(3)').innerText; selectedData.push({ moduleSrl, moduleName, moduleTitle }); }); if (window.opener && typeof window.opener.receiveSelectedModules === 'function') { window.opener.receiveSelectedModules(selectedData); window.close(); } else { alert('부모 창이 없거나 receiveSelectedModules 함수가 정의되지 않았습니다.'); } } </script> 전체 선택하는 기능은 만들었는데 테스트하고보니, 게시판 복사 모듈 자체에서 복사가 안되는 항목이 있네요. -_-; 모바일 설정이나 표시값 같은게 누락되서 복사되네요 이킁;;;; https://eond.com/tv

원본

K

kotlin 2년 전

❗전 세계가 주목하는 기술이자 개발자들에게 필수적인 AI 역량을 업그레이드할 기회! 2024 항해커톤에서 세상의 문제를 해결하며 의미 있는 AI 프로젝트를 구현하고, AI 활용법을 마스터해보세요❗ 🚩 항해커톤, 주제는? "오픈소스 AI를 활용해 사회의 문제를 해결하는 서비스 만들기" ex) 동물 복지 분야 : 비디오 분석으로 동물의 행동 패턴을 식별하고 이상 징후를 조기에 탐지하여 동물 건강 복지에 기여하는 서비스 🚩 수상팀 및 참가자 혜택 … ❗전 세계가 주목하는 기술이자 개발자들에게 필수적인 AI 역량을 업그레이드할 기회! 2024 항해커톤에서 세상의 문제를 해결하며 의미 있는 AI 프로젝트를 구현하고, AI 활용법을 마스터해보세요❗ 🚩 항해커톤, 주제는? "오픈소스 AI를 활용해 사회의 문제를 해결하는 서비스 만들기" ex) 동물 복지 분야 : 비디오 분석으로 동물의 행동 패턴을 식별하고 이상 징후를 조기에 탐지하여 동물 건강 복지에 기여하는 서비스 🚩 수상팀 및 참가자 혜택 [수상팀] ✅ 대상 1팀 : 300만원 ✅ 최우수상 1팀 : 200만원 ✅ 우수상 1팀 : 100만원 ✅ 특별상 3팀 : 상장 + 항해 등록금 할인 혜택 [참가팀 전원] ✅ 수료 시, AI 활용 프로젝트 구현을 증명하는 수료증 ✅ AI 개발자의 오픈소스 AI 활용법 코칭 세션 🚩 모집 요강 - 모집 단위 : 개인/팀 모두 가능 - 모집 기간 : 4/19(금) ~ 5/19(일) - 진행 일정 : 5/31(금) 20:00 ~ 6/1(토) 18:00 - 진행 방식 : 오프라인 무박 2일 (선릉역 인근) 🚩 신청하기 - https://hanghae99.spartacodingclub.kr/hhackathon-ai 🚩 사회 문제를 해결하고, 세상이 필요로 하는 개발자가 될 기회. 지금 바로 도전하세요!

원본

이온디 4년 전

구현내용 : 신고하기를 새창이 아닌 모달레이어로 구현 작업방법 : 기존 신고하기 새창의 소스를 그대로 복사해서, 게시판 스킨 내부 글보기 페이지, 코멘트 페이지에 삽입함. url만 XE 코드에 맞게 삽입함. 수정한 코드 경로 modules/board/skins/assets/css/report.scss modules/board/skins/assets/js/board.js modules/board/skins/eden_feed/components/article/article.html modules… 구현내용 : 신고하기를 새창이 아닌 모달레이어로 구현 작업방법 : 기존 신고하기 새창의 소스를 그대로 복사해서, 게시판 스킨 내부 글보기 페이지, 코멘트 페이지에 삽입함. url만 XE 코드에 맞게 삽입함. 수정한 코드 경로 modules/board/skins/assets/css/report.scss modules/board/skins/assets/js/board.js modules/board/skins/eden_feed/components/article/article.html modules/board/skins/eden_feed/components/comment/comment.html modules/board/skins/eden_feed/_header.html board.js jQuery(function($) { const btnReportDocument = $(".btn-report-document"); const btnReportComment = $(".btn-report-comment"); const modalWinDocument = $(".modal-wrap-document"); const modalWinComment = $(".modal-wrap-comment"); const btnClose = $(".btn-close"); btnReportDocument.on('click', function(){ modalWinDocument.addClass('active'); }); btnReportComment.on('click', function(){ console.log("코멘트열기"); $(this).next(".modal-wrap-comment").addClass('active'); // modalWinComment.addClass('active'); }); btnClose.on('click', function(){ modalWinDocument.removeClass('active'); modalWinComment.removeClass('active'); }); // $(".modal-wrap.active").not(".modal.modal-view").on("click", function(){ // $(this).removeClass('active'); // }) $('html').on('click', function(e){ //모달창 개수 // var modal = $(e.target).parents('.mark').length; //켜짐여부 var hasClass = $(e.target).hasClass('active'); // console.log($(e.target)) // console.log(modal) // var modal = $(e.target).length; if(hasClass){ // console.log('외부이프문') if(!$(e.target).hasClass('.modal-view')){ // console.log('내부이프문') // console.log($(e.target).parent('.mark').hasClass('on')) $('.modal-wrap-document').removeClass('active'); $('.modal-wrap-comment').removeClass('active'); $('body').css('overflow',''); }else{ // console.log('내부이프문2') } // console.log('켜짐'); // console.log(e.target); }else { // console.log('맞음'); // console.log(e.target); } }); }); article.html <div class="modal-wrap-document"> <div class="modal modal-view"> <div class="modal-header"> <div class="title">신고하기</div> <div class="btn-close"><i class="ion ion-md-close"></i></div> </div> <div class="modal-body"> <load target="../../ruleset/insertDeclare.xml" /> <form action="./" method="post" id="for_document"> <input type="hidden" name="error_return_url" value="{getUrl('','document_srl',$document_srl,'status','error')}"> <input type="hidden" name="mid" value=""> <input type="hidden" name="ruleset" value="insertDeclare"> <input type="hidden" name="module" value="document"> <input type="hidden" name="act" value="procDocumentDeclare"> <input type="hidden" name="target_srl" value="{$document_srl}"> <input type="hidden" name="success_return_url" value="{getUrl('','document_srl', $document_srl,'status','success')}"> <input type="hidden" name="xe_validator_id" value="modules/document/tpl/1"> <div class="x_modal-body x_form-horizontal" style="max-height:none"> <blockquote> <section class="target_article"> <div class="item"> <div class="label">작성자</div> <div class="text">{$oDocument->getNickName()}</div> </div> <div class="item"> <div class="label">제목</div> <div class="text">{$oDocument->getTitle()}</div> </div> </section> </blockquote> <div class="x_control-group"> <label class="x_control-label" for="message_option">사유선택</label> <div class="x_controls"> <select name="message_option" id="message_option"> <option loop="$lang->improper_document_reasons => $key,$text" value="{$key}">{$text}</option> <textarea name="declare_message" id="declare_message"></textarea> <p>{$lang->about_improper_document_declare}</p></div> </div> </div> <div class="x_modal-footer"> <span class="x_btn-group x_pull-right"> <button type="submit" class="x_btn x_btn-primary">{$lang->cmd_submit}</button> </span> </div> </form> <script cond="$XE_VALIDATOR_MESSAGE && $XE_VALIDATOR_ID == 'modules/document/tpl/1'"> alert("{$XE_VALIDATOR_MESSAGE}"); // window.close(); </script> <script cond="$XE_VALIDATOR_MESSAGE && $XE_VALIDATOR_ID == 'modules/comment/tpl/1'"> alert("{$XE_VALIDATOR_MESSAGE}"); // window.close(); </script> </div> </div> </div> comment.html <div class="btn-report-comment">신고</div> <div class="modal-wrap-comment"> <div class="modal modal-view"> <div class="modal-header"> <div class="title">신고하기</div> <div class="btn-close"><i class="ion ion-md-close"></i></div> </div> <div class="modal-body"> <load target="../../ruleset/insertDeclare.xml" /> <form action="./" method="post" id="for_comment"> <input type="hidden" name="error_return_url" value="{getUrl('','document_srl',$comment->get('document_srl'),'comment_srl',$comment->comment_srl,'status','error')}"> <input type="hidden" name="mid" value="index"> <input type="hidden" name="ruleset" value="insertDeclare"> <input type="hidden" name="module" value="comment"> <input type="hidden" name="act" value="procCommentDeclare"> <input type="hidden" name="target_srl" value="{$comment->comment_srl}"> <input type="hidden" name="success_return_url" value="{getUrl('','document_srl',$comment->get('document_srl'),'comment_srl',$comment->comment_srl,'status','success')}"> <input type="hidden" name="xe_validator_id" value="modules/comment/tpl/1">    <div class="x_modal-body x_form-horizontal" style="max-height:none"> <blockquote> <section class="target_article"> <div class="item"> <div class="label">댓글내용</div> <div class="text">{$comment->getContent(false)}</div> </div> </section> </blockquote> <div class="x_control-group"> <label class="x_control-label" for="message_option">신고 이유</label> <div class="x_controls"> <select name="message_option" id="message_option"> <option value="advertisement">본문 주제나 흐름에 맞지 않는 광고 글입니다.</option> <option value="theme">주제에 맞지 않는 글입니다.</option> <option value="bad_word">과도한 욕설을 담고 있습니다.</option> <option value="violence">폭력적인 내용을 담고 있습니다.</option> <option value="racism">인종차별적인 내용을 담고 있습니다.</option> <option value="pornography">음란물을 포함하고 있습니다.</option> <option value="privacy">민감한 개인정보가 노출 되어있습니다.</option> <option value="others">기타(직접작성)</option> </select> <textarea name="declare_message" id="declare_message"></textarea> <p>댓글을 신고하신 이유를 간단히 적어서 제출해주시면 관리자 검토 후 조치하겠습니다.</p><p> </p></div> </div> <div class="x_modal-footer"> <span class="x_btn-group x_pull-right"> <button type="submit" class="x_btn x_btn-primary">등록</button> </span> </div> </div> </form> </div> </div> </div> header.html <load target="../assets/css/report.min.css" /> report.scss $line-color:#eee; .btn-report-document,.btn-report-comment{ display:inline-block; margin-right: 10px; font-size: 13px !important; line-height: 1.2em !important; color: #999; cursor: pointer; } .modal-wrap-document, .modal-wrap-comment{ background: rgba(0,0,0,.5); //display: flex; align-items: center; justify-content: center; width: 100vw; height: 100vh; position: fixed; left: 0; right: 0; top: 0; z-index: 999; bottom: 0; display: none; &.active{ display: flex; } } // 신고하기 .modal.modal-view{ display:block !important; width: 21rem; height: 25rem; background:#fff; position: initial; border: 1px solid #444; box-shadow: 4px 4px 8px rgba(0,0,0,0.1); .modal-header{ border-bottom: 1px solid $line-color; .title{ } .btn-close{ cursor: pointer; i{ font-size: 24px; } } } .modal-body{ padding: 0; select, textarea{ margin-top: 2px; width: 100%; } .target_article{ display: flex; flex-direction: column; gap: .5rem; padding: .5rem; border-bottom: 1px solid $line-color; .item{ display: flex; .label{ color: #aaa; border-right: 1px solid #ddd; width: 6rem; } .text{ padding-left: 1rem; } } font-size: 13px; } .x_control-group{ padding: .5rem; .x_controls{ p{ font-size: 12px; color: #aaa; } } } .x_modal-footer{ padding: 0 .5rem; .x_btn-group{ .x_btn{ width: 100%; background: #ff5d6b; border: 0; height: 40px; color: #fff; border-radius: 3px; } } } } }

원본

이온디 7년 전

1. 최근 XE를 업데이트하면서 관리자 쪽이 깨지더군요. 2. CSS로 보완해봤습니다. 3. 적당히 아래 CSS 코드를 사이트에 심어주세요. (저는 사용하는 레이아웃에 넣어주었습니다.) /*게시판 관리자 설정 - 헤더 */ .x .localNavigation{margin:0;padding:0;} .x .localNavigation:after{content:"";display:table;width:100%;border-top:1px solid #ddd;margin-bottom:20px;bo… 1. 최근 XE를 업데이트하면서 관리자 쪽이 깨지더군요. 2. CSS로 보완해봤습니다. 3. 적당히 아래 CSS 코드를 사이트에 심어주세요. (저는 사용하는 레이아웃에 넣어주었습니다.) /*게시판 관리자 설정 - 헤더 */ .x .localNavigation{margin:0;padding:0;} .x .localNavigation:after{content:"";display:table;width:100%;border-top:1px solid #ddd;margin-bottom:20px;bottom:1px;position:relative;} .x .localNavigation li{list-style:none;float:left;border:1px solid #ddd;border-left:0;background:#f0f0f0;position:relative;} .x .localNavigation li a{padding:5px 10px;display:block;height:inherit !important;} .x .localNavigation li:first-child{border-left:1px solid #ddd;} .x .localNavigation li.on{background:#fff;} .rowTable th,.rowTable td{border-top:1px solid #f0f0f0;padding:10px 5px;} .rowTable tr:first-child th,.rowTable tr:first-child td{border-top:0px solid #f0f0f0;} .rowTable th{white-space:nowrap;}

원본

이온디 7년 전

XE관리자 커스텀 CSS 입니다. CSS @charset "utf-8"; @font-face { font-family: 'NotoSansDemiLight'; font-style: normal; src: url('https://021b64efda903fd2f04226783d09490774fac328.googledrive.com/host/0B5GXa347KCFFVDYydUw4NGwybTg/fonts/NotoSansCJKkr-DemiLight.eot'); src: url(… XE관리자 커스텀 CSS 입니다. CSS @charset "utf-8"; @font-face { font-family: 'NotoSansDemiLight'; font-style: normal; src: url('https://021b64efda903fd2f04226783d09490774fac328.googledrive.com/host/0B5GXa347KCFFVDYydUw4NGwybTg/fonts/NotoSansCJKkr-DemiLight.eot'); src: url('https://021b64efda903fd2f04226783d09490774fac328.googledrive.com/host/0B5GXa347KCFFVDYydUw4NGwybTg/fonts/NotoSansCJKkr-DemiLight.eot') format('embedded-opentype'), url('https://021b64efda903fd2f04226783d09490774fac328.googledrive.com/host/0B5GXa347KCFFVDYydUw4NGwybTg/fonts/NotoSansCJKkr-DemiLight.woff') format('woff'), url('https://021b64efda903fd2f04226783d09490774fac328.googledrive.com/host/0B5GXa347KCFFVDYydUw4NGwybTg/fonts/NotoSansCJKkr-DemiLight.otf') format('truetype'); } @font-face { font-family: 'NotoSansMedium'; font-style: normal; src: url('https://021b64efda903fd2f04226783d09490774fac328.googledrive.com/host/0B5GXa347KCFFVDYydUw4NGwybTg/fonts/NotoSansCJKkr-Medium.eot'); src: url('https://021b64efda903fd2f04226783d09490774fac328.googledrive.com/host/0B5GXa347KCFFVDYydUw4NGwybTg/fonts/NotoSansCJKkr-Medium.eot') format('embedded-opentype'), url('https://021b64efda903fd2f04226783d09490774fac328.googledrive.com/host/0B5GXa347KCFFVDYydUw4NGwybTg/fonts/NotoSansCJKkr-Medium.woff') format('woff'), url('https://021b64efda903fd2f04226783d09490774fac328.googledrive.com/host/0B5GXa347KCFFVDYydUw4NGwybTg/fonts/NotoSansCJKkr-Medium.otf') format('truetype'); } @font-face { font-family: 'NotoSansBlack'; font-style: normal; src: url('https://021b64efda903fd2f04226783d09490774fac328.googledrive.com/host/0B5GXa347KCFFVDYydUw4NGwybTg/fonts/NotoSansCJKkr-Black.eot'); src: url('https://021b64efda903fd2f04226783d09490774fac328.googledrive.com/host/0B5GXa347KCFFVDYydUw4NGwybTg/fonts/NotoSansCJKkr-Black.eot') format('embedded-opentype'), url('https://021b64efda903fd2f04226783d09490774fac328.googledrive.com/host/0B5GXa347KCFFVDYydUw4NGwybTg/fonts/NotoSansCJKkr-Black.woff') format('woff'), url('https://021b64efda903fd2f04226783d09490774fac328.googledrive.com/host/0B5GXa347KCFFVDYydUw4NGwybTg/fonts/NotoSansCJKkr-Black.otf') format('truetype'); } @font-face { font-family: 'NotoSansBold'; font-style: normal; src: url('https://021b64efda903fd2f04226783d09490774fac328.googledrive.com/host/0B5GXa347KCFFVDYydUw4NGwybTg/fonts/NotoSansCJKkr-Bold.eot'); src: url('https://021b64efda903fd2f04226783d09490774fac328.googledrive.com/host/0B5GXa347KCFFVDYydUw4NGwybTg/fonts/NotoSansCJKkr-Bold.eot') format('embedded-opentype'), url('https://021b64efda903fd2f04226783d09490774fac328.googledrive.com/host/0B5GXa347KCFFVDYydUw4NGwybTg/fonts/NotoSansCJKkr-Bold.woff') format('woff'), url('https://021b64efda903fd2f04226783d09490774fac328.googledrive.com/host/0B5GXa347KCFFVDYydUw4NGwybTg/fonts/NotoSansCJKkr-Bold.otf') format('truetype'); } /*폰트*/ body>.x, .x table, .x input, .x textarea, .x select, .x button, html, body, table, input, textarea, select, button{margin:0;padding:0;font-family: 'Noto Sans KR', sans-serif !important; } /*컨텐츠넓이*/ body>.x:first-child{max-width:inherit !important;} body{margin-left:0;} /*메뉴 그림자 및 메뉴 레이아웃 */ body .x>.header:before{box-shadow:none;} body .x>.body>.gnb>ul{box-shadow:none;border:0;} .x>.body{padding-bottom:0 !important;} .x>.body>.gnb{height:100vw;background:#272634;} .x>.body>.gnb{margin-top:0 !important;} .x>.body>.gnb>ul>li[data-index="5"]{margin-bottom:0 !important;} /*메뉴 선택자 배경*/ body .x>.body>.gnb>ul>li, body .x>.body>.gnb>ul>li.open>a, body .x>.body>.gnb>ul>li.active{background:#272634;} .x>.body>.gnb>ul>li{border-top:0 !important;} /*메뉴 최상단 배경*/ .x>.body>.gnb>ul>li>a{background:#1e1e28 !important;color:#ccc;text-shadow:none;} .x>.body>.gnb>ul>li{border-bottom:1px solid #1e1e28 !important;} .x a[target="_blank"]:after, .x>.body>.gnb>ul>li>a>i, .x .dashboard>div>section>h2:before{ background-image: url(../img/glyphicons-halflings-white.png) !important; } /*업데이트알림*/ body .message.update{display:none;} /*대쉬보드 넓이*/ .x .dashboard>div{ max-width: calc(100% / 3); float: left !important; margin-right: 10px; } /*대쉬보드 상단*/ body .x>.header { border-bottom: 0px solid #ddd; background-color: #1e1e28; } body .x>.header>h1>a{color:#eee} /*상단 1픽셀*/ body .x>.skipNav>a{height:0;}

원본

이온디 8년 전

<a href="#layer1" class="btn-example">일반 팝업레이어</a>위와 같은 형식으로 사용 가능합니다. 클래스 속성에 btn-popup 혹은 btn-example 이라는 클래스명을 작성한 뒤, #layer1 이라는 아이디명을 적어서 사용합니다. 클릭하면 해당 레이어가 보여지는 방식입니다. preview https://codepen.io/jaehee/pen/xwRNdQ html <div style="height: 300px;"></div> <a href="#layer1" … <a href="#layer1" class="btn-example">일반 팝업레이어</a>위와 같은 형식으로 사용 가능합니다. 클래스 속성에 btn-popup 혹은 btn-example 이라는 클래스명을 작성한 뒤, #layer1 이라는 아이디명을 적어서 사용합니다. 클릭하면 해당 레이어가 보여지는 방식입니다. preview https://codepen.io/jaehee/pen/xwRNdQ html <div style="height: 300px;"></div> <a href="#layer1" class="btn-example">일반 팝업레이어</a> <div id="layer1" class="pop-layer"> <div class="pop-container"> <div class="pop-conts">  <p class="ctxt mb20">Thank you.<br> Your registration was submitted successfully.<br> Selected invitees will be notified by e-mail on JANUARY 24th.<br><br> Hope to see you soon! </p> <div class="btn-r"> <a href="#" class="btn-layerClose">Close</a> </div>  </div> </div> </div> <br/><br/> <a href="#layer2" class="btn-example">딤처리 팝업레이어 1</a> <div class="dim-layer"> <div class="dimBg"></div> <div id="layer2" class="pop-layer"> <div class="pop-container"> <div class="pop-conts">  <p class="ctxt mb20">Thank you.<br> Your registration was submitted successfully.<br> Selected invitees will be notified by e-mail on JANUARY 24th.<br><br> Hope to see you soon! </p> <div class="btn-r"> <a href="#" class="btn-layerClose">Close</a> </div>  </div> </div> </div> </div>css * { margin: 0; padding: 0; } body { margin: 100px; } .pop-layer .pop-container { padding: 20px 25px; } .pop-layer p.ctxt { color: #666; line-height: 25px; } .pop-layer .btn-r { width: 100%; margin: 10px 0 20px; padding-top: 10px; border-top: 1px solid #DDD; text-align: right; } .pop-layer { display: none; position: absolute; top: 50%; left: 50%; width: 410px; height: auto; background-color: #fff; border: 5px solid #3571B5; z-index: 10; } .dim-layer { display: none; position: fixed; _position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; } .dim-layer .dimBg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: .5; filter: alpha(opacity=50); } .dim-layer .pop-layer { display: block; } a.btn-layerClose { display: inline-block; height: 25px; padding: 0 14px 0; border: 1px solid #304a8a; background-color: #3f5a9d; font-size: 13px; color: #fff; line-height: 25px; } a.btn-layerClose:hover { border: 1px solid #091940; background-color: #1f326a; color: #fff; }js $('.btn-example').click(function(){ var $href = $(this).attr('href'); layer_popup($href); }); function layer_popup(el){ var $el = $(el); //레이어의 id를 $el 변수에 저장 var isDim = $el.prev().hasClass('dimBg'); //dimmed 레이어를 감지하기 위한 boolean 변수 isDim ? $('.dim-layer').fadeIn() : $el.fadeIn(); var $elWidth = ~~($el.outerWidth()), $elHeight = ~~($el.outerHeight()), docWidth = $(document).width(), docHeight = $(document).height(); // 화면의 중앙에 레이어를 띄운다. if ($elHeight < docHeight || $elWidth < docWidth) { $el.css({ marginTop: -$elHeight /2, marginLeft: -$elWidth/2 }) } else { $el.css({top: 0, left: 0}); } $el.find('a.btn-layerClose').click(function(){ isDim ? $('.dim-layer').fadeOut() : $el.fadeOut(); // 닫기 버튼을 클릭하면 레이어가 닫힌다. return false; }); $('.layer .dimBg').click(function(){ $('.dim-layer').fadeOut(); return false; }); } See the Pen layer-popup by jaeheekim (@jaehee) on CodePen.

원본

이온디 9년 전

HTML <div id="a">h1</div> <div id="b"><input type="text" /></div> CSS input{display:block;border:0;border-bottom:1px solid #ddd;line-height:2em;padding:0 10px;margin-bottom:10px;} .h1{font-size:2em} .h2{font-size:1.5em} .h3{font-size:1.17em} .h4{font-size:1e… HTML <div id="a">h1</div> <div id="b"><input type="text" /></div> CSS input{display:block;border:0;border-bottom:1px solid #ddd;line-height:2em;padding:0 10px;margin-bottom:10px;} .h1{font-size:2em} .h2{font-size:1.5em} .h3{font-size:1.17em} .h4{font-size:1em} .h5{font-size:0.84em} JAVASCRIPT var sum =''; for(var i = 1 ; i <= 5 ; i++){ //i = i.toString(); var k ='<h'+i+'>내가 원하는 건 h'+i+'</h'+i+'>'; sum+=k; } document.getElementById('a').innerHTML= '결과물<hr>'+sum // var sum =''; for(var i = 1 ; i <= 5 ; i++){ //i = i.toString(); var k ='h'+i+'<input type="text" class="h'+i+'" placeholder="제목을 입력해주세요">'; sum+=k; } document.getElementById('b').innerHTML= '결과물<hr>'+sum

원본

?

geusgod 9년 전

@charset "utf-8"; /* Element Reset */ body,table,input,textarea,select,button{font-family:Tahoma,Geneva,sans-serif;font-size:12px} img{border:0} /* Button */ .btn{position:relative;display:inline-block;vertical-align:middle} .btn *{display:inline-block;padding:0 8px;font-size:12p… @charset "utf-8"; /* Element Reset */ body,table,input,textarea,select,button{font-family:Tahoma,Geneva,sans-serif;font-size:12px} img{border:0} /* Button */ .btn{position:relative;display:inline-block;vertical-align:middle} .btn *{display:inline-block;padding:0 8px;font-size:12px;height:24px;line-height:22px;margin:0;font-weight:bold !important;color:#fff;text-decoration:none !important;border:1px solid;cursor:pointer;overflow:visible;border-radius:3px;box-shadow:inset 0 0 1px #fff;background-color:#666;text-shadow:0 -1px 0 #333;zoom:1} .btn *[type=submit][disabled=disabled], .btn *[type=button][disabled=disabled]{opacity:.5;*filter:alpha(opacity=50)} .btn a, .btn button[type=button]{border-color:#ccc;color:#333 !important;background:#eee -webkit-gradient(linear,0% 0%,0% 100%,from(#fff),to(#ddd));background:#eee -moz-linear-gradient(top,#fff,#ddd);background-color:#eee;text-shadow:1px 1px 0 #fff;filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#ffffff, endColorStr=#dddddd)} .btn input, .btn button[type=submit]{border-color:#666;background:#333 -webkit-gradient(linear,0% 0%,0% 100%,from(#777),to(#777),color-stop(0.5,#333),color-stop(0.5,#000)) !important;background:#333 -moz-linear-gradient(top,#777,#000) !important;background-color:#333 !important;color:#ffc !important;filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#777777, endColorStr=#333333)} .btn a{height:22px} .btn.medium *{padding:0 12px;font-size:16px;height:30px;line-height:28px} .btn.medium a{height:28px} .btn.large *{padding:0 18px;font-size:22px;height:36px;line-height:34px} .btn.large a{height:34px} /* Button - Regucy */ span.button, a.button{position:relative;display:inline-block;vertical-align:top} span.button *, a.button *{display:inline-block;padding:0 8px;font-size:12px;height:24px;line-height:22px;margin:0;font-weight:bold !important;color:#fff;text-decoration:none !important;border:1px solid;cursor:pointer;overflow:visible;border-radius:3px;box-shadow:inset 0 0 1px #fff;background-color:#666;text-shadow:0 -1px 0 #333;zoom:1} span.button *[type=submit][disabled=disabled], span.button *[type=button][disabled=disabled]{opacity:.5;*filter:alpha(opacity=50)} a.button span, span.button button[type=button]{border-color:#ccc;color:#333 !important;background:#eee -webkit-gradient(linear,0% 0%,0% 100%,from(#fff),to(#ddd));background:#eee -moz-linear-gradient(top,#fff,#ddd);background-color:#eee;text-shadow:1px 1px 0 #fff;filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#ffffff, endColorStr=#dddddd)} span.button input, span.button button[type=submit]{border-color:#666;background:#333 -webkit-gradient(linear,0% 0%,0% 100%,from(#777),to(#777),color-stop(0.5,#333),color-stop(0.5,#000));background:#333 -moz-linear-gradient(top,#777,#000);background-color:#333;color:#ffc !important;filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#777777, endColorStr=#333333)} a.button span{height:22px} /* Button Area */ .btnArea{margin:1em 0;text-align:right;zoom:1} .btnArea:after{content:"";display:block;clear:both} .btnArea .etc{float:left} /* Text Button */ input[type=submit].text, input[type=button].text, button[type=submit].text, button[type=button].text{border:0;overflow:visible;padding:0;margin:0 4px 0 0;color:#33a !important;background:none;text-decoration:underline;cursor:pointer} /* Popup Menu Area */ #popup_menu_area{position:absolute;background:#fff;border:1px solid #e9e9e9;border-radius:5px;padding:10px;line-height:1.3;box-shadow:0 0 6px #666;font-size:12px;filter:progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135, strength=5)} #popup_menu_area ul{list-style:none;margin:0;padding:0} #popup_menu_area li{margin:0;padding:0} #popup_menu_area a{text-decoration:none;color:#333} #popup_menu_area a:hover, #popup_menu_area a:avtive, #popup_menu_area a:focus{text-decoration:underline} /* Message */ .message{border:1px solid #ddd;background:#f8f8f8;margin:1em 0;padding:0 1em;border-radius:5px;line-height:1.4;font-size:12px} body>.message{margin:1em} .message p{margin:1em 0 !important} .message em{font-style:normal;color:#e00} .message.info, .message.error, .message.update{padding-left:55px} .message.info{border-color:#E0E8EC;background:#EDF9FF url(../../common/img/msg.Info.png) no-repeat 1em .5em} .message.error{border-color:#EFDCDC;background:#FFECEC url(../../common/img/msg.error.png) no-repeat 1em .5em} .message.update{border-color:#EAE9DC;background:#FFFDEF url(../../common/img/msg.update.png) no-repeat 1em .5em} /* Waiting for server response */ .wfsr{display:none;position:absolute;position:fixed;left:0;top:0;z-index:100; border:1px solid #EAE9DC;background:#FFFDEF url(../../common/img/msg.loading.gif) no-repeat 1em .5em;margin:1em;padding:1em 1em 1em 55px;border-radius:5px;line-height:1.4;font-size:12px;font-weight:bold} /* Waiting for server response - Modal Window */ .wfsr_fog{position:absolute;top:0;left:0;width:100%;_height:100%;min-height:100%;z-index:100} .wfsr_fog .bg{position:absolute;position:fixed;background:#000;_background:none;width:100%;height:100%;opacity:.5;z-index:2;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);zoom:1} .wfsr_fog .ie6{position:absolute;left:0;top:0;width:100%;height:100%;border:0;opacity:0;filter:alpha(opacity=0);z-index:1} 아래는 몇군데 확인하고 넘어가야 부분들이다. /* Element Reset */ body,table,input,textarea,select,button{font-family:Tahoma,Geneva,sans-serif;font-size:12px} img{border:0} /* Text Button */ input[type=submit].text, input[type=button].text, button[type=submit].text, button[type=button].text{border:0;overflow:visible;padding:0;margin:0 4px 0 0;color:#33a !important;background:none;text-decoration:underline;cursor:pointer} /* Popup Menu Area */ #popup_menu_area{position:absolute;background:#fff;border:1px solid #e9e9e9;border-radius:5px;padding:10px;line-height:1.3;box-shadow:0 0 6px #666;font-size:12px;filter:progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135, strength=5)} #popup_menu_area ul{list-style:none;margin:0;padding:0} #popup_menu_area li{margin:0;padding:0} #popup_menu_area a{text-decoration:none;color:#333} #popup_menu_area a:hover, #popup_menu_area a:avtive, #popup_menu_area a:focus{text-decoration:underline} /* Message */ .message{border:1px solid #ddd;background:#f8f8f8;margin:1em 0;padding:0 1em;border-radius:5px;line-height:1.4;font-size:12px} body>.message{margin:1em} .message p{margin:1em 0 !important} .message em{font-style:normal;color:#e00} .message.info, .message.error, .message.update{padding-left:55px} .message.info{border-color:#E0E8EC;background:#EDF9FF url(../../common/img/msg.Info.png) no-repeat 1em .5em} .message.error{border-color:#EFDCDC;background:#FFECEC url(../../common/img/msg.error.png) no-repeat 1em .5em} .message.update{border-color:#EAE9DC;background:#FFFDEF url(../../common/img/msg.update.png) no-repeat 1em .5em} /* Waiting for server response */ .wfsr{display:none;position:absolute;position:fixed;left:0;top:0;z-index:100; border:1px solid #EAE9DC;background:#FFFDEF url(../../common/img/msg.loading.gif) no-repeat 1em .5em;margin:1em;padding:1em 1em 1em 55px;border-radius:5px;line-height:1.4;font-size:12px;font-weight:bold} /* Waiting for server response - Modal Window */ .wfsr_fog{position:absolute;top:0;left:0;width:100%;_height:100%;min-height:100%;z-index:100} .wfsr_fog .bg{position:absolute;position:fixed;background:#000;_background:none;width:100%;height:100%;opacity:.5;z-index:2;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);zoom:1} .wfsr_fog .ie6{position:absolute;left:0;top:0;width:100%;height:100%;border:0;opacity:0;filter:alpha(opacity=0);z-index:1}

원본

?

클론 9년 전

@charset "utf-8"; /* Element Reset */ body,table,input,textarea,select,button{font-family:Tahoma,Geneva,sans-serif;font-size:12px} img{border:0} /* Button */ .btn{position:relative;display:inline-block;vertical-align:middle} .btn *{display:inline-block;padding:0 8px;font-size:12p… @charset "utf-8"; /* Element Reset */ body,table,input,textarea,select,button{font-family:Tahoma,Geneva,sans-serif;font-size:12px} img{border:0} /* Button */ .btn{position:relative;display:inline-block;vertical-align:middle} .btn *{display:inline-block;padding:0 8px;font-size:12px;height:24px;line-height:22px;margin:0;font-weight:bold !important;color:#fff;text-decoration:none !important;border:1px solid;cursor:pointer;overflow:visible;border-radius:3px;box-shadow:inset 0 0 1px #fff;background-color:#666;text-shadow:0 -1px 0 #333;zoom:1} .btn *[type=submit][disabled=disabled], .btn *[type=button][disabled=disabled]{opacity:.5;*filter:alpha(opacity=50)} .btn a, .btn button[type=button]{border-color:#ccc;color:#333 !important;background:#eee -webkit-gradient(linear,0% 0%,0% 100%,from(#fff),to(#ddd));background:#eee -moz-linear-gradient(top,#fff,#ddd);background-color:#eee;text-shadow:1px 1px 0 #fff;filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#ffffff, endColorStr=#dddddd)} .btn input, .btn button[type=submit]{border-color:#666;background:#333 -webkit-gradient(linear,0% 0%,0% 100%,from(#777),to(#777),color-stop(0.5,#333),color-stop(0.5,#000)) !important;background:#333 -moz-linear-gradient(top,#777,#000) !important;background-color:#333 !important;color:#ffc !important;filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#777777, endColorStr=#333333)} .btn a{height:22px} .btn.medium *{padding:0 12px;font-size:16px;height:30px;line-height:28px} .btn.medium a{height:28px} .btn.large *{padding:0 18px;font-size:22px;height:36px;line-height:34px} .btn.large a{height:34px} /* Button - Regucy */ span.button, a.button{position:relative;display:inline-block;vertical-align:top} span.button *, a.button *{display:inline-block;padding:0 8px;font-size:12px;height:24px;line-height:22px;margin:0;font-weight:bold !important;color:#fff;text-decoration:none !important;border:1px solid;cursor:pointer;overflow:visible;border-radius:3px;box-shadow:inset 0 0 1px #fff;background-color:#666;text-shadow:0 -1px 0 #333;zoom:1} span.button *[type=submit][disabled=disabled], span.button *[type=button][disabled=disabled]{opacity:.5;*filter:alpha(opacity=50)} a.button span, span.button button[type=button]{border-color:#ccc;color:#333 !important;background:#eee -webkit-gradient(linear,0% 0%,0% 100%,from(#fff),to(#ddd));background:#eee -moz-linear-gradient(top,#fff,#ddd);background-color:#eee;text-shadow:1px 1px 0 #fff;filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#ffffff, endColorStr=#dddddd)} span.button input, span.button button[type=submit]{border-color:#666;background:#333 -webkit-gradient(linear,0% 0%,0% 100%,from(#777),to(#777),color-stop(0.5,#333),color-stop(0.5,#000));background:#333 -moz-linear-gradient(top,#777,#000);background-color:#333;color:#ffc !important;filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#777777, endColorStr=#333333)} a.button span{height:22px} /* Button Area */ .btnArea{margin:1em 0;text-align:right;zoom:1} .btnArea:after{content:"";display:block;clear:both} .btnArea .etc{float:left} /* Text Button */ input[type=submit].text, input[type=button].text, button[type=submit].text, button[type=button].text{border:0;overflow:visible;padding:0;margin:0 4px 0 0;color:#33a !important;background:none;text-decoration:underline;cursor:pointer} /* Popup Menu Area */ #popup_menu_area{position:absolute;background:#fff;border:1px solid #e9e9e9;border-radius:5px;padding:10px;line-height:1.3;box-shadow:0 0 6px #666;font-size:12px;filter:progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135, strength=5)} #popup_menu_area ul{list-style:none;margin:0;padding:0} #popup_menu_area li{margin:0;padding:0} #popup_menu_area a{text-decoration:none;color:#333} #popup_menu_area a:hover, #popup_menu_area a:avtive, #popup_menu_area a:focus{text-decoration:underline} /* Message */ .message{border:1px solid #ddd;background:#f8f8f8;margin:1em 0;padding:0 1em;border-radius:5px;line-height:1.4;font-size:12px} body>.message{margin:1em} .message p{margin:1em 0 !important} .message em{font-style:normal;color:#e00} .message.info, .message.error, .message.update{padding-left:55px} .message.info{border-color:#E0E8EC;background:#EDF9FF url(../../common/img/msg.Info.png) no-repeat 1em .5em} .message.error{border-color:#EFDCDC;background:#FFECEC url(../../common/img/msg.error.png) no-repeat 1em .5em} .message.update{border-color:#EAE9DC;background:#FFFDEF url(../../common/img/msg.update.png) no-repeat 1em .5em} /* Waiting for server response */ .wfsr{display:none;position:absolute;position:fixed;left:0;top:0;z-index:100; border:1px solid #EAE9DC;background:#FFFDEF url(../../common/img/msg.loading.gif) no-repeat 1em .5em;margin:1em;padding:1em 1em 1em 55px;border-radius:5px;line-height:1.4;font-size:12px;font-weight:bold} /* Waiting for server response - Modal Window */ .wfsr_fog{position:absolute;top:0;left:0;width:100%;_height:100%;min-height:100%;z-index:100} .wfsr_fog .bg{position:absolute;position:fixed;background:#000;_background:none;width:100%;height:100%;opacity:.5;z-index:2;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);zoom:1} .wfsr_fog .ie6{position:absolute;left:0;top:0;width:100%;height:100%;border:0;opacity:0;filter:alpha(opacity=0);z-index:1} 아래는 몇군데 확인하고 넘어가야 부분들이다. /* Element Reset */ body,table,input,textarea,select,button{font-family:Tahoma,Geneva,sans-serif;font-size:12px} img{border:0} /* Text Button */ input[type=submit].text, input[type=button].text, button[type=submit].text, button[type=button].text{border:0;overflow:visible;padding:0;margin:0 4px 0 0;color:#33a !important;background:none;text-decoration:underline;cursor:pointer} /* Popup Menu Area */ #popup_menu_area{position:absolute;background:#fff;border:1px solid #e9e9e9;border-radius:5px;padding:10px;line-height:1.3;box-shadow:0 0 6px #666;font-size:12px;filter:progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135, strength=5)} #popup_menu_area ul{list-style:none;margin:0;padding:0} #popup_menu_area li{margin:0;padding:0} #popup_menu_area a{text-decoration:none;color:#333} #popup_menu_area a:hover, #popup_menu_area a:avtive, #popup_menu_area a:focus{text-decoration:underline} /* Message */ .message{border:1px solid #ddd;background:#f8f8f8;margin:1em 0;padding:0 1em;border-radius:5px;line-height:1.4;font-size:12px} body>.message{margin:1em} .message p{margin:1em 0 !important} .message em{font-style:normal;color:#e00} .message.info, .message.error, .message.update{padding-left:55px} .message.info{border-color:#E0E8EC;background:#EDF9FF url(../../common/img/msg.Info.png) no-repeat 1em .5em} .message.error{border-color:#EFDCDC;background:#FFECEC url(../../common/img/msg.error.png) no-repeat 1em .5em} .message.update{border-color:#EAE9DC;background:#FFFDEF url(../../common/img/msg.update.png) no-repeat 1em .5em} /* Waiting for server response */ .wfsr{display:none;position:absolute;position:fixed;left:0;top:0;z-index:100; border:1px solid #EAE9DC;background:#FFFDEF url(../../common/img/msg.loading.gif) no-repeat 1em .5em;margin:1em;padding:1em 1em 1em 55px;border-radius:5px;line-height:1.4;font-size:12px;font-weight:bold} /* Waiting for server response - Modal Window */ .wfsr_fog{position:absolute;top:0;left:0;width:100%;_height:100%;min-height:100%;z-index:100} .wfsr_fog .bg{position:absolute;position:fixed;background:#000;_background:none;width:100%;height:100%;opacity:.5;z-index:2;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);zoom:1} .wfsr_fog .ie6{position:absolute;left:0;top:0;width:100%;height:100%;border:0;opacity:0;filter:alpha(opacity=0);z-index:1}

원본

이온디 9년 전

Posted at 2009/02/12 11:32 [ by Lovelet ] 1. 관련링크1를 참조하여 스마트에디터를 다운로드 합니다. 2. 압축을 해제한 후 홈페이지 계정/bbs/SmartEditor로 업로드 합니다. 3. 적용하고자 하시는 스킨의 write.php파일을 에디터로 여세요. 4. 가장 윗부분에 아래의 소스를 붙여 넣으세요. <script type="text/javascrip… Posted at 2009/02/12 11:32 [ by Lovelet ] 1. 관련링크1를 참조하여 스마트에디터를 다운로드 합니다. 2. 압축을 해제한 후 홈페이지 계정/bbs/SmartEditor로 업로드 합니다. 3. 적용하고자 하시는 스킨의 write.php파일을 에디터로 여세요. 4. 가장 윗부분에 아래의 소스를 붙여 넣으세요. <script type="text/javascript" src="SmartEditor/js/HuskyEZCreator.js"></script> 5. 아래의 소스를 찾으셔서 value값을 수정하세요. <?=$hide_html_start?><input type=checkbox name=use_html checked <?=$use_html?> value=2>HTML 사용<?=$hide_html_end?> 6. 기본 스킨 기준으로 아래의 소스를 수정하세요. <textarea name=memo <?=size2(90)?> rows=18 class=textarea style=width:99%><?=$memo?></textarea> <textarea name=memo id="ir1" <?=size2(90)?> rows=18 class=textarea style='width:99%;'><?=$memo?></textarea> 7. 작성완료 부분을 아래처럼 이벤트를 추가해주세요. <input type=image src=<?=$dir?>/submit.gif accesskey="s" onfocus='this.blur()' alt=확인 onClick="_onSubmit(this);"> 8. 제일 하단에 아래의 소스를 추가합니다. (진한 부분의 소스는 클립보드에 복사하는 소스로 필요없으시면 삭제하시면 됩니다.) <script> var oEditors = []; nhn.husky.EZCreator.createInIFrame(oEditors, "ir1", "SmartEditor/SEditorSkin.html", "createSEditorInIFrame"); // var oEditors = []; // 마지막 옵션은 체감 속도 증진을 위해서 페이지 로딩 완료시 까지 화면 표시를 하지 않는 옵션 입니다. // 개발 작업시에는 이 값을 false로 설정 하세요. // nhn.husky.EZCreator.createInIFrame(oEditors, "ir1", "SmartEditor/SEditorSkin.html", "createSEditorInIFrame", null, true); // 복수개의 에디터를 생성하고자 할 경우, 아래와 같은 방식으로 호출하고 oEditors.getById["ir2"]이나 oEditors[1]을 이용해 접근하면 됩니다. // nhn.husky.EZCreator.createInIFrame(oEditors, "ir2", "SEditorSkin.html", "createSEditorInIFrame", null, true); function pasteHTMLDemo(){ sHTML = "<span style='color:#FF0000'>이미지 등도 이렇게 삽입하면 됩니다.</span>"; oEditors.getById["memo"].exec("PASTE_HTML", [sHTML]); } function showHTML(){ alert(oEditors.getById["memo"].getIR()); } function _onSubmit(elClicked){ // 에디터의 내용을 에디터 생성시에 사용했던 textarea에 넣어 줍니다. oEditors.getById["ir1"].exec("UPDATE_IR_FIELD", []); <? if(!$member[no]) { ?> if(!document.getElementById("name").value) {return false;} if(!document.getElementById("password").value) {return false;} <? } ?> <? if($setup[use_category]) { ?> var myindex=document.writｅ.category[1].selectedIndex; if (myindex<1) { alert('카테고리를 선택해 주세요.'); return false; } <? } ?> if(!document.getElementById("subject").value) {return false;} if(!document.getElementById("ir1").value) {alert('내용을 입력해 주세요.');return false;} var buf = document.getElementById("ir1"); var Range = buf.createTextRange (); Range.execCommand ("Copy"); alert("작성하신 글이 클립보드에 복사되었습니다."); // 에디터의 내용에 대한 값 검증은 이곳에서 document.getElementById("ir1").value를 이용해서 처리하면 됩니다. try{ elClicked.form.submit(); }catch(e){} } </script> 9. 스마트에디터를 잘 적용하기위해서 스타일을 적용시켜주어야 합니다. 스킨의 setup.php를 열고 아래와 같이 수정합니다. (또는 style.css파일에 해당 항목만 추가를 하셔도 됩니다. 아래의 팁은 해당 style.css파일만 수정하는 방법입니다.) .smartOutput{ font-size:12px; line-height:1.6; font-family:굴림, AppleGothic, Sans-serif;} /* 스마트 에디터의 풍부한 표현이 정상적으로 출력되도록 하려면 콘텐츠가 출력되는 곳에 이 클래스를 적용하여야 한다. 예를 들면 게시물 읽기 페이지의 본문이 이에 해당된다. */ .smartOutput p{ margin-top:7px; margin-bottom:7px;} .smartOutput blockquote.q1, .smartOutput blockquote.q2, .smartOutput blockquote.q3, .smartOutput blockquote.q4, .smartOutput blockquote.q5, .smartOutput blockquote.q6, .smartOutput blockquote.q7{ padding:10px; margin-left:15px; margin-right:15px;} .smartOutput blockquote.q1{ padding:0 10px; border-left:2px solid #ccc;} .smartOutput blockquote.q2{ padding:0 10px; background:url(../img/bg_qmark.gif) no-repeat;} .smartOutput blockquote.q3{ border:1px solid #d9d9d9;} .smartOutput blockquote.q4{ border:1px solid #d9d9d9; background:#fbfbfb;} .smartOutput blockquote.q5{ border:2px solid #707070;} .smartOutput blockquote.q6{ border:1px dashed #707070;} .smartOutput blockquote.q7{ border:1px dashed #707070; background:#fbfbfb;} .smartOutput sup{ font:10px Tahoma;} .smartOutput sub{ font:10px Tahoma;} .smartOutput table td{ padding:4px;} 이 소스를 style.css파일에 붙여넣습니다. 또는 setup.php파일(또는 view.php파일)에서 <link rel="stylesheet" type="text/css" href="../../SmartEditor/css/style.css" /> 이런 식으로 해주시면 되겠죠. 10. 그리고나서 스킨의 view.php파일을 열고, <?=$memo?>를 찾아줍니다. 아마 이 변수는 테이블에 둘러쌓여 있는데, 여기에 클래스를 지정해주시면 됩니다. <td><?=$memo?></td>인 경우 <td class="smartOutput"><?=$memo?></td> 11. 잘 적용이 되었는지 테스트해보시기 바랍니다. 기타 문의사항은 Web Q&A에 올려주시기 바랍니다. 진도 프레임웍은 이 곳에서 다운로드 : http://dev.naver.com/projects/jindo/download 태그가 적용이 안되신다면, 게시판 설정에서 html 사용권한의 레벨을 확인해보세요~ http://dev.naver.com/projects/smarteditor/download 인쇄하기 덧글(2) Commented by epikfan.co at 2009-07-29 08:50:32 감사합니다^6 다른님들 거 보면 계속 내용입력하라그러는데 작성완료가 문제였군요^^ 아무튼 감사합니다^6 IP 115.161.76.XXX Commented by fuzzionkai at 2009-10-30 12:44:50 안녕하세요. 올려주신 방법 보고 잘 올렸는데요. 이미지박스는 삽입이 안되요. --; 하하. 좀더 공부해야겠어요

원본

이온디 13년 전

간단히 말하면 웹기반의 ui프레임웍입니다. 기존 웹기반의 프레임웍과 다른 점은 HTML5에 특화된 프레임웍이라는 점입니다. 그래서 구시대적인 table을 사용하지않았습니다. 센챠나 제이쿼리모바일보다는 좀더 낮은단계의 프레임웍입니다. 좀더 기초적인 부분의 유아이 엔진을 원하신다면 부트스트랩을 권합니다. (참고로 백본은 세트로 써야합니다.) http://twitter.github.com/bootstrap/index.html 부트스트랩이란? 출처 : h… 간단히 말하면 웹기반의 ui프레임웍입니다. 기존 웹기반의 프레임웍과 다른 점은 HTML5에 특화된 프레임웍이라는 점입니다. 그래서 구시대적인 table을 사용하지않았습니다. 센챠나 제이쿼리모바일보다는 좀더 낮은단계의 프레임웍입니다. 좀더 기초적인 부분의 유아이 엔진을 원하신다면 부트스트랩을 권합니다. (참고로 백본은 세트로 써야합니다.) http://twitter.github.com/bootstrap/index.html 부트스트랩이란? 출처 : http://martian36.tistory.com/1142 트위터 부트스트랩은 웹디자인을 쉽게하기 위해서 CSS의 클래스 선택자에 정의된 스타일시트와 자바스크립트 플러그인의 라이브러리입니다. html로 웹페이지의 뼈대를 만들고 스타일시트에서 레이아웃을 만들기 위한 CSS의 속성과 값을 입력하는 대신 미리 정의된 클래스 선택자를 html 코드에 삽입만 하면 레이아웃과 각종 요소가 만들어집니다. 부트스트랩의 스타일시트는 7000여 라인으로 만들어져 있어서 웹페이지를 만들기 위한 거의 모든 요소에 대해서 정의를 해놓았기 때문에 손쉽게 웹사이트를 만들 수 있는 플랫폼으로 큰 인기를 얻고 있습니다. 웹사이트를 너무 쉽게 만들 수 있다는 점에서 진정한 웹디자인이 아니라는 우려의 목소리도 나올 정도입니다. 스타일시트의 재활용 스타일시트로 웹디자인을 하다보면 수많은 선택자에 CSS 속성과 값이 선언돼있습니다. 스타일시트를 다뤄본 분이라면 아이디 선택자 보다는 클래스 선택자를 사용하는 것이 훨씬 편리하다는 것을 알게 됩니다. 왜냐하면 한번 선언해 놓으면 여러 곳에서 재사용이 가능하기 때문이죠. 하나의 클래스 선택자를 만들고 이 선택자에 대해서 버튼을 만들어 놓으면 버튼이 필요한 곳에 이 선택자를 사용하면 됩니다. 색상 변경이 필요할 경우 다른 선택자를 이용해 배경 색상만 변경해주면 되겠죠. 다음과 같이 저장 버튼을 위한 클래스 선택자를 만들고 버튼을 위한 속성과 값을 선언했습니다. <button class="save">저장하기</button> .save { background: #ddd; padding: 5px 10px; border-radius: 5px; border: 1px solid #999; color: #333; text-shadow:1px 1px 1px #fff; } 그러면 위에서 선언된 대로 웹페이지에는 버튼이 만들어질 것입니다. 그런데 위의 .save라는 선택자는 특수한 경우에 사용되는 단어가 됩니다. 즉 저장할 버튼에만 사용될 것을 예상할 수 있습니다. 그러면 이 선택자의 이름을 일반적인 용어를 사용해서 .button이라고 만들어주면 다른 웹페이지에서 버튼을 만들고자 할 때 이 선택자를 넣어주면 될 것이고 단지 저장하기 버튼에만 사용하는 것이 아니라 어떤 곳에서도 재활용이 가능해질 것입니다. <button class="button">저장하기</button> .button { background: #ddd; padding: 5px 10px; border-radius: 5px; border: 1px solid #999; color: #333; text-shadow:1px 1px 1px #fff; } 그런데 버튼의 색상을 변경해서 적용하고자 할 경우 다음과 같이 할 것입니다. <button class="button-blue">저장하기</button> .button-blue { background: #08c; padding: 5px 10px; border-radius: 5px; border: 1px solid #999; color: #fff; text-shadow:1px 1px 1px #333; } 그런데 위의 버튼을 보면 공통적으로 적용되는 곳이 있습니다. .blue-button에는 .button이라는 선택자에 이미 있는 속성이 있으니 다음과 같이 수정하고 두개의 선택자를 사용하면 같은 버튼이 나타나면서 코드의 양은 줄어들게 됩니다. <button class="button button-blue">저장하기</button> .button-blue { background: #08c; border: 1px solid #999; color: #fff; text-shadow:1px 1px 1px #333; } 녹색 버튼을 만들고자 하면 이미 만들어놓은 두개의 선택자에 새로운 선택자를 추가하고 배경 색상만 변경해서 적용하면 될 것입니다. <button class="button button-blue button-green">저장하기</button> .button-green { background: #51a351; } 간단한 예를 들었지만 이것이 복잡한 형태의 그래디언트 효과나 박스 그림자 효과 등 여러가지가 추가된다면 이러한 방식의 스타일시트 재활용이 아주 편리해질 것입니다. 트위터 부트스트랩의 스타일시트는 이러한 이미 선언해 놓은 속성과 값을 재활용하기 쉽게 만들어놓은 스타일시트 라이브러리입니다. 위와 같은 버튼 뿐만 아니라 form에 사용되는 각종 태그, 아이콘, 드랍다운 메뉴 등 웹페이지에 사용되는 모든 요소에 대해서 스타일시트를 미리 만들어 놓고 html 페이지의 태그에 선택자만 삽입하면 모든 디자인이 자동으로 만들어지도록 해놓은 것입니다. 부트스트랩은 이처럼 간단하게 선택자만 삽입해도 웹페이지가 멋지게 만들어지지만 기능을 확장시키기 위해서 자바스크립트를 사용하고 있습니다. 그 기능이란 팝업창, 드랍다운 메뉴, 툴팁, 이미지 슬라이더, 등 가장 많이 사용하는 자바스크립트가 포함돼있으며 버전이 높아지면서 기능이 추가되고 있습니다. 부트스트랩이 나타난 배경 웹개발 시 하나의 프로젝트는 한사람에 의해 만들어지는 것이 아니라 개발자의 취향에 따라 도구도 다르고 자신만의 라이브러리를 사용하기도 해서 서로 다른 인터페이스를 사용한 여러 사람들의 공동작업으로 이루어집니다. 그러면 디자인도 달라지고 관리하기도 힘들죠. 트위터의 개발자인 마크 오토(Mark Otto)와 제이콥 쏜튼(Jacob Thornton)은 이러한 다른 인터페이스에서 오는 관리상의 어려운 점을 개선하기 위해서 정형화된 인터페이스를 가진 툴을 만들었습니다. 정식으로 만들어진 것이 아니라 처음에는 주말과 가외 시간을 이용해서 1년동안 작업을 해서 다른 개발자들에게 선보였는데 반응이 좋아 많은 개발자들이 사용하기 시작했고 단순한 툴이 아닌 플랫폼으로 발전했습니다. http://twitter.github.com/bootstrap/index.html 2011년 8월에 트위터는 부트스트랩을 오픈소스로 공개했습니다. 그 반응은 폭발적이어서 오픈소스 웹하드 서비스인 깃허브(Github)에서 최고의 인기를 얻고 있으며 부트스트랩과 관련된 프로젝트는 현재 수백개에 이르고 있습니다. http://www.bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources 위 링크로 가면 아래의 화면이 나오는데 현재 268개의 프로젝트가 부트스트랩과 관련돼 있습니다. 위 사이트에 있는 것만이 아니라 다른 프로젝트도 많이 있으며 새롭게 발견되는 대로 추가되고 있습니다. 왜 이런 프로젝트들이 부트스트랩과 관련을 맺으려고 할까요? 그만큼 부트스트랩이 획기적인 플랫폼이라는 것을 증명하는 것입니다.

원본

이온디 13년 전

XE 구문법과 신문법에 대한 팁을 올리려고 보니깐 올해 초 2013년 2월에 'cond 사용법'이란 제목으로 질문을 올린 적이 있군요. 두 달이 지난 이제는 어느 정도 사용이 익숙해질 정도로 아주 쉬운 문법입니다. XE 구문법과 신문법에 대해 예제를 보여드리고 간략히 설명해드리겠습니다. 구문법  <address class="copyright"> {$conf->copyright} <address class="copyright"> {$conf->copyright}Copyright © 2013 eond.com All rights reserved.<span style="border-left:1px solid #DDDDDD;padding-left:10px;margin-left:10px;">Powered by XpressEngine</span> </address> <div>{$conf->copyright_description}본 스태블리쉬 스킨은 이온디에서 제작되었습니다. 사용을 원하시는 분은 <a href="http://eond.com">이온디 홈페이지</a>에서 문의해주시기 바랍니다.</div> 신문법 <address class="copyright" cond="!$conf->copyright">Copyright © 2013 eond.com All rights reserved.<span style="border-left:1px solid #DDDDDD;padding-left:10px;margin-left:10px;">Powered by XpressEngine</span></address> <address class="copyright" cond="$conf->copyright">{$conf->copyright}</address> <div cond="!$conf->copyright_description">본 스태블리쉬 스킨은 이온디에서 제작되었습니다. 사용을 원하시는 분은 <a href="http://eond.com">이온디 홈페이지</a>에서 문의해주시기 바랍니다.</div> <div cond="$conf->copyright_description">{$conf->copyright_description}</div> 위 두 개의 사용 예제는 동일한 구조를 나타냅니다. 구 문법은 php에서와 같이 if else 구문이고, 신문법은 cond를 사용한 조건문입니다. cond는 condition의 약자일테고요. 두 방법은 동일한 표현을 나타냅니다만 cond는 좀 더 구조적인 큰 틀일 경우 알맞겠고, 위 경우에서는 간단하게 if else 문법으로 텍스트를 나타내는 것이 알맞을 것입니다. 또 다시 div 위에 cond 문법을 사용하여 보여지고 감추고 하는 것을 표현할 때도 그게 알맞고요. 이 밖에 좀 더 자세한 사용이나 다양한 활용에 대해서 알고 싶으신 분은 아래 글을 읽어보시는 것도 아주 큰 도움이 됩니다. http://www.layoutskin.com/advanced/21081 http://blog.naver.com/sunghwa777?Redirect=Log&logNo=100123737304 http://www.xpressengine.com/tip/21368316 http://blog.naver.com/posguide?Redirect=Log&logNo=120156815803 cond 잘 사용하면 편하게 만들수 있을 것 같은데 너무 어렵네요. cond를 이용하여 메뉴를 구성하고 싶은데 어디서 배울 데 없을까요? cond 등 XE 레이아웃을 제작하려면 간단한 문법 정도는 숙지해야 합니다. XE 사용자 메뉴얼 http://www.study4you.kr/xe/homepage http://jobdahan.net/index.php?_filter=search&mid=zbxe_tip_tech&search_keyword=%EB%AA%A8%EB%93%88&search_target=title&document_srl=1330440 http://www.postview.co.kr/634 http://www.egday.net/xetip http://blog.naver.com/sunghwa777?Redirect=Log&logNo=100123753433 # 작성일 2013.2.11 # 수정일 2013.4.7

원본

운

이온디 16년 전

I`ll Be A Virgin, I`ll Be A Mountain (드라마 `커피프린스 1호점` 삽입곡)-Maximilian Hecker 2 파란의 세월 [주몽 OST (Memory Of Love)]-V.A. 3 Dark-테일즈위버 4 白日夢 (백일몽) [주몽 OST (Memory Of Love)]-V.A. 5 운명의 칼 [주몽 OST]-V.A. 6 얼음연못-두번째 달 7 돌이킬 수 없는 걸음 (No Path Back)-장화홍련 쓰리 김민종, 손지창 - 그대와 함께 (… I`ll Be A Virgin, I`ll Be A Mountain (드라마 `커피프린스 1호점` 삽입곡)-Maximilian Hecker 2 파란의 세월 [주몽 OST (Memory Of Love)]-V.A. 3 Dark-테일즈위버 4 白日夢 (백일몽) [주몽 OST (Memory Of Love)]-V.A. 5 운명의 칼 [주몽 OST]-V.A. 6 얼음연못-두번째 달 7 돌이킬 수 없는 걸음 (No Path Back)-장화홍련 쓰리 김민종, 손지창 - 그대와 함께 (느낌 주제가) 김민종 - 친구를 위해 김민종 - 친구를 위해 [가사보기] 김민종 - 친구를 위해 [가사닫기] 1. 하늘위로 날아가는 새들은 자유로운 날개짓을 하며 말이 없는 내 마음을 아는지 작은 내 모습 위로 날아가네 다가가면 멀어지는 사람들 사랑하는 그대마저 떠난 밤이 오는 노을아래 서 있는 나는 홀로 이렇게 울고 있네 다른 세상으로 떠나가고 싶지만 나의 곁에 다가와준 내 친구는 힘이 들어도 꿈을 찾고 있었지 어떤 날은 버려진 나를 위해서 2. 지난 나의 마지막 무대 위에 섰을 때 내 이름을 부르던 사람들은 떠나고 그런 나의 모습에 그댄 사라져 갔어 초라해진 사랑에 많이 아파했지만 *이젠 나의 꿈들을 찾아 떠나야겠어 그 누구나 새로운 많은 날이 있잖아 나의 꿈을 찾아서 다시 노래할꺼야 언제까지 변하지 않는 나의 친구와 노래가 끝나가는 지금 내 곁엔 나를 보는 친구가 있네...... Sweet Love (Full Ver.) - 최한별, 이인우 우리 비 그치면 산책할까 - 스웨터 만약에 우리 (Original Bossa Nova Ver.) [연애시대 OST]-진호 A Waltz For A Night-Julie Delpy Who Needs You-Delia Caprice

원본

운

이온디 17년 전

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-KR"> <meta http-equiv=cache-control content=no-cache> <meta http-equiv=pragma content=no-cache>  <title>반응 좋은 메뉴 스크립트</title> <script type="text/javascript" l… <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-KR"> <meta http-equiv=cache-control content=no-cache> <meta http-equiv=pragma content=no-cache>  <title>반응 좋은 메뉴 스크립트</title> <script type="text/javascript" language="javascript"> //<![CDATA[ var subMPrefix = 'sub'; var openLayer = null; function mouseOut(e, mainObj, subObjNo){ subObj = document.getElementById(subMPrefix + subObjNo); if (!e) var e = window.event; var coord = getObjCoordinates(mainObj); var mouse = getMouseXY(e); if(mouse.x < coord.x || mouse.x > coord.x + coord.w || mouse.y < coord.y|| mouse.y > coord.y + coord.h) { hideLayer(subObj); } } function getObjCoordinates(obj) { var result = new Object(); result.x = getOffsetLeft(obj); result.y = getOffsetTop(obj); result.w = obj.offsetWidth; result.h = obj.offsetHeight; return result; } function getMouseXY(e) { if (!e) var e = window.event; var result = new Object(); result.x = document.all ? event.clientX + (document.body.scrollLeft == 0 ? document.documentElement.scrollLeft : document.body.scrollLeft) : e.pageX; result.y = document.all ? event.clientY + (document.body.scrollTop == 0? document.documentElement.scrollTop : document.body.scrollTop) : e.pageY; return result; } function checkMouse(e) { if (openLayer != null) { if (!e) var e = window.event; var tg = (window.event) ? e.srcElement : e.target; var obj = openLayer.parentNode; while (tg && tg != obj && tg.nodeName != 'BODY') { tg= tg.parentNode; } if (tg == obj) { return; } else { hideLayer(openLayer); openLayer = null; } } } function getOffsetLeft (el) { var ol = el.offsetLeft; while ((el = el.offsetParent) != null) { ol += el.offsetLeft; } return ol; } function getOffsetTop (el) { var ot = el.offsetTop; while((el = el.offsetParent) != null) { ot += el.offsetTop; } return ot; } function showLayer(objNo) { obj = document.getElementById(subMPrefix + objNo); obj.style.display = 'block'; openLayer = obj; } function hideLayer(obj) { obj.style.display = 'none'; } // function addEvent( obj, type, fn ) { if (obj.addEventListener) { obj.addEventListener( type, fn, false ); EventCache.add(obj, type, fn); } else if (obj.attachEvent) { obj["e"+type+fn] = fn; obj[type+fn] = function() { obj["e"+type+fn]( window.event ); } obj.attachEvent( "on"+type, obj[type+fn] ); EventCache.add(obj, type, fn); } else { obj["on"+type] = obj["e"+type+fn]; } } var EventCache = function(){ var listEvents = []; return { listEvents : listEvents, add : function(node, sEventName, fHandler){ listEvents.push(arguments); }, flush : function(){ var i, item; for(i = listEvents.length - 1; i >= 0; i = i - 1){ item = listEvents[i]; if(item[0].removeEventListener){ item[0].removeEventListener(item[1], item[2], item[3]); }; if(item[1].substring(0, 2) != "on"){ item[1] = "on" + item[1]; }; if(item[0].detachEvent){ item[0].detachEvent(item[1], item[2]); }; item[0][item[1]] = null; }; } }; }(); addEvent(window,'unload',EventCache.flush); // addEvent(document,'mousemove',checkMouse); //]]> </script>  <style type="text/css"> /*<![CDATA[*/ body { font-size: 9pt; margin:0; padding:50px 0 0;} #mWrap { position:absolute; } .mainM { float: left; background: #eee; border:1px solid #333; width: 150px; padding: 6px 4px 0; margin: 0 2px; } .subM { margin: 8px 0; display:none; } .subM div { background: #ddd; margin: 6px 0 6px 20px; padding: 6px; border:1px solid #333;} .subM div div div{ background: #999; margin: 6px 0 6px 20px; padding: 6px; border:1px solid #333; } .mainM1 { background: #eee; border:1px solid #333; width: 150px; padding: 6px 4px 0; margin: 0 2px; border-bottom: 0px;} .lastM { border-bottom: 1px solid #333;} .subM1 { margin: 8px 0; display:none; } .subM1 div { background: #ddd; margin: 6px 0 6px 20px; padding: 6px; border:1px solid #333;} .subM1 div div div{ background: #999; margin: 6px 0 6px 20px; padding: 6px; border:1px solid #333; } div.clear { clear: both; height:0px; font-size:0px; } /*]]>*/ </style> </head> <body> <table align="center" width="90%" height="90%" cellspacing="0" border="1" cellpadding="0"> <tr> <td height="30" valign="top"> <div id="mWrap"> <div class="mainM" onmouseover="showLayer(1)" onmouseout="mouseOut(event, this, 1)">메인메뉴1 <div class="subM" id="sub1"> <div><a href="#">서브메뉴1</a></div> <div><a href="#">서브메뉴1</a></div> <div><a href="#">서브메뉴1</a></div> </div> </div> <div class="mainM" onmouseover="showLayer(2)" onmouseout="mouseOut(event, this, 2)">메인메뉴2 <div class="subM" id="sub2"> <div><a href="#">서브메뉴2</a></div> <div><a href="#">서브메뉴2</a></div> <div><a href="#">서브메뉴2</a></div> </div> </div> <div class="mainM" onmouseover="showLayer(3)" onmouseout="mouseOut(event, this, 3)">메인메뉴3 <div class="subM" id="sub3"> <div><a href="#">서브메뉴3</a></div> <div><a href="#">서브메뉴3</a></div> <div><a href="#">서브메뉴3</a></div> </div> </div> <div class="mainM" onmouseover="showLayer(4)" onmouseout="mouseOut(event, this, 4)">메인메뉴4 <div class="subM" id="sub4"> <div><a href="#">서브메뉴4</a></div> <div><a href="#">서브메뉴4</a></div> <div><a href="#">서브메뉴4</a></div> </div> </div> <div class="clear"></div> </div> </td> </tr> <tr> <td height="100%"> <div id="mWrap"> <div class="mainM1" onmouseover="showLayer(11)" onmouseout="mouseOut(event, this, 11)">메인메뉴1 <div class="subM1" id="sub11"> <div><a href="#">서브메뉴11</a></div> <div><a href="#">서브메뉴11</a></div> <div><a href="#">서브메뉴11</a></div> </div> </div> <div class="mainM1" onmouseover="showLayer(21)" onmouseout="mouseOut(event, this, 21)">메인메뉴2 <div class="subM1" id="sub21"> <div><a href="#">서브메뉴21</a></div> <div><a href="#">서브메뉴21</a></div> <div><a href="#">서브메뉴21</a></div> </div> </div> <div class="mainM1" onmouseover="showLayer(31)" onmouseout="mouseOut(event, this, 31)">메인메뉴3 <div class="subM1" id="sub31"> <div><a href="#">서브메뉴31</a></div> <div><a href="#">서브메뉴31</a></div> <div><a href="#">서브메뉴31</a></div> </div> </div> <div class="mainM1 lastM" onmouseover="showLayer(41)" onmouseout="mouseOut(event, this, 41)">메인메뉴4 <div class="subM1" id="sub41"> <div><a href="#">서브메뉴41</a></div> <div><a href="#">서브메뉴41</a></div> <div><a href="#">서브메뉴41</a></div> </div> </div> <div class="clear"></div> </div> </td> </tr> </table> </body> </html>

원본

운

이온디 18년 전

바쁜 사람들도 굳센 사람들도 바람과 같던 사람들도 집에 돌아오면 아버지가 된다. 어린 것들을 위하여 난로에 불을 피우고 그네에 작은 못을 박는 아버지가 된다. 저녁 바람에 문을 닫고 낙엽을 줍는 아버지가 된다. 세상이 시끄러우면 줄에 앉은 참새의 마음으로 아버지는 어린 것들의 앞날을 생각한다. 어린 것들은 아버지의 나라다 아버지의 동포(同胞)다. 아버지의 눈에는 눈물이 보이지 않으나 아버지가 마시는 술에는 항상 보이지 않는 눈물이 절반이다. 아버지는 가장 … 바쁜 사람들도 굳센 사람들도 바람과 같던 사람들도 집에 돌아오면 아버지가 된다. 어린 것들을 위하여 난로에 불을 피우고 그네에 작은 못을 박는 아버지가 된다. 저녁 바람에 문을 닫고 낙엽을 줍는 아버지가 된다. 세상이 시끄러우면 줄에 앉은 참새의 마음으로 아버지는 어린 것들의 앞날을 생각한다. 어린 것들은 아버지의 나라다 아버지의 동포(同胞)다. 아버지의 눈에는 눈물이 보이지 않으나 아버지가 마시는 술에는 항상 보이지 않는 눈물이 절반이다. 아버지는 가장 외로운 사람이다. 아버지는 비록 영웅(英雄)이 될 수도 있지만……. 폭탄을 만드는 사람도 감옥을 지키던 사람도 술가게의 문을 닫는 사람도 집에 돌아오면 아버지가 된다. 아버지의 때는 항상 씻김을 받는다. 어린 것들이 간직한 그 깨끗한 피로……. 가족에 대한 아버지의 사랑과 고독을 노래한 김현승(金顯承)의 시. 발표 1970년 김현승의 제4시집 《절대 고독》(1970)에 수록되어 있다. 기독교적 세계관을 바탕으로 가족간의 사랑과 희생이라는 평범한 삶의 진실을 일상적 시어로 담담하게 그려낸 작품이다. 가족에 대한 아버지의 사랑을 주된 모티프로 하고 있지만 그 이면에는 끊임없는 자기성찰을 통해서 인간본연의 순수함을 잃지 말아야 한다는 작가의 인생관이 자리하고 있음을 알 수 있다. 전7연으로 이루어진 자유시로 내재율을 지니고 있다. 시의 제재는 아버지이며, 주제는 아버지의 가족에 대한 사랑의 마음과 인생에 대한 고독감이라고 할 수 있다. 고백적·서정적 성격의 서정시로서, 비유적·상징적 심상이 주조를 이룬다. 표현상의 특징으로는 평이한 시어를 통해 친근감을 느끼게 한 점과 반복법과 열거법을 사용해 아버지의 사랑과 외로움을 구체적으로 표현한 점을 들 수 있다. 제1연에서는 집과도 같은 존재인 아버지에 대해 이야기한다. 제2연과 3연에서는 가족을 배려하는 자상한 아버지의 모습을 언급한다. 제4연에서는 가족의 앞날을 염려하는 아버지의 모습을 그려낸다. 제5연에서는 고독한 아버지의 모습이 반추된다. 제6연과 7연에서는 가족에게서 위안받는 아버지의 모습이 그려진다. 특히 제7연은 이 시의 핵심연으로 아버지의 노고와 깊은 고독은 오직 자식들의 순수하고 올곧은 성장으로 보상받을 수 있음을 이야기한다. 이 시는 존재의 고독과 구원을 주로 노래한 김현승의 후기작품으로, '아버지의 고독'이라는 시제를 붙여도 어색하지 않을 작품이다. 아버지라는 존재를 대상으로 삼아 절망적인 고독이 아닌, 인생을 재발견하기 위한 삶의 가치로서의 고독을 탐구함으로써, 시적 사유의 깊이를 잘 보여주는 지성적·철학적인 시로 평가된다. 주제와 제재면에서 이 시와 매우 유사한 작품으로 박목월(朴木月)의 시 《가정》을 들 수 있다.

원본

운

이온디 18년 전

포토샵에서는 열린 그래픽 이미지에서 사용된 칼라들을 저장되고 보이는 테이블 칼라를 사용합니다. 만약 모니터가 256 색상들만을 지원한다면 아도브 포토샵에서는 지금 사용되지 않은 칼라들을 비슷하게 하는 유용한 칼라들의 픽셀들로 섞는 디더링이라고 불리 우는 기술을 사용합니다. 기본적으로 아도브 포토샵에서는 이미지에서 더 밝고 혹은 더 어두운 영역들의 차이를 나타내는 패턴으로 나타나는 패턴 디더링을 사용합니다. 대비하여 디퓨젼 디더링은 픽셀 칼라를 섞어 주위의 픽셀들을 사용함으로써 구별하여… 포토샵에서는 열린 그래픽 이미지에서 사용된 칼라들을 저장되고 보이는 테이블 칼라를 사용합니다. 만약 모니터가 256 색상들만을 지원한다면 아도브 포토샵에서는 지금 사용되지 않은 칼라들을 비슷하게 하는 유용한 칼라들의 픽셀들로 섞는 디더링이라고 불리 우는 기술을 사용합니다. 기본적으로 아도브 포토샵에서는 이미지에서 더 밝고 혹은 더 어두운 영역들의 차이를 나타내는 패턴으로 나타나는 패턴 디더링을 사용합니다. 대비하여 디퓨젼 디더링은 픽셀 칼라를 섞어 주위의 픽셀들을 사용함으로써 구별하여 패턴을 제거합니다. 그러나 만약 보여 지는 이미지의 부분을 스크롤하거나 편집한다면 디퓨젼 디더링은 모니터에서 보여 지는 칼라 정보가 부정확하게 되는 요인이 됩니다. 디더링 효과는 프린터가 아니고 오직 스크린에서만 보여준다는 것을 기억하셔야 합니다. 모니터가 256 칼라들만 보여 주거나 디퓨젼 디더링을 사용한다면 다음과 같은 단계를 실행합니다. 1. Edit 메뉴의 Preferences를 선택하고 Display & Cursors 옵션을 선택합니다. Display & Cursors 대화상자가 열립니다. 2. Use Diffusion Dither 옵션에 위치시키고 활성화 상자를 클릭합니다. 박스에서 체크 박스를 볼 수 있습니다. 3. OK 버튼을 클릭합니다. 그러면 Display & Cursors 대화상자가 닫치게 될 것입니다. 만약 모니터가 24 비트 칼라 즉 수백만 칼라를 지원하다면, Use Diffusion Dither 옵션을 사용할 필요가 없습니다. 이 정보는 kimash0님의 블로그에서 가져온 글임을 밝힙니다. http://blog.naver.com/kimash0/11919487

원본

운

이온디 18년 전

2. 파일설명이어서 갑니다. 2-3. login_form.xml 작업 중에 보니깐 너무 이상해서.. login_form.xml 파일을 수정 간단하게 하고 가겠습니다. login_info.xml 파일은 이후에 더 자세히 하죠. 지금 만드는 로그인 위젯 스킨은 오픈아이디는 사용하지 않을 것이므로 홈페이지에서 관리 > 회원 > 기본설정에서 오픈아이디 사용안함에 체크하고 작업 시작하겠습니다. 물론 스킨 상에서 로그인 위젯을 보이지 않게 해도 됩니다. default.css 파일에서 open_id 부분… 2. 파일설명이어서 갑니다. 2-3. login_form.xml 작업 중에 보니깐 너무 이상해서.. login_form.xml 파일을 수정 간단하게 하고 가겠습니다. login_info.xml 파일은 이후에 더 자세히 하죠. 지금 만드는 로그인 위젯 스킨은 오픈아이디는 사용하지 않을 것이므로 홈페이지에서 관리 > 회원 > 기본설정에서 오픈아이디 사용안함에 체크하고 작업 시작하겠습니다. 물론 스킨 상에서 로그인 위젯을 보이지 않게 해도 됩니다. default.css 파일에서 open_id 부분에서 display:none; 이라고 추가해주시면 됩니다. 참고로 저도 로그인위젯스킨을 만들면서 설명드리는 것이니깐 읽으시는 분들이 길 헤매지 말고 잘 따라오세요. 1단계 들어갑니다. default.css 파일 수정합니다. ※ 참고, 볼드체는 수정한 부분입니다. 폼은 24 line.. .box_login .input { width:120px; background-color: #ffffff; border:1px solid #CECECE; padding:2px 2px 2px 5px; height:14px; margin:0px; cursor:text; color:#666666;font:10px verdana bold;} width값 등을 적당히 수정합니다. border-color:#a6a6a6 #d8d8d8 #d8d8d8 #a6a6a6; 를 빼주고 #CECECE 를 입력했습니다. (보더색상값: 상 우 하 좌 이렇게 시계순입니다.) 버튼은 23 line.. .box_logininput.submit { width:45px; height:45px;background:url(../images/default/login_btn_submit.gif) no-repeat;border:none; margin:9px 0 0 -5px; _margin:5px 0 0 0; cursor:pointer; } 버튼의 위치를 왼쪽으로 살짝 더 붙여줬습니다. 버튼 그림을 변경하고자하면 url 부분의 이미지를 새로 만들어서 같은 이름으로 올리면 되겠습니다. 하는 김에 테두리도 할까 말까.... 이미지로 처리해야할지, 아니면 CSS로 처리해야할지 고민인데..(__);; 우선 이미지부터 다 해보죠. 1. 이미지로 처리하기 재료는 싸이월드 홈2 로그인에 사용된 이미지를 사용하기로 합니다. 테두리에 사용된 이미지는 상단,하단,가운데 부분으로 총 3개의 이미지가 사용되었습니다. 상단이미지하단이미지가운데 이미지 가운데 이미지는 높이가 1픽셀이라 잘 안보여서 배경을 어둡게 처리했습니다. 위와 같은 재료를 사용하기 위해서는 DIV도 마찬가지 3개가 필요합니다. <DIV></DIV> 상단 <DIV></DIV> 가운데 <DIV></DIV> 하단 이런 식으로 말이죠. 네이밍은 아래와 같이 붙입니다. bg_personal_t bg_personal_m bg_personal_b 네이밍의 뜻은 아래와 같습니다. bg = BackGround personal = 개인정보 영역이므로.. t = Top m = Middle b = Bottom .bgPersonl_t {width:200px;height:10px;background: url(이미지주소);} .bgPersonl_m {{width:200px;height:100px;background: url(이미지주소);}} .bgPersonl_b {width:200px;height:10px;background: url(이미지주소);}} 와 같은 스타일시트 클래스명을 생성합니다. 그리고 각 div에 삽입합니다. ※ #bgPersonl_m 의 height 값은 알아서 주세요 <div class="bgPersonal_t"></div> 상단 <div class="bgPersonal_m"></div> 기존 로그인 부분이 이 안에 들어갑니다. <div class="bgPersonal_b"></div> 하단 자, 여기서 login_form.xml 파일의 소스를 살펴봅시다.        <div class="bgPersonal_t"></div> <div class="box_login fc_01 bgPersonal_m" id="box_login"> <form action="./" method="get" onsubmit="return procFilter(this, widget_login)" id="fo_login_widget"> <div class="form_field"> <div> <input name="user_id" type="text" class="input" id="login_form_user_id" /> </div> <div> <input name="password" type="password" class="input" /> </div> </div> <div><input type="submit" value=" " class="submit" /></div> <ul class="option"> <li><input type="checkbox" name="remember_user_id"id="chk_remember_user_id" value="Y" class="checkbox" /></li> <li><label for="chk_remember_user_id">{$lang->remember_user_id}</label></li> <li><a href="{getUrl('act','dispMemberSignUpForm')}"class="fc_02 btn">{$lang->cmd_signup}</a></li> </ul> </form> <div class="clear"></div> <script type="text/javascript"> xAddEventListener(window, "load", function(){ doFocusUserId("fo_login_widget"); }); </script> </div> <div class="bgPersonal_b"></div>   <div class="openid_login fc_01" id="box_login"> <form action="./" method="post" onsubmit="return procFilter(this, openid_login)" > <div class="wButtonWrite"> <ul> <li><input type="text" name="user_id" class="openid_user_id" /></li> <li><span class="wButtonTypeA"><imgsrc="/images/blank.gif" alt="" class="leftCap" /><inputtype="submit" value="{$lang->cmd_login}" accesskey="s" /><imgsrc="/images/blank.gif" alt="" class="rightCap"/></span></li> </ul> </div> </form> </div>  파란색, 초록색 굵은 글자 부분을 주목해서 봐주세요. bgPersonal_t, bgPersonal_b,bgPersonal_m 는 추가해준 부분입니다. box_login 이 두번째 기존로그인 부분인 것은 눈치채실 겁니다. 나머지는 상,하단이고요.. ※ 좀 더 설명해봅시다. id로 해도 되는데 스타일시트보니깐 class 로 다 되어있고 또 id로 해봤는데 뭘 빼먹었는지 왠지 잘 안되더군요. 해보다가 2번째 로그인박스에서 잘 안되서 class로 수정 작업했습니다. id는 #로 나타내고, class는 . 으로 표현합니다. .bgPersonal_t {width:200px;height:10px;background: url(../images/cyhome2/bg_personal_t.gif) no-repeat top;clear:both;} .bgPersonal_b {width:200px;height:10px;background: url(../images/cyhome2/bg_personal_b.gif) no-repeat top;clear:both;} .box_login .bgPersonal_m {width:200px;background: url(../images/cyhome2/bg_personal_m.gif) repeat top;clear:both;} ※ 주의할 점은 url 주소를 정확하게 입력해주세요. 그리고 bgPersonal_m의 위치는 box_login 안이므로 위와 같이 적어주셔야합니다. 이제 login_form.xml 파일은 이렇게 수정합니다. <div class="bgPersonal_t"></div> <div class="box_login fc_01 bgPersonal_m" id="box_login"> ... </div> <div class="bgPersonal_b"></div> 이렇게 login_info.xml 파일도 위와 같이 수정해주시면 됩니다. id와 class의 차이점은 class는 여러 지역에 여러번 써도 된다는 것이고, id는 한 곳에 한 번만 적어줘야합니다. ※ 위에서, 두번째 부분인 bgPersonal_m 클래스를 안만들고 css파일에서 .box_login 을 수정해줘도 됩니다. 이 부분은 위에서 이미 했으니 box_login은 수정 안하셔도 됩니다. 저는 두번째 bgPersonal_m 클래스 대신 box_login으로 대체했기에 수정합니다. default.css 9 line.. .box_login { border:solid 3px #D5D8DB; background:#FFFFFE; margin-bottom:10px;} 이제 우리는 네모 틀 테두리는 필요없으므로 저 굵은글씨 부분은 지워주셔도 됩니다. .box_login { border:solid 0px #D5D8DB; background:#FFFFFE; margin-bottom:10px;} 그냥 단순히 0px 으로 화면에 보이지 않도록 해주어도 됩니다. 저는 아래와 같이 해주었습니다. .box_login { background:url(../images/cyhome2/bg_personal_m.gif) #FFFFFE; } border는 지우고 background를 추가시켜줬습니다. 그리고 bgPersonal_b와 죽 이어져야 하니깐 margin-bottom:10px; 는 지워줬습니다. box_login에서 이 부분은 수정해주셔야합니다. margin-bottom은 말이죠. 안 그러면 마진값이 붙어서 아래 div와 떨어져보이거든요. 여기는 수정하고 지나가세요. 자, 이제 이렇게 완성이 되었습니다. 그런데 가만...... 확대해보겠습니다. 각 모서리에 의문의 #DDDDDD 선이 보입니다. 약간의 삽질을 했는데 원인은 모르겠고.. (아! 원인은 레이아웃 파일의 배경설정 때문이었네요. 여기서는 배경은 놔두지 않고 아래처럼 수정하는 방법으로 해결해보도록 합니다.) .bgPersonal_t{width:200px;height:10px;background:url(../images/cyhome2/bg_personal_t.gif)repeat-y #FFFFFF;border:0px;overflow:hidden;} .bgPersonal_b{width:200px;height:10px;background:url(../images/cyhome2/bg_personal_b.gif)no-repeat #FFFFFF;border:0px;overflow:hidden;} 최종적으로 위와 같이 해주었습니다. background:#FFFFFF 를 추가시켜줬더니 해결이 되더군요. :D box_login 도 보시자면 아래와 같습니다. .box_login { background:url(../images/cyhome2/bg_personal_m.gif) repeat-y #FFFFFE;} 자. 이렇게 해서 login_form.xml 파일은 완성~~~~~~~~~ 이제 login_info.xml 로그인 후의 화면이 남아있는데 바빠서 다음 내용은 다음 글을 확인해주세요.

원본

이온디 22년 전

수정 파일 : write.php 글쓰기 칸은 이처럼 가로 크기가 고정되어 있습니다. <textarea name=memo <?=size2(90)?> rows=20 padding:3px class=sb_contents><?=$memo?></textarea> 이 소스에서 <?=size2(90)?> 를 지워주시고 class를 이용하여 stylesheet에서 조정할 수 있습니다. <textarea name=memo rows=24 class=textarea2><?=$memo?></textarea> … 수정 파일 : write.php 글쓰기 칸은 이처럼 가로 크기가 고정되어 있습니다. <textarea name=memo <?=size2(90)?> rows=20 padding:3px class=sb_contents><?=$memo?></textarea> 이 소스에서 <?=size2(90)?> 를 지워주시고 class를 이용하여 stylesheet에서 조정할 수 있습니다. <textarea name=memo rows=24 class=textarea2><?=$memo?></textarea> 스타일시트에는 아래 소스를 추가해줍니다. .textarea2{border:solid 1;border-color:#dddddd;font-family:굴림;font-size:12px;color:#555555;background-color:#ffffff;width:100%;height:300px} (각 부분에 대한 설명은 하지 않겠습니다. 개인에 맞게 고쳐쓰실 수 있습니다.) * 정낙훈님에 의해서 게시물 이동되었습니다 (2004-05-22 08:50)

원본