블로그 기초 - script.js

On/HtmlCss 2010.06.16 06:16
  • function showHide(id) {
    var obj = document.getElementById(id);
    if (obj.style.display == 'none')
    obj.style.display = 'block';
    else
    obj.style.display = 'none';
    }

    function bluring(){
    if(event.srcElement.tagName=="A"||event.srcElement.tagName=="IMG") document.body.focus();
    }
    document.onfocusin=bluring;

    大道 2010.06.17 19:25
  • “ 링크이미지 점선없애기 ”

    위소스로 적용했더니 글자크기 폰드선댁이 안되네요.

    1_main_html.php 의
    <STYLE TYPE='text/css'> 에
    a {selector-dummy: expression(this.hideFocus=true);}/* 링크점선 없애기*/

    위에줄 추가하니 잘 됨니다.

    大道 2010.06.17 20:12
  • 샵에 보면 이미지맵으로 은행들 연결되어있죠..
    그건 이미지 도트라인 없애기로 안없어지더라구요..^^;;
    그래서 또 찾아보다 발견 ;;
    테크노트경로/skin_shop/standard/css_javascript/shop_public.js
    파일을 열어서..

    a,area { blr:expression(this.onFocus=this.blur())}
    :focus { -moz-outline-style: none; }

    이렇게 두줄만 추가해 주세요.^^
    그럼 도트라인이 싹 사라진답니다.;;
    허접팁였습니당 ;;

    大道 2010.06.17 20:14
images/script.js 에 추가한 것 - 스킨의 3파에 자바스트립터를 반드시 포함시킬 이유이다.
일일이 a를 찾아 다 붙여도 안되던 것이 이렇게 자바함수 달랑 하나만 붙이니 완전히 점선없다.
혹시 향후 에러를 위하여 - 테크노트에서 검색어: blur를 치면 해법 보일 터이다.

function bluring(){
if(event.srcElement.tagName=="A"||event.srcElement.tagName=="IMG") document.body.focus();
}
document.onfocusin=bluring;


시바손봐 - 누른 마우스 흔적없는 소스 삽입
this.blur를 <a>에만 붙이면 될 터 - 다만, 치환자에는 어찌 해 볼 방법이 없는 중
미결 - "세부" 범주와 태그 치환자 

시바스킨에서 - 수정과, 페이징 등

댓글이 영어로도 나오고 한글로도 나오는데 일통
posted by 大道

블로그 기초 - style.css

