#eee 41개의 스레드 ✕ 해제
이온디
이온디 1개월 전
시리즈 ← 이전 편 · 다음 편 → 바이브코딩의 위험성 ② — 범인은 autogenerate였다 1091줄짜리 시한폭탄을 만든 건 사람이 아니라 자동화 도구 자신이었다. — 시리즈 2편 / 진짜 원인 발견과 해체 작업 Alembic autogenerate가 그러는 이유 Alembic은 SQLAlchemy 기반 프로젝트의 마이그레이션 도구다. alembic revision --autogenerate라는 명령을 치면, 현재 모델 정의(SQLAlchemy Base.metadata)와 실제… 시리즈 ← 이전 편 · 다음 편 → 바이브코딩의 위험성 ② — 범인은 autogenerate였다 1091줄짜리 시한폭탄을 만든 건 사람이 아니라 자동화 도구 자신이었다. — 시리즈 2편 / 진짜 원인 발견과 해체 작업 Alembic autogenerate가 그러는 이유 Alembic은 SQLAlchemy 기반 프로젝트의 마이그레이션 도구다. alembic revision --autogenerate라는 명령을 치면, 현재 모델 정의(SQLAlchemy Base.metadata)와 실제 DB 스키마를 비교해서 그 차이를 마이그레이션 파일로 자동 생성해준다. 컬럼 추가, 인덱스 추가, 테이블 추가 같은 변경을 사람이 손으로 SQL을 적지 않아도 되게 해주는 편리한 도구다. 문제는 이 비교의 방향성이다. Alembic은 "모델에는 있는데 DB에 없는 것"을 추가 작업으로 인식하고, 동시에 "DB에는 있는데 모델에 없는 것"을 삭제 작업으로 인식한다. 후자가 함정이다. Base.metadata에 어떤 모델이 등록되지 않은 상태에서 autogenerate를 돌리면, 실제로는 코드 어딘가에 살아 있는 모델이라도 alembic 입장에선 "사라진 테이블"이 된다. 그러면 친절하게 op.drop_table('...')을 자동으로 만들어준다. alembic/env.py를 열어봤다. from app.models import document, member, comment, file, module, site_config, site from app.models import hosting_site, hosting_subscription, project, inquiry, member_profile from app.models import sale_product, order, revenue, settlement from app.models import project_issue, kakao_chat, project_billing, project_file, project_comment 손으로 적은 import가 21개. 그런데 app/models/ 디렉터리에는 모델 파일이 57개. 빠진 36개의 정체: audit_log.py bank_transaction.py blog_post.py client.py hosting_setup_log.py marketing.py notification_log.py spam.py wiki.py analytics_report.py module_group.py newsletter.py ... 폭탄 마이그레이션이 DROP하려던 그 테이블들이, 정확히 env.py에서 import 누락된 모델 파일들과 일치했다. .title { font-size: 22px; font-weight: 700; fill: #111; } .subtitle { font-size: 14px; fill: #666; } .label { font-size: 14px; fill: #222; font-weight: 500; } .num { font-size: 28px; font-weight: 700; } .small { font-size: 12px; fill: #555; } .bad { fill: #c83737; } .good { fill: #1f7a3f; } .arrow { stroke: #777; stroke-width: 1.6; fill: none; } .arrow-bad { stroke: #c83737; stroke-width: 1.8; fill: none; stroke-dasharray: 4 3; } .arrow-good { stroke: #1f7a3f; stroke-width: 1.8; fill: none; } .box { stroke: #ccc; stroke-width: 1; fill: #fff; rx: 8; } .box-bad { stroke: #e0a8a8; stroke-width: 1; fill: #fff5f5; rx: 8; } .box-good { stroke: #a8d4b8; stroke-width: 1; fill: #f3faf5; rx: 8; } .row-label{ font-size: 13px; fill: #888; font-weight: 600; letter-spacing: 1px; } env.py의 침묵하는 누락 손으로 적은 import 21개 vs 디렉터리에 실재하는 모델 57개 BEFORE — 사고 시점 app/models/ 57 실재 모델 파일 env.py 21 손으로 적은 import Base.metadata 21 등록된 테이블 autogenerate −36 DROP TABLE 자동 생성 metadata에 없는 36개 모델은 alembic 입장에서 "사라진 테이블"로 보임 → 1091줄짜리 폭탄 마이그레이션 파일이 자동 생성됨 AFTER — env.py 자동 import 적용 app/models/ 57 실재 모델 파일 env.py auto pkgutil.iter_modules Base.metadata 78 전체 자동 등록 autogenerate 0 false-DROP 차단 새 모델 파일을 추가해도 env.py에 손대지 않아도 됨 — 잊을 수 있는 자리 자체가 사라짐 env.py에 손으로 적은 21개 import vs 디렉터리에 실재하는 57개 모델 — 그 격차가 폭탄을 만든다. 원인 확정. 사람의 게으름이 아니라, 시스템 설계의 문제였다. 새 모델을 추가할 때마다 env.py에 한 줄을 손으로 더 적어야 하는 구조 자체가, 언젠가 누락이 생길 시한폭탄이었다. 백업이 가장 먼저 원인을 알았다고 해서 바로 수정 작업에 들어가면 안 된다. binlog가 꺼진 상태에서, 잘못된 한 줄이 더 큰 사고를 만들 수도 있다. 이번 작업의 모든 안전성은 현재 시점 백업 한 장에 달려 있었다. 백업 스크립트를 짜기 전에 한 가지 고려사항이 있었다 — eondcms는 트래픽이 꽤 있는 사이트라 카운터·통계·API 호출 로그 테이블 3개가 매우 크다. 이걸 그대로 풀 덤프하면 시간도 오래 걸리고 용량도 부담스럽다. 이 3개는 데이터는 빼고 스키마만 보존하기로 했다. 복원 후에도 빈 테이블 껍데기는 만들어져야 ORM이 INSERT를 시도할 때 에러가 나지 않으니까. 핵심 패턴은 단순하다. mysqldump를 두 번 호출해서 stdout을 이어붙인 뒤 한 번에 gzip으로 압축한다. 결과물은 단일 파일. { mysqldump --single-transaction --routines --triggers --events \ --default-character-set=utf8mb4 --hex-blob \ --ignore-table=$DB.xe_counter_log \ --ignore-table=$DB.xe_api_call_logs \ --ignore-table=$DB.xe_stats_log \ "$DB" mysqldump --no-data --default-character-set=utf8mb4 \ "$DB" xe_counter_log xe_api_call_logs xe_stats_log } | gzip > "$OUT_FILE" 스크립트 첫 줄에 set -euo pipefail을 박아두는 게 중요하다. 한 줄이라도 실패하면 즉시 멈추도록. 백업이 도중에 깨졌는데 "성공"이라고 착각하는 사고가 가장 흔하니까. 결과물은 압축 후 37MB. 압축 전 원본 기준 약 300~450MB 추정. 이걸 웹에서 절대 보이지 않는 디렉터리에 저장하는 것도 중요했다. 백업 파일에는 비밀번호 해시·세션 토큰·이메일 같은 민감정보가 그대로 들어 있어서, "private"이라는 이름의 디렉터리에 둔다고 해도 실제로 웹서버 설정이 막아주지 않으면 누구나 다운로드 가능하다. env.py 자동화 — 사람의 주의력에 의존하지 않기 이제 진짜 수정. env.py를 손으로 import 목록을 유지하는 방식이 사고의 근본 원인이라면, 답은 자동 import다. 새 모델 파일이 추가될 때마다 자동으로 등록되도록 바꾸면, 누구도 손으로 적는 걸 까먹을 수 없다. import importlib import pkgutil import app.models as _models_pkg for _info in pkgutil.iter_modules(_models_pkg.__path__): if _info.name.startswith("_") or _info.name == "base": continue importlib.import_module(f"app.models.{_info.name}") pkgutil.iter_modules는 패키지 안의 모든 모듈을 순회해주는 표준 라이브러리. 베이스 모듈만 제외하고 전부 import한다. 검증 결과 55개 모듈이 자동 로드되어 78개 테이블이 metadata에 등록되었다. 이전 21개 import로 잡지 못했던 36개 모델이 이번에 모두 합류했다. 이 변경 한 줄이 의미하는 바는 명확하다. 앞으로 누가 새 모델 파일을 만들어도 env.py를 손대지 않아도 된다. autogenerate가 잘못된 DROP을 만들 가능성이 구조적으로 차단된다. 폭탄 마이그레이션 무력화 남은 일은 1091줄짜리 폭탄을 어떻게 처리할 것인가였다. 선택지는 두 개: A. 파일 자체를 삭제 — 깔끔해 보이지만, alembic 입장에선 chain의 한 노드가 사라지는 것이라 후속 마이그레이션이 깨진다. B. 내용만 비우기 — revision과 down_revision 필드는 그대로 두고, upgrade()와 downgrade() 함수 본문을 pass로 교체한다. chain은 그대로, 동작만 무력화. B를 골랐다. 사고 경위와 신원 보존이 되는 주석을 헤더에 적어두고: """add_random_order_to_board_config (NEUTRALIZED) ⚠️ 이 마이그레이션은 의도적으로 비워졌습니다 (2026-04-28). 사고 경위: alembic env.py가 app/models/ 아래 일부 모델만 import하던 상태에서 --autogenerate 가 실행되어, 누락된 36개 모델이 "사라진 테이블"로 인식 → 30+ 테이블 DROP을 자동 생성한 1091줄짜리 폭탄 마이그레이션이 됨. """ def upgrade() -> None: pass def downgrade() -> None: pass 이 주석은 미래의 누군가가 — 6개월 뒤의 자기 자신을 포함해서 — "왜 이 파일이 비어있지?" 라고 물었을 때, 짧은 단서가 되어줄 것이다. 코드 자체가 자기 역사를 설명할 수 있어야 한다. 안전한 적용 절차 수정한 파일들을 production에 보내기 전, 한 가지 더 확인할 게 있었다. dry-run. alembic upgrade --sql은 offline 모드로 동작해서, DB에 연결조차 하지 않고 실행될 SQL을 텍스트로만 출력한다. 진짜 실행 전에 무엇이 production에서 일어날지 미리 보여주는 안전 기능이다. alembic upgrade --sql c3d4e5f6a1b2:head | grep -E "DROP TABLE|TRUNCATE" \ && echo "❌ 아직 위험" \ || echo "✅ no destructive ops" grep이 무언가 잡히면 → 위험. 아무것도 안 나오면 → 안전. 아주 단순하지만 마음 편한 검증이다. 처음 production에서 dry-run을 돌렸을 때는 DROP 문이 좌라락 출력되었다. 잠깐 가슴이 철렁했지만, 곧 이유를 알았다 — 우리가 로컬에서 비운 두 파일이 production에는 아직 안 갔던 것. rsync로 동기화 후 재실행: Running upgrade c3d4e5f6a1b2 -> a6ae466f8b07, add_random_order_to_board_config (NEUTRALIZED) ✅ no destructive ops (NEUTRALIZED) 표시가 떠 있는 게 결정적 증거였다. production이 우리가 비운 새 파일을 정상적으로 읽고 있다는 뜻. 이제 진짜로 적용해도 안전하다. $ alembic upgrade head INFO Running upgrade c3d4e5f6a1b2 -> a6ae466f8b07, add_random_order_to_board_config (NEUTRALIZED) $ alembic current a6ae466f8b07 (head) DB 변경 0건, 데이터 손실 0건, 다운타임 0초. alembic_version 테이블의 한 행만 갱신되었다. 폭탄 해체 완료. 다음 편 — ③ 바이브코딩의 위험과 안전망 — 사람은 잊지만 코드는 잊지 않는다
이온디
이온디 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년 전
1. 검색 키워드가 있을 경우 2. 카테고리 1차인 경우 별도 출력 3. 카테고리 2차인 경우 별도 출력 이런 구조에서 카테고리 1차에서 2차는 더보기 식으로 나타내려고 함. 카테고리1차 (더보기) 2차가 있을 경우 더보기 아이콘 노출 후 클릭하면 스크롤 가능한 구조로 나타내기. @if($search_keyword) <div class="keyword-box"> '{$search_keyword}'검색 결과 입니다. <span class="count">{$total… 1. 검색 키워드가 있을 경우 2. 카테고리 1차인 경우 별도 출력 3. 카테고리 2차인 경우 별도 출력 이런 구조에서 카테고리 1차에서 2차는 더보기 식으로 나타내려고 함. 카테고리1차 (더보기) 2차가 있을 경우 더보기 아이콘 노출 후 클릭하면 스크롤 가능한 구조로 나타내기. @if($search_keyword) <div class="keyword-box"> '{$search_keyword}'검색 결과 입니다. <span class="count">{$total_count}</span> </div> @endif @if($category_list && !$search_keyword) <div class="category-box"> <div class="cat-root"> @php $args = new stdClass(); $args->module_srl = $module_info->module_srl; $output = executeQuery('document.getDocumentCount', $args); @endphp <a href="{getUrl('','mid',$mid,'category','','page','','document_srl','')}" class="on"|cond="empty($category)">전체 {$output->data->count}</a> @foreach($category_list as $val) @if($val->parent_srl=='0') <a href="{getUrl('category',$val->category_srl,'page','','document_srl','')}" class="on"|cond="($category ?? 0) == $val->category_srl">{$val->title} @if($val->document_count!=='0')<span class="cnt">{$val->document_count?$val->document_count:""}</span>@endif</a> @endif @endforeach </div> <div class="cat-sub"> @foreach($category_list as $val) @if($val->parent_srl!=='0' && $val->parent_srl==$category) <a href="{getUrl('category',$val->category_srl,'page','','document_srl','')}" class="on"|cond="$val->selected">#{$val->title} {$val->document_count}</a> @endif @endforeach </div> </div> @endif @if($error=='idontknow') <div style="display:none;"> @php $cate_list = array(); $current_key = null; @endphp @foreach($category_list as $key=>$val) @if(!$val->depth) @php $cate_list[$key] = $val; $cate_list[$key]->children = array(); $current_key = $key; @endphp @elseif($current_key) @php $cate_list[$current_key]->children[] = $val @endphp @endif @endforeach @if($module_info->use_category=='Y') <ul class="cTab"> <li class="on"|cond="!$category"><a href="{getUrl('category','','page','')}">{$lang->total}</a></li> @foreach($cate_list as $key => $val) <li class="on"|cond="$category==$val->category_srl"><a href="{getUrl('category',$val->category_srl,'document_srl','', 'page', '')}">{$val->title}<!--<em cond="$val->document_count">[{$val->document_count}]</em>--></a> @if(count($val->children)) <ul> {$val->parent_srl} / {$val->category_srl} @foreach($val->children as $idx => $item) <li class="on"|cond="$category==$item->category_srl"><a href="{getUrl('category',$item->category_srl,'document_srl','', 'page', '')}">{$item->title}<!--<em cond="$val->document_count">[{$item->document_count}]</em>--></a></li> @endforeach </ul> @endif </li> @endforeach </ul> @endif </div> @endif이 코드는 라이믹스 CMS의 게시판 스킨에서 카테고리 목록을 출력하는 부분을 구현하고 있습니다. 블레이드 문법을 사용하여 카테고리를 1차와 2차로 나누어 표시하고 있습니다. 현재 코드 설명@if($category_list && !$search_keyword): 카테고리 목록이 있고 검색 키워드가 없을 때만 카테고리 박스를 표시합니다.<div class="cat-root">: 1차 카테고리들을 표시하는 영역입니다.먼저 전체 게시글 수를 가져오는 쿼리를 실행합니다."전체" 카테고리 링크와 게시글 수를 표시합니다.parent_srl=='0'인 카테고리들(1차 카테고리)을 반복하여 표시합니다.각 카테고리 링크에는 해당 카테고리의 게시글 수도 함께 표시됩니다.<div class="cat-sub">: 2차 카테고리들을 표시하는 영역입니다.현재 선택된 1차 카테고리($category)의 하위 카테고리들을 표시합니다.각 2차 카테고리는 #으로 시작하고 게시글 수를 함께 표시합니다.@if($category_list && !$search_keyword) <div class="category-box"> <div class="cat-root"> @php $args = new stdClass(); $args->module_srl = $module_info->module_srl; $output = executeQuery('document.getDocumentCount', $args); @endphp <a href="{getUrl('','mid',$mid,'category','','page','','document_srl','')}" class="on"|cond="empty($category)">전체 {$output->data->count}</a> @foreach($category_list as $val) @if($val->parent_srl=='0') @php // 해당 1차 카테고리의 하위 카테고리가 있는지 확인 $has_subcategory = false; foreach($category_list as $sub) { if($sub->parent_srl == $val->category_srl) { $has_subcategory = true; break; } } @endphp <a href="{getUrl('category',$val->category_srl,'page','','document_srl','')}" class="on"|cond="($category ?? 0) == $val->category_srl"> {$val->title} @if($val->document_count!=='0')<span class="cnt">{$val->document_count?$val->document_count:""}</span>@endif @if($has_subcategory) <span class="more-icon" data-category="{$val->category_srl}"><i class="xi-angle-down-min"></i></span> @endif </a> @endif @endforeach </div> @foreach($category_list as $parent_val) @if($parent_val->parent_srl=='0') @php // 현재 1차 카테고리에 해당하는 2차 카테고리 확인 $subcategories = []; foreach($category_list as $sub) { if($sub->parent_srl == $parent_val->category_srl) { $subcategories[] = $sub; } } @endphp @if(count($subcategories) > 0) <div class="cat-sub cat-sub-{$parent_val->category_srl}" style="display: none;"> <div class="cat-sub-scroll"> @foreach($subcategories as $sub) <a href="{getUrl('category',$sub->category_srl,'page','','document_srl','')}" class="on"|cond="($category ?? 0) == $sub->category_srl"> #{$sub->title} @if($sub->document_count!=='0')<span class="cnt">{$sub->document_count}</span>@endif </a> @endforeach </div> </div> @endif @endif @endforeach </div> <style> .category-box { position: relative; } .cat-root a { position: relative; display: inline-block; margin-right: 15px; } .more-icon { cursor: pointer; margin-left: 5px; } .more-icon.active i { transform: rotate(180deg); } .cat-sub { margin-top: 10px; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .cat-sub.active { max-height: 200px; overflow-y: auto; border-top: 1px solid #eee; padding-top: 10px; } .cat-sub-scroll { display: flex; flex-wrap: wrap; } .cat-sub a { margin-right: 10px; margin-bottom: 5px; } </style> <script> $(document).ready(function() { $('.more-icon').click(function(e) { e.preventDefault(); e.stopPropagation(); var categoryId = $(this).data('category'); var subCategory = $('.cat-sub-' + categoryId); // 다른 열린 서브카테고리 닫기 $('.cat-sub.active').not(subCategory).removeClass('active'); $('.more-icon.active').not(this).removeClass('active'); // 현재 서브카테고리 토글 $(this).toggleClass('active'); subCategory.toggleClass('active'); }); }); </script> @endif구현된 기능 설명더보기 아이콘 추가:1차 카테고리에 하위 카테고리가 있는 경우에만 더보기 아이콘(화살표)을 표시합니다.data-category 속성을 통해 어떤 1차 카테고리에 속하는지 식별합니다.2차 카테고리 구조 변경:각 1차 카테고리별로 별도의 2차 카테고리 영역을 생성합니다.클래스에 1차 카테고리 ID를 포함시켜 연결합니다 (cat-sub-{$parent_val->category_srl}).기본적으로 숨겨져 있습니다 (display: none).스크롤 가능한 구조:2차 카테고리가 많을 경우를 대비해 스크롤 가능한 구조로 만들었습니다.최대 높이를 설정하고 overflow-y를 auto로 설정하여 스크롤을 구현합니다.JavaScript 기능:더보기 아이콘 클릭 시 해당 2차 카테고리만 토글됩니다.다른 열려있는 2차 카테고리는 자동으로 닫힙니다.아이콘도 활성화 상태에 따라 회전합니다.CSS 스타일링:부드러운 애니메이션 효과를 위한 transition을 추가했습니다.2차 카테고리는 flex를 사용해 가로로 나열되며 필요시 여러 줄로 표시됩니다.이 구현은 사용자가 1차 카테고리 옆의 더보기 아이콘을 클릭하면 해당 카테고리의 2차 카테고리가 나타나고, 다시 클릭하거나 다른 카테고리의 더보기를 클릭하면 닫히는 방식으로 작동합니다.
이온디
이온디 2년 전
1. phpstorm을 사용 중입니다. 2. 맥에서 mamp를 사용하고 있습니다. 3. 터미널의 PATH 환경 변수에 추가해줬습니다. (참고) phpstorm 실행 후 프로젝트 터미널에서 php -v 명령어를 입력하면 버전 정보 확인 가능합니다. 4. composer를 설치했습니다. (참고) phpstorm 실행 후 프로젝트 터미널에서 composer 명령어를 입력하면 composer 정보 확인 가능합니다. % composer --version Composer version 2.7.2 … 1. phpstorm을 사용 중입니다. 2. 맥에서 mamp를 사용하고 있습니다. 3. 터미널의 PATH 환경 변수에 추가해줬습니다. (참고) phpstorm 실행 후 프로젝트 터미널에서 php -v 명령어를 입력하면 버전 정보 확인 가능합니다. 4. composer를 설치했습니다. (참고) phpstorm 실행 후 프로젝트 터미널에서 composer 명령어를 입력하면 composer 정보 확인 가능합니다. % composer --version Composer version 2.7.2 2024-03-11 17:12:18 PHP version 8.2.0 (/Applications/MAMP/bin/php/php8.2.0/bin/php) Run the "diagnose" command to get more detailed diagnostics output. 5. 현재 프로젝트에 composer를 이용해서 rector를 설치했습니다. (참고) composer require rector/rector --dev composer.json 파일이 루트에 생성되었습니다. { "require-dev": { "rector/rector": "*" } } 6. 혹시나 몰라 phpstorm에서 php 설정이나 composer 설정도 확인을 했습니다. (참고) composer 실행 경로도 정상적입니다. 루트에 생성된 composer.json 파일은 phpstorm 이 실행되면 자동으로 인식되기도 하고, 따로 추가해주기도 했습니다. 7. 생성된 composer.json 상단에 Install 버튼을 실행해주면.. install --no-interaction   env: php: No such file or directory   Failed to install packages for ./rx/composer.json. 이런 오류가 Composer Log 탭에 출력됩니다. 맥에서 직접 PHP를 설치해준 것은 아니지만 MAMP의 PHP 파일을 실행하고 있습니다. 그래서 3번 과정에서 PATH에 환경변수도 추가해주었기 때문에 터미널에서나 phpstorm에서나 php -v 명령어를 입력하면 php 정보를 확인할 수 있습니다. 아직 rector.php 파일 생성 후 설정도 못했는데 여기서 막히네요. rector 사용해보기도 전에 설정 부터가 막막하군요. MAMP 대신 맥에서 바로 PHP 설치 후 실행해줬다면 이런 과정 없이 좀 더 수월했을 성 싶지만;;; 아마 composer 에서 php 경로를 못 찾아서 그런 거 같은데요, 일반적으로 Composer는 시스템의 PATH를 사용하여 PHP를 찾습니다. 따라서 PHP 경로를 별도로 Composer에 설정해주는 기능은 없습니다. 대신에 Composer는 시스템의 PHP 실행 파일을 사용하여 PHP 코드를 실행하고 Composer 자체적으로 PHP 경로를 지정하는 옵션은 제공하지 않습니다. 따라서 PHP 경로를 추가하려면 Composer를 실행하는 쉘 환경에서 PATH에 PHP 경로를 추가해야 합니다. 이를 위해 macOS에서는 보통 .bash_profile, .bashrc, 또는 .zshrc와 같은 쉘 설정 파일에 PHP 경로를 추가하여야 합니다. 해당 파일에 PHP 경로를 추가한 후에는 해당 쉘을 다시 실행하거나 source 명령어를 사용하여 설정 파일을 다시 로드해야 합니다. 만약 PHP 경로를 설정해줘도 여전히 Composer가 PHP를 찾지 못하는 경우, 환경 설정이나 권한 문제일 수 있으므로 해당 문제를 해결해야 합니다. 7번 문제 해결함.. /Users/eond/.zshrc 이 파일 수정함. export ANDROID_HOME=/Users/eond/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:$ANDROID_HOME/tools #export PATH=$PATH:$ANDROID_HOME/tools/bin export PATH=$PATH:$ANDROID_HOME/platform-tools export PATH="$PATH:/Users/eond/development/flutter/bin" #eond edit 20220831 export NVM_DIR=~/.nvm source $(brew --prefix nvm)/nvm.sh export PATH="$PATH:/Applications/MAMP/bin/php/php8.2.0/bin" 그리고, 적용하니 정상적으로 phpstorm에서 composer 로 설치가 완료됨. (참고) 8번. 이제 rector.php 설정..
이온디
이온디 3년 전
탭 위젯 스킨을 제작하는 방법입니다. 먼저 컨텐츠위젯을 준비해주시고, 탭 위젯 파일을 만들어보도록 합니다. ./widgets/content_extended/skins/ewce_imin/template/list.html ./widgets/content_extended/skins/ewce_imin/template/tab_left.html ./widgets/content_extended/skins/ewce_imin/template/tab_top.html 기존에 content.html 파일 한개만… 탭 위젯 스킨을 제작하는 방법입니다. 먼저 컨텐츠위젯을 준비해주시고, 탭 위젯 파일을 만들어보도록 합니다. ./widgets/content_extended/skins/ewce_imin/template/list.html ./widgets/content_extended/skins/ewce_imin/template/tab_left.html ./widgets/content_extended/skins/ewce_imin/template/tab_top.html 기존에 content.html 파일 한개만 있었는데 탭을 만들면서 위 파일을 만들어줬습니다. ./widgets/content_extended/skins/ewce_imin/content.html <!--@if($widget_info->tab_type == "tab_left")--> <include target="template/tab_left.html" /> <!--@elseif($widget_info->tab_type == "tab_top")--> <include target="template/tab_top.html" /> <!--@else--> <include target="template/list.html" /> <!--@end-->기존 리스트 부분을 이렇게 구분해줬습니다. (참고로, include target={$widget_info->tab_type} 이렇게는 안되더군요.) list.html은 기존과 동일합니다. tab_left.html 파일은 아래 코드입니다. <div class="tab-wrap left"> <div class="tab-header"> {@$i=0} <!--@foreach($widget_info->tab as $module_srl => $tab)--> <div class="tab-title <!--@if($i==0)-->on<!--@end-->">{$tab->title}</div> {@$i++} <!--@end--> </div> <div class="tab-content"> {@$i=0} <!--@foreach($widget_info->tab as $module_srl => $tab)--> {@$widget_info->content_items = $tab->content_items} <include target="list.html" /> {@$i++} <!--@end--> </div> </div> 2. js 코드입니다. var tab = $('.tab-wrap .tab-header').find('.tab-title'), tabbox = $('.tab-wrap .tab-content').find('.content-box'); tab.on('click', function(){ $(this).addClass('on').siblings().removeClass('on'); tabbox.eq($(this).index()).addClass('on').siblings().removeClass('on'); }); 3. css 코드입니다. .tab-wrap{ border: 1px solid #eee; &.left{ display: flex; .tab-header{ min-width: 6rem; background: #f0f0f0; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; flex-direction: column; .tab-title{ display: flex; flex: 1; align-items: center; justify-content: center; font-size: 1.1rem; width: 100%; color: #999; cursor: pointer; &.on{ background:#fff; color: #F3551E; } } a{ flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; border-right: 1px solid #ebebeb; box-sizing: border-box; color: #adadad; background: #f8f8f8; &.on{ background: #fff; border-bottom: 1px solid #eee; border-right: 0; color: #f25214; } } } .tab-content{ //padding: 3px 1rem; //width: -webkit-fill-available; width: calc(100% - 6rem); box-sizing: border-box; padding: 5px 0px 5px 10px; .cat{ display: none; } .title{ font-size: 1.3rem; } .content-box{ display: none; &.on{ display: block; } } } } } 자 이제 XE 관리자 페이지에서 위젯 생성을 누르신 후 아래 코드를 만들어보세요. 그리고 원하는 곳에 해당 코드를 붙여넣기 하시면 됩니다. <!-- 공지사항 위젯 --> <img class="zbxe_widget_output" widget="content_extended" skin="ewce_imin" colorset="white" widget_cache="0m" module_srls="217355,340535" list_count="2" content_type="document" use_limit="N" order_target="update_order" order_type="desc" list_type="normal" option_view="title" markup_type="table" title_target="title" nickname_target="nickname" show_browser_title="N" show_content_title="N" show_comment_count="Y" show_trackback_count="N" show_category="N" show_icon="N" show_point_level="N" show_always_new="N" show_nocomment_document="N" tab_type="tab_left" tab_order="module_order" tab_showtype="module" tab_move_type="mouseover" category_range="all" hyperlink="Y" hyperlink_src="article" view_permission="list" view_secret_document="all_user" comment_document_secret="Y" thumbnail_type="crop" />
이온디
이온디 3년 전
카페24 FTP 접속 후 > ftp 접속하시면 sde_design > mobile > product > detail.html <div module="Product_mobileImage"> 이 안에서 작업하시면 되지 않나요. 상품상세 이미지더보기 모듈<div class="listImg" module="product_addimage"> <ul> <li>{$add_img}</li> <li>{$add_img}</li> </ul> <… 카페24 FTP 접속 후 > ftp 접속하시면 sde_design > mobile > product > detail.html <div module="Product_mobileImage"> 이 안에서 작업하시면 되지 않나요. 상품상세 이미지더보기 모듈<div class="listImg" module="product_addimage"> <ul> <li>{$add_img}</li> <li>{$add_img}</li> </ul> </div>특정모듈에 종속되지는 않는 듯 <div data-custom="swiper"> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /> <style> html, body { position: relative; height: 100%; } body { background: #eee; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #000; margin: 0; padding: 0; } .swiper { width: 100%; height: 100%; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } body { background: #000; color: #000; } .swiper { width: 100%; height: 300px; margin-left: auto; margin-right: auto; } .swiper-slide { background-size: cover; background-position: center; } .mySwiper2 { height: 80%; width: 100%; } .mySwiper { height: 20%; box-sizing: border-box; padding: 10px 0; } .mySwiper .swiper-slide { width: 25%; height: 100%; opacity: 0.4; } .mySwiper .swiper-slide-thumb-active { opacity: 1; } .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } </style> <!-- Swiper --> <div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper mySwiper2" module="product_addimage" > <div class="swiper-wrapper"> <div class="swiper-slide"> {$add_img} </div> <div class="swiper-slide"> {$add_img} </div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> <div thumbsSlider="" class="swiper mySwiper"> <div class="swiper-wrapper" module="product_addimage"> <div class="swiper-slide"> {$add_img} </div> <div class="swiper-slide"> {$add_img} </div> </div> </div> <!-- Swiper JS --> <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> <!-- Initialize Swiper --> <script> var swiper = new Swiper(".mySwiper", { spaceBetween: 10, slidesPerView: 4, freeMode: true, watchSlidesProgress: true, }); var swiper2 = new Swiper(".mySwiper2", { spaceBetween: 10, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, thumbs: { swiper: swiper, }, }); </script> </div>
이온디
이온디 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-header">--> <!-- <h1>불량 댓글 신고 </h1>--> <!-- </div>--> <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; } } } } }
이온디
이온디 4년 전
오늘 문득, 게시판 카테고리를 수정하다보니 글자도 작고 어디로 이동시켜야 제대로 되는지 몇 번 헤맸습니다. 10년을 넘게 별 불편함을 모르고 있었나 봅니다. 여러분들은 이런 경험 없으신가요? url : https://eond.com/test2 id : test11@gmail.com pw : test11 테스트 방법 로그인 후, 게시판 설정 > 분류관리에서 테스트 가능합니다. ps. 작업한 소스입니다. 필요하신 분은 가져다 쓰세요. #menu{ .simpleTre… 오늘 문득, 게시판 카테고리를 수정하다보니 글자도 작고 어디로 이동시켜야 제대로 되는지 몇 번 헤맸습니다. 10년을 넘게 별 불편함을 모르고 있었나 봅니다. 여러분들은 이런 경험 없으신가요? url : https://eond.com/test2 id : test11@gmail.com pw : test11 테스트 방법 로그인 후, 게시판 설정 > 분류관리에서 테스트 가능합니다. ps. 작업한 소스입니다. 필요하신 분은 가져다 쓰세요. #menu{ .simpleTree{ li{ margin-top: .5rem; padding-top: .5rem; border-top: 1px dashed #000; display: flex; align-content: center; justify-content: flex-start; span{ //display: inline-block; clear: left; white-space: nowrap; padding: .5rem 1rem; min-width: 6rem; font-size: 14px; cursor: pointer !important; border-radius: 4px; border: 1px dotted #bbb; &:hover{ background: #eee; } display: flex; align-items: center; justify-content: center; } a{ padding: .8rem; border: 1px dotted #999; margin: 0 .2rem; border-radius: 4px; &:hover{ background: #eee; } display: flex; align-items: center; } &.line-over,&.line-over-last{ margin-top: 1rem; //padding: .5rem 0; background: #eee; height: .8rem; } } .doc{ } } }
이온디
이온디 7년 전
경로 : /admin/shop1/product/ShowDisplayDetail '상품관리 > 상품표시관리 > 상품정보표시설정 > 상품상세'에서 표시설정 가능함. 해당 변수는 표시함/표시안함 select 태그 내에 value값으로 알아낼 수 있음. 예시코드) <style> .product_info{line-height:40px;font-family:'Noto Sans KR',sans-serif;} .product_info h5{border-bottom:2px solid #000 경로 : /admin/shop1/product/ShowDisplayDetail '상품관리 > 상품표시관리 > 상품정보표시설정 > 상품상세'에서 표시설정 가능함. 해당 변수는 표시함/표시안함 select 태그 내에 value값으로 알아낼 수 있음. 예시코드) <style> .product_info{line-height:40px;font-family:'Noto Sans KR',sans-serif;} .product_info h5{border-bottom:2px solid #000;font-size:20px;} .product_info div{border-bottom:1px solid #eee;} .product_info div span{font-weight:bold;min-width:100px;display:inline-block;padding:0 15px;} </style> <div class="product_info"> <h5>Product Infomation</h5> <div clas="{$manu_name_display|display}"><span>제조사</span>{$manu_name}</div> <div clas="{$supplier_id_display|display}"><span>공급사</span>{$supplier_id}</div> <div clas="{$prd_brand_display|display}"><span>브랜드</span>{$prd_brand}</div> </div>적용화면)
이온디
이온디 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년 전
HTML <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Inc… HTML <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="http://placehold.it/1200x400/16a085/ffffff&text=About Us"> <div class="carousel-caption"> <h3> Headline</h3> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> </div> </div> <!-- End Item --> <div class="item"> <img src="http://placehold.it/1200x400/e67e22/ffffff&text=Projects"> <div class="carousel-caption"> <h3> Headline</h3> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> </div> </div> <!-- End Item --> <div class="item"> <img src="http://placehold.it/1200x400/2980b9/ffffff&text=Portfolio"> <div class="carousel-caption"> <h3> Headline</h3> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> </div> </div> <!-- End Item --> <div class="item"> <img src="http://placehold.it/1200x400/8e44ad/ffffff&text=Services"> <div class="carousel-caption"> <h3> Headline</h3> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> </div> </div> <!-- End Item --> </div> <!-- End Carousel Inner --> <ul class="nav nav-pills nav-justified"> <li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">About<small>Lorem ipsum dolor sit</small></a></li> <li data-target="#myCarousel" data-slide-to="1"><a href="#">Projects<small>Lorem ipsum dolor sit</small></a></li> <li data-target="#myCarousel" data-slide-to="2"><a href="#">Portfolio<small>Lorem ipsum dolor sit</small></a></li> <li data-target="#myCarousel" data-slide-to="3"><a href="#">Services<small>Lorem ipsum dolor sit</small></a></li> </ul> </div> <!-- End Carousel --> </div> CSS body { padding-top: 20px; } #myCarousel .nav a small { display: block; } #myCarousel .nav { background: #eee; } .nav-justified > li > a { border-radius: 0px; } .nav-pills>li[data-slide-to="0"].active a { background-color: #16a085; } .nav-pills>li[data-slide-to="1"].active a { background-color: #e67e22; } .nav-pills>li[data-slide-to="2"].active a { background-color: #2980b9; } .nav-pills>li[data-slide-to="3"].active a { background-color: #8e44ad; } JS $(document).ready( function() { $('#myCarousel').carousel({ interval: 4000 }); var clickEvent = false; $('#myCarousel').on('click', '.nav a', function() { clickEvent = true; $('.nav li').removeClass('active'); $(this).parent().addClass('active'); }).on('slid.bs.carousel', function(e) { if(!clickEvent) { var count = $('.nav').children().length -1; var current = $('.nav li.active'); current.removeClass('active').next().addClass('active'); var id = parseInt(current.data('slide-to')); if(count == id) { $('.nav li').first().addClass('active'); } } clickEvent = false; }); });
?
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.write.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 안녕하세요. 올려주신 방법 보고 잘 올렸는데요. 이미지박스는 삽입이 안되요. --; 하하. 좀더 공부해야겠어요
이온디
이온디 11년 전
해당 폰트가 뭔지 궁금해서 소스를 보니 lora 라는 폰트가 있네요. 영문 폰트인데, 한글 폰트로 한글 웹폰트를 차용해서 사용하는 것 같긴 한데, 일단 웹폰트 주소입니다. 소스를 첫줄만 봤을 땐 lora 만 보였는데 두번째 줄까지 보니깐 렉시새봄체라고 보이네요. ^^ http://www.cmsfactory.net/node/10036 소스 @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);@i… 해당 폰트가 뭔지 궁금해서 소스를 보니 lora 라는 폰트가 있네요. 영문 폰트인데, 한글 폰트로 한글 웹폰트를 차용해서 사용하는 것 같긴 한데, 일단 웹폰트 주소입니다. 소스를 첫줄만 봤을 땐 lora 만 보였는데 두번째 줄까지 보니깐 렉시새봄체라고 보이네요. ^^ http://www.cmsfactory.net/node/10036 소스 @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);@import url(http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css);@import url(http://fonts.googleapis.com/css?family=Lora);@font-face{font-family:ls;src:url(/sites/all/themes/JB01/fonts/LexiSaebomR.eot);src:url(/sites/all/themes/JB01/fonts/LexiSaebomR.eot?#iefix) format('embedded-opentype'),url(/sites/all/themes/JB01/fonts/LexiSaebomR.woff) format('woff'),url(/sites/all/themes/JB01/fonts/LexiSaebomR.ttf) format('truetype'),url(/sites/all/themes/JB01/fonts/LexiSaebomR.svg) format('svg');}*{background-image:url(/sites/all/themes/JB01/images/jb_blank.png);}body{margin:0px;}#jb_header_bg{background-color:#222222;}#jb_header_area{width:940px;margin:auto;padding:20px 20px 20px 20px;}#jb_header{}#jb_header:after{content:".";display:block;height:0;clear:both;visibility:hidden;}#jb_site_name{float:left;}#jb_header_menu{float:right;}#jb_top_menu_bg{background-color:#333333;border-top:1px solid #444444;border-bottom:1px solid #333333;}#jb_top_menu_area{width:940px;margin:auto;padding:10px 20px 10px 20px;}#jb_top_menu_area:after{content:".";display:block;height:0;clear:both;visibility:hidden;}#jb_top_menu_1{width:460px;float:left;}#jb_top_menu_2{width:460px;float:right;}#jb_main_bg{}#jb_main_area{width:940px;margin:auto;padding:20px 20px 20px 20px;}#jb_main_area:after{content:".";display:block;height:0;clear:both;visibility:hidden;}#jb_main_content{width:620px;float:left;}#jb_front_row_1{}#jb_front_row_1:after{content:".";display:block;height:0;clear:both;visibility:hidden;}#jb_front_1{width:300px;float:left;}#jb_front_2{width:300px;float:right;}#jb_front_row_2{}#jb_front_row_2:after{content:".";display:block;height:0;clear:both;visibility:hidden;}#jb_front_3{width:300px;float:left;}#jb_front_4{width:300px;float:right;}#jb_sidebar_right{width:300px;float:right;}#jb_footer_bg{background-color:#333333;border-top:1px solid #333333;border-bottom:1px solid #333333;}#jb_footer_area{width:940px;margin:auto;padding:0px 20px 0px 20px;}#jb_footer_area:after{content:".";display:block;height:0;clear:both;visibility:hidden;}#jb_footer_1{width:300px;float:left;margin-right:20px}#jb_footer_2{width:300px;float:left;margin-right:20px}#jb_footer_3{width:300px;float:right;}#jb_copyright_bg{background-color:#222222;border-top:1px solid #444444;border-bottom:1px solid #222222;}#jb_copyright_area{width:940px;margin:auto;padding:0px 20px 0px 20px;}#jb_copyright{}body{font-family: "Lora",ls,"Nanum Gothic";font-size:14px;line-height:200%;color:#666666;}h1{font-size:1.5em;line-height:200%;}h2{font-size:1.4em;line-height:200%;}h3{font-size:1.3em;line-height:200%;}h4{font-size:1.2em;line-height:200%;}h5{font-size:1.1em;line-height:200%;}h6{font-size:1.0em;line-height:200%;}img{max-width:100%;height:auto;}a{color:#2d5c88;text-decoration:none;}a:hover{color:red;}pre{font-family:Menlo,Monaco,Consolas,"Courier New","Nanum Gothic Coding",monospace;background-color:#f5f5f5;border:1px solid #bcbcbc;padding:10px;word-break:break-all;word-wrap:break-word;font-size:0.9em;line-height:180%;}input.form-text{font-family:"Lora",ls,"Nanum Gothic";font-size:1.0em;padding:5px 8px;margin:0px;border:1px solid #bcbcbc;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;color:#666666;border-radius:3px;}input.form-submit{font-family:"Lora",ls,"Nanum Gothic";font-size:1.0em;padding:5px 8px;margin:0px;border:1px solid #333333;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;color:#ffffff;cursor:pointer;background-color:#333333;border-radius:3px;}select{font-family:"Lora",ls,"Nanum Gothic";font-size:1.0em;border:1px solid #bcbcbc;padding:5px;}#block-user-login div.form-item{margin:0px;}#block-user-login div.form-item-name{float:left;}#block-user-login div.form-item-pass{float:right;}#block-user-login .form-item-name input{width:146px;height:36px;margin-bottom:10px;}#block-user-login .form-item-pass input{width:146px;height:36px;margin-bottom:10px;}#block-user-login div.item-list{clear:both;}#block-user-login input.form-submit{width:80px;height:36px;}#block-search-form input.form-text{float:left;width:220px;height:36px;border-radius:3px 0px 0px 3px;}#block-search-form input.form-submit{width:80px;height:36px;border-radius:0px 3px 3px 0px;}#search-form input.form-text{width:300px;height:36px;}#search-form input.form-submit{width:80px;height:36px;}form.comment-form input.form-submit{margin-right:5px;width:80px;height:36px;}input#edit-title{width:100%;font-size:1.2em;height:40px;}html.js input.form-autocomplete{background-position:100% 8px;}form.node-form input.form-submit{margin-right:5px;}textarea.form-textarea{font-family:ls;font-size:1em;line-height:200%;}#jb_header #jb_site_name h1 a{font-size:30px;color:#eeeeee;}#jb_header #jb_header_menu h2{display:none;}#jb_header #jb_header_menu ul{margin-top:20px;}#jb_header #jb_header_menu li{display:inline;}#jb_header #jb_header_menu a{color:#eeeeee;}#jb_header #jb_header_menu a:hover{color:#ffffff;}#jb_top_menu{font-size:13px;color:#cda869;}#jb_top_menu h2{display:inline;font-size:13px;margin-right:10px;}#jb_top_menu h2 + div{display:inline;}#jb_top_menu ul{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;display:inline;}#jb_top_menu li{display:inline;}#jb_top_menu a{color:#eeeeee;}#jb_top_menu a:hover{color:#ffffff;}.jb_front h2{border-bottom:1px solid #bcbcbc;font-size:1.2em;}#jb_front_1 ul,#jb_front_2 ul,#jb_front_3 ul,#jb_front_4 ul{font-size:13px;line-height:180%;}#jb_front_1 a,#jb_front_2 a,#jb_front_3 a,#jb_front_4 a{color:#666666;}#jb_front_1 a:hover,#jb_front_2 a:hover,#jb_front_3 a:hover,#jb_front_4 a:hover{color:#f96e5b;}#jb_main_content h2.jb_node_title{border-bottom:1px solid #bcbcbc;font-size:1.2em;}#jb_main_content ul.tabs{border-top:1px solid #bcbcbc;border-bottom:1px solid #bcbcbc;margin:0px 0px 10px 0px;padding:10px 10px 10px;}#jb_main_content ul.tabs li a{border:none;background:none;}#jb_main_content .jb_node_submitted{margin-bottom:10px;}#jb_main_content .field-label-above{}#jb_main_content .jb_content_top_right{float:right;margin:10px 0px 10px 20px;}#jb_main_content img.file-icon{vertical-align:middle;}#jb_main_content .node > ul.links{display:inline-block;font-size:12px;}#jb_main_content .node > ul.links li{border:1px solid #bcbcbc;border-radius:3px;padding:8px;}#jb_main_content .jb_content_bottom_1:after{content:".";display:block;height:0;clear:both;visibility:hidden;}#jb_main_content .jb_content_bottom_1_1{float:left;width:200px;}#jb_main_content .jb_content_bottom_1_2{float:right;width:400px;}#jb_main_content #comments .comment{margin-bottom:10px;padding:10px;border:1px solid #bcbcbc;border-radius:10px;}#jb_main_content #comments .comment h3{display:none;}#jb_main_content #comments .comment .submitted{border-bottom:1px solid #bcbcbc;}#jb_main_content ul.pager{margin-top:30px;font-size:0.9em;}#jb_main_content ul.pager li{margin:0px 1px;}#jb_main_content ul.pager li:first-child{margin-left:0px;}#jb_main_content ul.pager li{border:1px solid #bcbcbc;border-radius:3px;}#jb_main_content ul.pager li.pager-current{background-color:#bcbcbc;padding:0.5em 1.0em;}#jb_main_content ul.pager a{display:inline-block;padding:5px;}.jb_content_bottom_1_2 ul{font-size:0.9em;line-height:180%;}#jb_sidebar_right h2{border-bottom:1px solid #bcbcbc;font-size:1.2em;}#jb_sidebar_right a{color:#666666;}#jb_sidebar_right a:hover{color:#f96e5b;}#jb_sidebar_right a.active{font-weight:bold;}#jb_sidebar_right ul{font-size:13px;line-height:180%;}#jb_sidebar_right #block-system-user-menu ul{padding-left:12px;}#jb_sidebar_right #block-book-navigation a.active{color:#2195c9;font-weight:normal;}#jb_footer_area{color:#aaaaaa;}#jb_footer_area h2{color:#cccccc;border-bottom:1px solid #444444;font-size:1.2em;}#jb_footer_area ul{font-size:13px;line-height:180%;}#jb_footer_area a{color:#aaaaaa;}#jb_footer_area a:hover{color:#eeeeee;}#jb_copyright{color:#ffffff;text-align:center;}table.jb_forum_table{width:100%;}table.jb_forum_table th{padding:5px;text-align:center;}table.jb_forum_table tr{border-bottom:1px solid #bcbcbc;}table.jb_forum_table td{padding:5px;}.jb_forum_topic_n,.jb_forum_post_n,.jb_forum_reply_n{width:50px;text-align:center;}div.messages{background-position:12px 12px;margin-top:20px;}#book-outline{min-width:initial;}#block-book-navigation .book-block-menu ul{padding:0px 0px 0px 12px;margin:0px 0px 0px 0px;}#block-book-navigation .book-block-menu ul li.dhtml-menu-cloned-leaf{font-size:1.0em;font-style:normal;font-weight:normal;}.jb_book_title{margin:200px 0px 200px 0px;text-align:center;font-size:40px;}.jb_box_black{border:1px solid #DADADA;background-color:#EEEEEE;padding:0px 15px 0px 15px;}.jb_box_green{border:1px solid #72D727;background-color:#EEF9E6;padding:0px 15px 0px 15px;}.jb_box_orange{border:1px solid #FBA903;background-color:#FDF4E2;padding:0px 15px 0px 15px;}.jb_box_red{border:1px solid #FF0000;background-color:#FEE2E2;padding:0px 15px 0px 15px;}.jb_box_blue{border:1px solid #00A0FF;background-color:#E2F4FE;padding:0px 15px 0px 15px;}.jb_box_refer{border:1px solid #DADADA;background-color:#EEEEEE;padding:0px 15px 0px 15px;}.jb_box_ad_black{border:1px solid #DADADA;background-color:#EEEEEE;padding:0px 15px 0px 15px;}.page-node-track #jb_main_content table{width:100%;font-family:Monaco,Menlo,Consolas,"Courier New",monospace;font-size:11px;}.page-node-track #jb_main_content table th{padding-right:0px;text-align:center;}.views-field-field-jb-theme-image img{width:100%;}.field-name-field-jb-theme-image .field-items{text-align:center;}.jb_theme_a{text-align:center;}.jb_theme_a a{display:inline-block;color:#ffffff;background-color:#2195c9;border-radius:3px;margin:10px 5px;padding:10px;width:100px;}.jb_theme_a a:hover{background-color:#27a9e3}a.jb_theme_a_details{}a.jb_theme_a_demo{} .view-jb-taxonomy-term .view-content .item-list ul{list-style-type:none;}.view-jb-taxonomy-term .view-content .item-list ul li{margin:0px 0px 15px 0px;}.view-jb-taxonomy-term .view-content .item-list ul li:after{content:".";display:block;height:0;clear:both;visibility:hidden;}.view-jb-taxonomy-term .views-field-title{font-weight:bold;margin:5px 0px;}.view-jb-taxonomy-term .views-field-field-image{float:left;margin:0px 15px 0px 0px;line-height:0;border:1px solid #bcbcbc;padding:5px;border-radius:3px;}.view-jb-taxonomy-term .views-field-field-category .views-label-field-category{font-weight:bold;}.view-jb-taxonomy-term .views-field-field-category .field-content{display:inline-block;}.view-jb-taxonomy-term .views-field-field-image-category .views-label-field-image-category{font-weight:bold;}.view-jb-taxonomy-term .views-field-field-image-category .field-content{display:inline-block;}.node-type-jb-reference #jb_main_content{width:730px;}.node-type-jb-reference #jb_sidebar_right{width:190px;}
이온디 15년 전
색상표가 이렇게 이름대로 다 있군요. ㅎㄷㄷ 000000 black 0,0,0 2f4f4f darkslategray 708090 slategray 778899 lightslategray 696969 dimgray 808080 gray a9a9a9 darkgray c0c0c0 silver cbca… 색상표가 이렇게 이름대로 다 있군요. ㅎㄷㄷ 000000 black 0,0,0 2f4f4f darkslategray 708090 slategray 778899 lightslategray 696969 dimgray 808080 gray a9a9a9 darkgray c0c0c0 silver cbcaaf d3d3d3 lightgray dcdcdc gainsboro ffffff white fff5ee seashell fffafa snow f8f8ff ghostwhite fffaf0 floralwhite f5f5f5 whitesmoke f0f8ff aliceblue f0ffff azure fdf5e6 oldlace f5fffa mintcream ffefd5 papayawhip ffdab9 peachpuff faf0e6 linen eee8aa palegoldenrod ffe4e1 mistyrose ffe4b5 moccasin ffdead navajowhite d2b48c tan f5deb3 wheat fafad2 lightgoldenrodyellow ffffe0 lightyellow fff8dc cornsilk faebd7 antiquewhite f5f5dc beige fffacd lemonchiffon fffff0 ivory f0e68c khaki e6e6fa lavender fff0f5 lavenderblush ffe4c4 bisque ffebcd blanchedalmond deb887 burlywood cd853f peru 00ced1 darkturquoise 00bfff deepskyblue 7fffd4 aquamarine 1e90ff dodgerblue 00ffff cyan f0fff0 honeydew 87cefa lightskyblue afeeee paleturquoise e0ffff lightcyan add8e6 lightblue b0c4de lightsteelblue 40e0d0 turquoise 48d1cc mediumturquoise 7b68ee mediumslateblue 191970 midnightblue 6495ed cornflowerblue 0000cd mediumblue 6a5acd slateblue 4682b4 steelblue 7300c3 0000ff blue 483d8b darkslateblue 5f9ea0 cadetblue 87ceeb skyblue 4169e1 royalblue b0e0e6 powderblue 000080 navy 00008b darkblue 8a2be2 blueviolet 8b008b darkmagenta 9932cc darkorchid 9400d3 darkviolet ff00ff magenta c71585 mediumvioletred ba55d3 mediumorchid 9370db mediumpurple de143c crimson ff1493 deeppink ffb6c1 lightpink ff69b4 hotpink ffc0cb pink dda0dd plum 800080 purple ee82ee violet d8bfd8 thistle da70d6 orchid 4b0082 indigo a52a2a brown e9967a darksalmon f08080 lightcoral cd5c5c indianred ffa07a lightsalmon db7093 palevioletred f4a460 sandybeown fa8072 salmon ff6347 tomato ff4500 ornagered ff0000 red 800000 maroon 8b0000 daekred b22222 firebrick d2691e chocolate 8b4513 saddlebrown a0522d sienna bc8f8f rosybrown ff7f50 coral ff8c00 darkorange ffa500 orange b8860b darkgoldenrod ffd700 gold ffff00 yellow 7fff00 chartreuse 7cfc00 lawngreen 00ff00 lime 32cd32 limegreen 00ff7f springgreen 3cb371 mediumseagreen adfd2f greenyellow 8fbc8f daekseagreen 90ee90 lightgreen 98fb98 palegreen 9acd32 yellowgreen 2e8b57 seagreen 00fa9a mediumspringgreen 20b2aa lightseagreen 66cdaa mediumaquamarine 228b22 forestgreen 008b8b darkcyan 008080 teal 006400 darkgreen 556b2f darkolivegreen 008000 green 808000 olive 6b8e23 olivedrab bdb76b darkkhaki daa520 goldenrod 99cccc
이온디
이온디 18년 전
http://www.kaspersky.co.kr/event/kaspersky_down.php 유진 카스퍼스키 방한 기념으로 3개월 무료 이용권을 준다네요. 홍보 동영상을 보시면 받을 수 있습니다. … 만, 저 페이지로 들어가서 동영상 보기 누른 다음 뒤로가기 눌러서 리프레시 하면 그냥 나오네요. 쿠키만 있으면 되나 봅니다 [..] 6.0보다 몇배는 가벼워진 것 같으니, 혹시 6.0 구매해서 사용하시던 분 있으면 얼른 7.0으로 업그레이드하세요.. (무료로 업그레이드 받을 수 있어요.) ht… http://www.kaspersky.co.kr/event/kaspersky_down.php 유진 카스퍼스키 방한 기념으로 3개월 무료 이용권을 준다네요. 홍보 동영상을 보시면 받을 수 있습니다. … 만, 저 페이지로 들어가서 동영상 보기 누른 다음 뒤로가기 눌러서 리프레시 하면 그냥 나오네요. 쿠키만 있으면 되나 봅니다 [..] 6.0보다 몇배는 가벼워진 것 같으니, 혹시 6.0 구매해서 사용하시던 분 있으면 얼른 7.0으로 업그레이드하세요.. (무료로 업그레이드 받을 수 있어요.) http://www.kaspersky.co.kr/event/kaspersky_down.php 유진 카스퍼스키 방한 기념으로 3개월 무료 이용권을 준다네요. 홍보 동영상을 보시면 받을 수 있습니다. … 만, 저 페이지로 들어가서 동영상 보기 누른 다음 뒤로가기 눌러서 리프레시 하면 그냥 나오네요. 쿠키만 있으면 되나 봅니다 6.0보다 몇배는 가벼워진 것 같으니, 혹시 6.0 구매해서 사용하시던 분 있으면 얼른 7.0으로 업그레이드하세요.. (무료로 업그레이드 받을 수 있어요.)
이온디 16년 전
웹안전색 216컬러! 간단하다! 브라우저, 운영체제, 모니터에 따라서 웹에서 보이는 홈페이지의 색상이 다르게 보일수 있다. 웹안전색은 사용자의 환경이 달라도 색상의 변화가 없이 공통으로 보여지는 색을 말한다. 빨강(RED), 초록(GREEN), 파랑(BLUE) 세 가지 색상을 디지털 신호가 각각 0, 51, 102, 153, 204, 255 일때 재현되는 색의 조합으로 6X6X6에 의해 모두 216가지가 되어 210가지의 유채색과 6가지의 무채색으로 이루어진다. 다양한 디자인을 요구하는 … 웹안전색 216컬러! 간단하다! 브라우저, 운영체제, 모니터에 따라서 웹에서 보이는 홈페이지의 색상이 다르게 보일수 있다. 웹안전색은 사용자의 환경이 달라도 색상의 변화가 없이 공통으로 보여지는 색을 말한다. 빨강(RED), 초록(GREEN), 파랑(BLUE) 세 가지 색상을 디지털 신호가 각각 0, 51, 102, 153, 204, 255 일때 재현되는 색의 조합으로 6X6X6에 의해 모두 216가지가 되어 210가지의 유채색과 6가지의 무채색으로 이루어진다. 다양한 디자인을 요구하는 곳에서는 216의 제한된 색상을 사용해서 표현한다는건 거의 모험에 가깝지만.. 단순한 로고 또는 단순한 이미지에 사용할때 기본형태를 만들때에는 웹컬러를 사용하는것이 좋을것 같다. 단점이라면, 무채색이 하얀색과 검정색을 빼면 4가지 뿐이라는거… 색상이 너무 한정되어 있다는거… -_- (단연한거잔아!) 내가 왜?! 웹컬러를 사용하려는 이유라면… 솔직히 직업도 아니고 한데…취미로 홈페이지 운영하는데… CRT 쓰다가 LCD로 넘어왔다.! 뭐 색상이 오히려 더 좋았다.! 색도 똑같아 보였다.! 그리고 와이드LCD를 샀다.! 헐…색상이 다르게 보이는게 아니던가~ 그래서 웹컬러를 쓰기로 마음을 먹었다! 이런 단순한 이유! 랄까? Plus + 웹컬러를 어떻게 사용할까 생각하다가 8bit PNG가 떠 올랐다. 여기서 잠깐! # 8bit : Pallete PNG 이미지 내의 색상을 index화 하여 256 칼라를 사용할 수 있다는 GIF 와 비슷한 특성을 가지지만, 동일 이미지의 GIF 파일보다 크기가 작습니다. 그 외의 속성은 png와 같습니다. (Alpha Transparency, No Animated) # 24bit : Truecolor PNG JPG와 같은 1670만 칼라를 지원하며, JPG와 달리 이미지의 손실(열화)이 없습니다. 그래서 이미지의 크기는 JPG보다 크지만, JPG의 최상퀄리티의 파일 크기에 비하면 오히려 작다고 할 수 있습니다. 그외에 역시 Alpha Transparency를 지원하며 애니메이션은 지원되지 않습니다. 8비트 PNG는 용량도 작고 ie.6 에서도 표현이 잘된다 (ie.6에서 8bit PNG는 GIF와 비슷한 Transparency 를 지원한다.) 그냥 ie.6 가 사라지면…. -_-; (뭐.. 난 취미로 하는것이니 다른 사람 생각할 필요가 없다는거!) #FF0000 red #DC143C crimson #B22222 firebrick #800000 maroon #8B0000 darkred #A52A2A brown #A0522D sienna #8B4513 saddlebrown #CD5C5C indianred #BC8F8F rosybrown #F08080 lightcoral #FA8072 salmon #E9967A darksalmon #FF7F50 coral #FF6347 tomato #F4A460 sandybrown #FFA07A lightsalmon #CD853F peru #D2691E chocolate #FF4500 orangered #FFA500 orange #FF8C00 darkorange #D2B48C tan #FFDAB9 peachpuff #FFE4C4 bisque #FFE4B5 moccasin #FFDEAD navajowhite #F5DEB3 wheat #DEB887 burlywood #B8860B darkgoldenrod #DAA520 goldenrod #FFD700 gold #FFFF00 yellow #FAFAD2 lightgoldenrodyellow #EEE8AA palegoldenrod #F0E68C khaki #BDB76B darkkhaki #7CFC00 lawngreen #ADFF2F greenyellow #7FFF00 chartreuse #00FF00 lime #32CD32 limegreen #9ACD32 yellowgreen #808000 olive #6B8E23 olivedrab #556B2F darkolivegreen #228B22 forestgreen #006400 darkgreen #008000 green #2E8B57 seagreen #3CB371 mediumseagreen #8FBC8F darkseagreen #90EE90 lightgreen #98FB98 palegreen #00FF7F springgreen #00FA9A mediumspringgreen #008080 teal #008B8B darkcyan #20B2AA lightseagreen #66CDAA mediumaquamarine #5F9EA0 cadetblue #4682B4 steelblue #7FFFD4 aquamarine #B0E0E6 powderblue #AFEEEE paleturquoise #ADD8E6 lightblue #B0C4DE lightsteelblue #87CEEB skyblue #87CEFA lightskyblue #48D1CC mediumturquoise #40E0D0 turquoise #00CED1 darkturquoise #00FFFF aqua #00FFFF cyan #00BFFF deepskyblue #1E90FF dodgerblue #6495ED cornflowerblue #4169E1 royalblue #0000FF blue #0000CD mediumblue #000080 navy #00008B darkblue #191970 midnightblue #483D8B darkslateblue #6A5ACD slateblue #7B68EE mediumslateblue #9370DB mediumpurple #9932CC darkorchid #9400D3 darkviolet #8A2BE2 blueviolet #BA55D3 mediumorchid #DDA0DD plum #E6E6FA lavender #D8BFD8 thistle #DA70D6 orchid #EE82EE violet #4B0082 indigo #8B008B darkmagenta #800080 purple #C71585 mediumvioletred #FF1493 deeppink #FF00FF fuchsia #FF00FF magenta #FF69B4 hotpink #DB7093 palevioletred #FFB6C1 lightpink #FFC0CB pink #FFE4E1 mistyrose #FFEBCD blanchedalmond #FFFFE0 lightyellow #FFF8DC cornsilk #FAEBD7 antiquewhite #FFEFD5 papayawhip #FFFACD lemonchiffon #F5F5DC beige #FAF0E6 linen #FDF5E6 oldlace #E0FFFF lightcyan #F0F8FF aliceblue #F5F5F5 whitemoke #FFF0F5 lavenderblush #FFFAF0 floralwhite #F5FFFA mintcream #F8F8FF ghostwhite #F0FFF0 honeydew #FFF5EE seashell #FFFFF0 ivory #F0FFFF azure #FFFAFA snow #FFFFFF white #DCDCDC gainsboro #D3D3D3 lightgrey #C0C0C0 silver #A9A9A9 darkgray #778899 lightslategray #708090 slategray #808080 gray #696969 dimgray #2F4F4F darkslategray #000000 black 출처 : http://redrainbow.net/?mid=textyle&category=162&vid=ritbi&document_srl=192
이온디 16년 전
요즘처럼 예측할 수 없는 덥고 습한 날씨에, 때때로 비가 내리는 여름 날씨에는 ‘핫팬츠’가 그야말로 제격이다. 불과 30분 후의 날씨를 예측하기 힘든 날씨같으면, 갑작스러운 폭우로 인해 순식간에 생쥐꼴이 되기 마련. 이럴 때 역시 ‘핫팬츠’가 유용하다. 어중간한 길이의 반바지보다 이번 여름에는 유난히 엉덩이만 살짝 가린 듯한 아찔한 ‘핫팬츠’가 거리를 장악하고 있다. 하이웨이스트의 숏팬츠는 상의를 타이트하게 입어야 제격이지만, 몸매선이 그대로 드러나는게 부담스럽다면 느슨하고 성긴 조직의 니… 요즘처럼 예측할 수 없는 덥고 습한 날씨에, 때때로 비가 내리는 여름 날씨에는 ‘핫팬츠’가 그야말로 제격이다. 불과 30분 후의 날씨를 예측하기 힘든 날씨같으면, 갑작스러운 폭우로 인해 순식간에 생쥐꼴이 되기 마련. 이럴 때 역시 ‘핫팬츠’가 유용하다. 어중간한 길이의 반바지보다 이번 여름에는 유난히 엉덩이만 살짝 가린 듯한 아찔한 ‘핫팬츠’가 거리를 장악하고 있다. 하이웨이스트의 숏팬츠는 상의를 타이트하게 입어야 제격이지만, 몸매선이 그대로 드러나는게 부담스럽다면 느슨하고 성긴 조직의 니트 베스트를 겹쳐 입거나 남자친구의 티셔츠를 잘라 만든 듯한 데님 베스트도 얼마든지 스타일리시한 연출이 가능하다. 본인이 다리길이에 자신이 있다면 레드색의 편한 단화나 플랫 슈즈도 좋겠지만, 최신 ‘핫 아이템’으로 떠오른 글래디에이터 샌들이나 높은 굽의 캐주얼한 하이힐이 더욱 다리를 길어 보이게 해준다. 당연히 팬츠 길이도 짧을 수록 다리가 길어보이겠지만, 이 때 명심할 점은 외출 전 반드시 자신의 뒷모습도 체크해야 한다는 것! 반바지 아래로 처진 엉덩이가 그대로 노출되는 것만큼 민망한 일은 없을테니까. (자료제공: 아이스타일24 ) 한경닷컴 bnt뉴스 송영원 기자 fashion@bntnews.co.kr
이온디 16년 전
어느덧 여름도 막바지를 향해 달려가는 듯한 느낌이 드는 요즘. 더운 여름 불쾌지수가 높아지면서 연인들끼리의 헤어짐이 많은 시기라고 한다. 반면에 앞으로 다가올 가을, 겨울은 추운 날씨를 따뜻하게 보낼 수 있는 늑대목도리가 필요한 시기가 아닐까? 옛말에 일찍 일어나는 새가 벌레를 잡아 먹는다는 말처럼 미리미리 준비하는 사람만이 멋진 이상형의 연인을 만날 수 있는 법. 그럼 지금부터 소개팅 성공률 100%를 위한 아주 특별한 스타일링을 살펴보면서 지긋지긋한 솔로탈출을 시도해 보자. # 첫… 어느덧 여름도 막바지를 향해 달려가는 듯한 느낌이 드는 요즘. 더운 여름 불쾌지수가 높아지면서 연인들끼리의 헤어짐이 많은 시기라고 한다. 반면에 앞으로 다가올 가을, 겨울은 추운 날씨를 따뜻하게 보낼 수 있는 늑대목도리가 필요한 시기가 아닐까? 옛말에 일찍 일어나는 새가 벌레를 잡아 먹는다는 말처럼 미리미리 준비하는 사람만이 멋진 이상형의 연인을 만날 수 있는 법. 그럼 지금부터 소개팅 성공률 100%를 위한 아주 특별한 스타일링을 살펴보면서 지긋지긋한 솔로탈출을 시도해 보자. # 첫 만남, 핑크 빛으로 물들이다 흔히 우리는 기본 컬러가 첫 만남에는 무난해 보일 것이라는 생각을 많이 하게 되는데, 그것은 단지 여성들만의 생각이다. ‘늑대男’에게 잘 보이고 싶다면? 핑크색 옷을 강력 추천한다. 핑크를 입는 동시에 얼굴에 생기가 있어 보이면서 동안으로 만들어주는 효과. 게다가 긴장한 남자의 마음도 릴렉스하게 만들어 주는 효과를 준다고 한다. 여기에 포인트로 작은 토트백을 코디한다면 더욱 여성스럽고 사랑스러운 느낌을 줄 수 있을 듯. # 남자의 로망~ ‘비서스타일’로 변신! 남자의 로망 중에 하나인 비서스타일은 그야말로 ‘백발백중’ 코디 스타일이라고 할 수 있다. 깔끔한 수트 정장 재킷에 긴 생머리나 아나운서 단발머리를 흩날리며 H라인 스커트와 힐을 매치한 스타일. 그러나 이 스타일을 소화하기 위해서는 하늘이 내려주신 긴 기럭지와 S라인 바디의 조화가 있어야만 소화 가능한 스타일이라고 할 수 있다. 사실 비서스타일의 소개팅녀가 나간다면 마다 할 남자가 없지 않을까? 만일 당신이 하늘이 내려주신 몸매의 소유자가 아님에도 불구하고 이 스타일을 시도해 보겠다면, 약속시간이 촉박해도 꼭 옷을 갈아입고 나가야 소개팅100% 성공률에 다가갈 수 있다는 점을 잊지 말 것. # 두근두근~ 차 안에서 데이트 차 안에서 30센티 옆에 나란히 앉아서 보는 소개팅남. 그의 시선은 자연히 소개팅녀의 얼굴보다는 다리로 가기 마련. 그러므로 미니스커트를 입어 주는 센스가 필요! 승용차 시트는 보통의 의자보다 낮아서 허벅지가 넓게 퍼지지 않고 날씬해 보인다는 중요한 사실을 기억해 두자. 또한 발목에서 무릎까지의 길이도 매우 길어 보이는 효과를 주기 때문에 종아리를 길어 보이게 하는 롱 부츠와 코디하면 그 효과는 배가 된다. # 특별한 날 확실한 ‘결정타’를 날려라! 특별한 날, 특별한 모습으로 소개팅남과 데이트가 있다면? 가슴포인트는 이제 그만. 뒤가 시원하게 파인 옷으로 날개 죽지의 아찔한 라인과 세로로 도드라진 여자의 척추뼈를 살포시 노출하여 분위기 있는 와인 바, 클럽에서 춤을 추는 당신의 뒷 자태 매력을 마음껏 발산해 보자. 뒤태에 포인트를 주었다면 앞쪽은 최대한 심플한 느낌을 주는 것이 시선분산도 되지 않고 스타일리시한 나만의 매력을 뽑낼 수 있을 것이다. (자료제공: 아이스타일24 ) 한경닷컴 bnt뉴스 송영원 기자 fashion@bntnews.co.kr