On/HtmlCss 2010.06.16 01:38
  • @charset "utf-8";


    /* ------------------------------------------------------------------- */
    /* 반드시 들어가야 하는 스타일 시작 */
    /* ------------------------------------------------------------------- */

    /* 본문 공통 */

    body { padding:0; margin:0; font-family:verdana, dotum; font-size:9pt; color:#666; }
    a:link { color:#666; text-decoration:none;}
    a:visited { color:#666; text-decoration:none;}
    a:hover { color:#7aa; font-weight:bold;}
    a:active { color:#666; text-decoration:none;}


    /* 페이징 - 현재 페이지 */
    .selected { font-weight:bold; color:#7aa;}

    /* 카테고리 - 이미지 버튼 */
    .ib { cursor:pointer;}
    /* 카테고리 - 트리 셀 */
    .branch3 { cursor:pointer; }
    /* 카테고리 - 카테고리 옆 개수 스타일 */
    .c_cnt { font-size:7pt; color:#7aa; font-weight:normal;}

    /* 달력 월 표시 */
    .cal_month { font-size:8pt; height:18px; font-weight:bold; text-align:right;}
    /* 달력 요일 표시(th 영역) */
    .cal_week1 { font:9pt dotum; height:18px; font-weight:normal; text-align:right;}
    /* 달력 일요일 표시(th 영역) */
    .cal_week2 { font:9pt dotum; height:18px; font-weight:normal; color:#7aa; text-align:right;}
    /* 달력 Week(tr 영역) */
    .cal_week { background-color:#fff;}
    .cal_current_week { background-color:#eee;}
    /* 달력 Day(td 영역) */
    .cal_day { font:7pt verdana; color:#999; text-align:right;}
    /* 달력 Day, 일요일 (td 영역) */
    .cal_day_sunday { color:#7aa !important;}
    .cal_day_sunday a { color:#7aa !important;}
    /* 달력 지난 달 날짜 표시(td) */
    .cal_day1 { color:#ccc;}
    /* 달력 다음 달 날짜 표시(td) */
    .cal_day2 { color:#ccc;}
    /* 달력 이번 달 날짜 표시(td) */
    .cal_day3 { color:#666;}
    /* 달력 오늘 날짜 표시(td) */
    .cal_day4 { color:#666; font-weight:bold; text-decoration:underline;}
    /* 달력 글쓴 날 링크 스타일 */
    a.cal_click:link { color:#666; font-weight:bold;}
    a.cal_click:visited { color:#666; font-weight:bold;}
    a.cal_click:hover { color:#7aa; font-weight:bold;}

    /* 종류별 코멘트 rp_general */
    .rp_general { }
    .rp_admin { }
    .rp_secret { color:#7aa;}
    /* 종류별 코멘트 */
    .guest_general { }
    .guest_admin { }

    /* 비밀 댓글 (로그아웃시 비밀글 표현) */
    .hiddenComment { background:url(images/iconSecret.gif) no-repeat; padding-left:20px; font-weight:normal;}

    /* 이미지 아래 캡션 스타일 */
    .cap1 { color:#999; text-align:center;}
    /* 그림 */
    .imageblock { border:0px; padding:0px; margin:0px;}
    /* 왼쪽 */
    .left { }
    /* 가운데 */
    .center { }
    /* 오른쪽 */
    .right { }
    /* 그림 2개 배치 */
    .dual { margin-bottom:5px;}
    /* 그림 3개 배치 */
    .triple { margin-bottom:5px;}

    /* 본문 - more / less */
    .moreless_fold { background:url(images/iconMore.gif) top left no-repeat; padding-left:25px; color:#666; font-weight:bold; }
    .moreless_top { background:url(images/iconLess.gif) top left no-repeat; padding-left:25px; color:#666; font-weight:bold; }
    .moreless_body { }
    .moreless_bottom { background:url(images/iconLess.gif) top right no-repeat; padding-right:25px; color:#666; text-align:right; font-weight:bold; }

    /* 키워드 */
    .key1 { cursor:pointer; border-bottom: 1px dotted #ccc; }


    /* ------------------------------------------------------------------- */
    /* 반드시 들어가야하는 스타일 끝 - 이 아래는 자유롭게 추가, 삭제 가능 */
    /* ------------------------------------------------------------------- */

    hr { display:none;}
    img { border:0;}
    h1, h2, h3, h4 { margin:0; padding:0;}
    h1 { font-size:2em;}
    h2 { font-size:1.4em;}
    h3 { font-size:1.2em;}
    h4 { font-size:1em;}
    input { border:1px solid #aaa;}
    textarea { border:1px solid #aaa;}



    /* ------------------------------------------------------------------- */
    /* 블로그 레이아웃 */
    /* ------------------------------------------------------------------- */

    #container { padding-top:20px; margin:0; width:900px; }
    #left { float:left; width:250px; padding-right:20px; padding-bottom:20px;}
    #header { text-align:right; width:250px; padding-top:40px; padding-bottom:20px;}
    #sidebar { text-align:right; width:250px; text-align:right;}
    #content { float:right; width:630px; padding-bottom:40px; line-height:160%; overflow:hidden;}

    /* ------------------------------------------------------------------- */
    /* ***** Header ***** */
    /* ------------------------------------------------------------------- */

    #header h2 { font:13pt dotum; font-weight:bold;}
    #header span { font:8pt verdana; color:#999; }
    #header span a { font:8pt verdana; color:#999; }
    #header span a:hover { color:#7aa; font-weight:bold; }

    /* ------------------------------------------------------------------- */
    /* ***** sidebar ***** */
    /* ------------------------------------------------------------------- */


    #sidebar ul { padding:0; margin:0; list-style:none;}
    #sidebar li { padding-bottom:2px; list-style:none;}
    #sidebar h3 { padding-bottom:5px; font-size:9pt; font-weight:bold; cursor:pointer;}
    #sidebar h3 span:hover { color:#7aa;}
    #sidebar .cnt { font-size:7pt; color:#7aa; font-weight:normal;}

    #sidebar .search { padding-bottom:10px;}
    #sidebar .search input { font:9pt verdana; width:140px; height:16px; color:#666; border:1px solid #999; }
    #sidebar .search .submit { width:50px; height:20px; background-color:#aaa; font:7pt verdana; color:#fff; }

    #recentPost,
    #recentComment,
    #recentTrackback { padding-bottom:15px;}
    #calendar { text-align:right; width:250px; padding-bottom:15px;}
    #archive { font-size:8pt; padding-bottom:15px;}
    #link { font:8pt verdana, dotum; padding-bottom:15px;}


    /* Categories */
    #category { font-size:9pt; font-weight:bold; padding-bottom:15px;}
    #category ul { list-style:none;}
    #category li a { }

    /* 1 depth */
    #category ul li ul li a { }

    /* 2 depth */
    #category ul li ul li ul li { }
    #category ul li ul li ul li a { font:8pt verdana, dotum; font-weight:normal;}

    /* selected */
    #category .selected { font-weight:bold;}
    #category .selected ul li { font-weight:normal;}

    /* ------------------------------------------------------------------- */
    /* ***** content ***** */
    /* ------------------------------------------------------------------- */

    #content .localog,
    #content .taglog,
    #content .entryNotice,
    #content .entryProtected,
    #content .entry,
    #content .guestbook,
    #content .searchList,
    #content .searchRplist {padding-bottom:40px; }


    #content .localog h3,
    #content .taglog h3,
    #content .guestbook h3 { padding-top:40px; padding-bottom:32px; color:#666; font-family:dotum; font-weight:bold; font-size:13pt;}
    #content .medialog h3 { padding-top:40px; padding-bottom:31px; color:#666; font-family:dotum; font-weight:bold; font-size:13pt;} /* 티스토리용 */
    #content .searchRplist h3,
    #content .searchList h3 { padding-top:40px; padding-bottom:36px; color:#666; font-family:dotum; font-weight:bold; font-size:13pt;}


    .searchList ol,
    .searchRplist ol { list-style:none; padding:0px; margin:0;}
    .searchList li,
    .searchRplist li { line-height:100%; padding-bottom:2px; margin-bottom:4px;}
    .searchList .date,
    .searchRplist .date { font-size:7pt; margin-left:10px; }
    .searchList .cnt { font-size:7pt; color:#7aa;}
    .searchRplist .name { font-size:9pt; color:#999; padding-left:8px;}

    .taglog { margin-bottom:30px;}
    .taglog ul { padding:0px; margin:0; text-align:justify;}
    .taglog li { display:inline;}
    .taglog li .cloud1 { color:#666; font-weight:bold; font-size:9pt;}
    .taglog li .cloud2 { color:#666; font-weight:bold; font-size:9pt;}
    .taglog li .cloud3 { color:#666; font-weight:bold; font-size:9pt;}
    .taglog li .cloud4 { color:#666; font-size:9pt;}
    .taglog li .cloud5 { color:#999; font-size:9pt; }
    .taglog li a:hover { color:#7aa;}

    .guestbook p { padding:2px 0; margin:0;}

    .guestWrite { font:7pt verdana; }
    .guestWrite input { font:9pt verdana; width:150px; padding-left:2px; color:#666;}
    .guestWrite textarea { font:9pt verdana; width:608px; padding:5px; color:#666;}
    .guestWrite .homepage { width:300px; color:#666;}
    .guestWrite .submit { width:150px; height:20px; background-color:#aaa; font:7pt verdana; color:#fff;}
    .guestWrite .checkbox { width:25px; border:none; padding:0; margin:0; }

    .guestList { width:620px; padding:40px 0 0 0;}
    .guestList ol { border-left:1px solid #aaa; margin:0 0 35px 0; padding:0 0 10px 0; list-style:none;}
    .guestList ol ul { margin:0; padding:0; list-style:none;}
    .guestList ol li { padding-left:15px; overflow:hidden;}
    .guestList ol li p { border-top:1px solid #aaa; }
    .guestList ol li ul li { padding:10px 0 0 50px; border:none; overflow:hidden;}
    .guestList ol li .name { color:#666; font-weight:bold;}
    .guestList ol li .date { font-size:7pt; color:#999; }
    .guestList .control { font-size:7pt; color:#999;}
    .guestList .control a { color:#999;}
    .guestList .control a:hover { font-size:7pt; color:#7aa;}


    /* ------------------------------------------------------------------- */
    /* entry */
    /* ------------------------------------------------------------------- */

    .entryNotice h2,
    .entryProtected h2,
    .entry h2 { padding-top:40px; font:13pt dotum; font-weight:bold; }
    .titleWrap { font:8pt verdana, dotum; color:#999; padding-bottom:20px;}
    .titleWrap .category a { color:#999;}
    .titleWrap .category a:hover { color:#7aa; font-weight:bold;}
    .titleWrap .date { }
    .titleWrap .admin { padding-left:5px;}
    .titleWrap .admin a { color:#999;}
    .titleWrap .admin a:hover { color:#7aa; font-weight:bold;}

    .entryProtected { margin-bottom:15px;}
    .warning { background:url(images/imgProtected.gif) no-repeat; padding-left:45px; margin-bottom:10px;}
    .entryProtected input { width:140px; color:#666; border:1px solid #999;}
    .entryProtected .submit { font:7pt Verdana; width:50px; height:20px; color:#fff; background-color:#aaa;}

    .article { margin-bottom:20px; width:100%; }
    .article a:link,
    .article a:visited { color:#7aa; border-bottom:1px dotted #7aa;}
    .article dt { text-decoration:underline;}
    .article dd { margin-left:20px; padding-bottom:10px;}
    .article blockquote { background:url(images/iconBlockquote.gif) top left no-repeat; padding-left:28px; margin:10px 20px;}


    .tagTrail { padding:0px 5px 0px 0px;}
    .tagText { }

    .actionTrail { clear:both;}
    .actionTrail .cnt { color:#7aa;}

    .trackback { padding-top:2px; margin-bottom:4px; width:100%; overflow:hidden;}
    .trackback a { color:#666;}
    .trackback h3 { font-size:8pt; color:#7aa; margin:0px 5px 10px 0px;}
    .trackback h4 { font-weight:normal; margin:0; font-weight:bold;}
    .trackback ol { margin:0; padding:0; list-style:none;}
    .trackback li { padding:5px;}
    .trackback .date { font:7pt Verdana; color:#999;}
    .trackback p { color:#999; margin:3px 0 0 0; padding:0; letter-spacing: 0px;}
    .trackback a.delete span {font:7pt Verdana; color:#999;}

    .comment { background:url(images/small-border.gif) no-repeat; padding-top:30px; margin-bottom:4px; width:100%; overflow:hidden;}
    .comment p { margin:3px 0 0 0; padding:0;}
    .comment h3 { display:none;}
    .comment ol,
    .comment ul { margin:0; padding:0; list-style:none;}
    .comment .date { font:7pt Verdana; color:#999;}
    .comment .name { font-weight:bold;}
    .comment ol li { padding:10px 5px;}
    .comment li ul li { padding:5px 10px 10px 40px; }

    .comment .control a.address span,
    .comment .control a.modify span,
    .comment .control a.write span { font:7pt Verdana; color:#999;}

    .commentWrite { padding:5px; margin-top:20px; font:7pt verdana;}
    .commentWrite input { font:9pt verdana; width:150px; color:#666;}
    .commentWrite textarea { font:9pt verdana; width:608px; color:#666; padding:5px; top:5px; }
    .commentWrite .homepage { width:300px;}
    .commentWrite .submit { height:20px; width:150px; background-color:#aaa; font:7pt verdana; color:#fff;}
    .commentWrite .checkbox { width:25px; border:none; padding:0; margin:0; }

    .paging { padding:20px 0px 20px 0px; text-align:left; font:7pt verdana;}
    .paging .numbox { border-left:1px solid #ccc; padding-left:6px; margin-left:6px; font:7pt verdana;}
    .paging .num { border-right:1px solid #ccc; padding-right:8px; margin-right:5px; font:7pt verdana;}
    .paging a:visited { color:#999; text-decoration:none;}
    .paging a:hover { font-weight:bold; color:#7aa;}




    /* ------------------------------------------------------------------- */
    /* ***** footer ***** */
    /* ------------------------------------------------------------------- */

    #footer { line-height:130%; padding:20px 0px; font-size:7pt;}
    #footer .counter { }


    /* ------------------------------------------------------------------- */
    /* ***** etc ***** */
    /* ------------------------------------------------------------------- */

    .imageblock * { border:none !important;}
    #mediaLogLimit { display:none !important;}
    div .box { width: 95%; height: auto; margin: 0; border: 1px dotted #7aa; padding: 8px;}

    大道 2010.06.16 02:00

반드시 들어가야 하는 스타일

본문 공통 - body a:link a:visited a:hover a:active
페이징/현재 페이지 - .selected
카테고리 - .ib .branch3 .c_cnt
달력 - .cal_month .cal_week1 .cal_week2 .cal_week .cal_current_week .cal_day .cal_day_sunday .cal_day_sunday a .cal_day1 .cal_day2 .cal_day3 .cal_day4 a.cal_click:link a.cal_click:visited a.cal_click:hover
종류별 댓글 - .rp_general .rp_admin .rp_secret .guest_general .guest_admin .hiddenComment
이미지 - .cap1 .imageblock .left .center .right .dual .triple img
특기 - .moreless_fold .moreless_top .moreless_body .moreless_bottom
키워드 - .key1
도형 - hr input textarea
제목 - h1 h2 h3 h4

자유롭게 추가, 삭제 가능

블로그 레이아웃
- #container #left #header #sidebar #content

Header - #header h2 #header span #header span a #header span a:hover

sidebar - #sidebar ul #sidebar li #sidebar h3 #sidebar h3 span:hover #sidebar .cnt #sidebar .search #sidebar .search input #sidebar .search .submit #recentPost #recentComment #recentTrackback #calendar #archive #link

Categories - #category #category ul #category li a #category ul li ul li a #category ul li ul li ul li #category ul li ul li ul li a #category .selected #category .selected ul li

content - #content .localog #content .taglog #content .entryNotice #content .entryProtected #content .entry #content .guestbook #content .searchList #content .searchRplist #content .localog h3 #content .taglog h3 #content .guestbook h3 #content .medialog h3 #content .searchRplist h3 #content .search~ .tag~ .guest~

entry - .entry~ .title~ .article~ .tag~ .track~ .comment~ .paging~

footer - #footer #footer .counter

etc - .imageblock * #mediaLogLimit div .box

posted by 大道

블로그 기초 - skin.html

On/HtmlCss 2010.06.16 00:30
  • 메뉴
    <a href="notice">notice</a>
    / <a href="">tag</a>
    / <a href="media">media</a>
    / <a href="">guestbook</a>
    / <a href="">admin</a>

    大道 2010.06.16 00:30
  • 모듈-검색
    <div class="search">
    <s_search>
    <input type="text" name="" value="" onkeypress="if (event.keyCode == 13) { }"/>
    <input value="search" type="button" onclick="" class="submit"/>
    </s_search>
    </div>

    大道 2010.06.16 00:34
  • 모듈-범주
    <h3><a onclick="showHide('category')" onfocus="this.blur()"><span>Category</span></a></h3>
    <div id="category" style="display:none">

    </div>

    大道 2010.06.16 00:35
  • 뉴스:
    <s_list>
    <div class="searchList">
    <h3>''에 해당되는 글 건</h3>
    <ol>
    <s_list_rep>
    <li>
    <a href=""></a>
    <span class="cnt"></span>
    <span class="date"></span>
    </li>
    </s_list_rep>
    </ol>
    </div>
    </s_list>

    大道 2010.06.16 00:52
  • 페이징:
    <s_paging>
    <div class="paging">
    <a class="">&lt;&lt; previous </a>
    <span class="numbox">
    <s_paging_rep>
    <a class="num"> </a>
    </s_paging_rep>
    </span>
    <a class="">next &gt;&gt;</a>
    </div>
    </s_paging>

    大道 2010.06.16 00:53
  • 푸터:
    <div id="footer">
    <div class="counter">
    T Y T
    </div>
    <div class="copyright">
    Powered by
    <a href="http://tistory.com" onclick="window.open(this.href); return false"></a>, Designed by <a href="http://seevaa.net" onclick="window.open(this.href); return false">seevaa</a>
    </div>
    </div><!-- footer close -->

    大道 2010.06.16 00:54
  • 상치:
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="alternate" type="application/rss+xml" title="" href="" />
    <link rel="stylesheet" media="screen" type="text/css" href="./style.css" />
    <link rel="shortcut icon" href="favicon.ico" />
    <script type="text/javascript" src="./images/script.js" ></script>
    <title> :: </title>

    大道 2010.06.16 00:55
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>상치</head>

<body>
<s_t3>
<div id="container">

<div id="left" >
<div id="header">
   <h2><a href="[##_blog_link_##]">[##_title_##]</a></h2>
   <span>메뉴</span>
</div>
<div id="sidebar" ><s_sidebar>
   <s_sidebar_element>모듈</s_sidebar_element>
<s_sidebar></div>
</div>

<div id="content">
   목록 - 뉴스, 댓글, 지리, 태그, 미디어, 손님, 공지, 보호, 내용, 페이징, 푸터
</div>

</div></s_t3></body></html>

posted by 大道