사용자 삽입 이미지
『웹디자인 2.0 고급 CSS: 감각적인 웹디자인 예술 미학』
앤디 클락 지음 | 몰리 홀즈쉬랙 감수 | 정유한 옮김
2008년 1월 29일 출간 예정 | 35,000원 | 392쪽


체크해야 할 책이 생겼군...
가격이 상당한걸로 봐서 분명 올 컬러에 이것저것 사이트 이미지를 가진 디자이너적 책일거라는 추측.
뭔가 표지부터 감각적이지 않은가!!
괜찮으면 회사에다 사달랠까...흐흐...(넌 개발자잖아!!)


신고

'Information' 카테고리의 다른 글

웹사이트 기획시 사용하는...  (0) 2008.02.27
웹디자인 2.0 고급 CSS  (6) 2008.02.26
IE의 한글폰트 사이즈 적용문제  (0) 2008.02.26
기업 로고의 발달 과정  (0) 2008.02.26
Posted by marga
TAG CSS,
IE의 경우 CSS에서 부여한 font-size 를 무시하는 경우가 발생한다.
이를 잘 정리해 놓은 블로그가 있어서 아래에 일단 링크를 해 두고...

잘 정리해 놓은 블로그 가기

요약하자면...
IE에서는 특정 조건을 만족 시켜 주지 않으면, 한글폰트의 경우 font-size:11px 을 무시한다.
이를 해결하기 위해서는 font-famaily의 맨 앞에 한글 폰트를 명시해 준다.
font-famaily : 돋움, Dotum, Verdana;
font-size : 11px;


CSS에 관심이 없다면 굳이 이해하려 하지 않아도 좋다.
신고

'Information' 카테고리의 다른 글

웹디자인 2.0 고급 CSS  (6) 2008.02.26
IE의 한글폰트 사이즈 적용문제  (0) 2008.02.26
기업 로고의 발달 과정  (0) 2008.02.26
정보통신부제공 우편번호 데이터  (0) 2008.02.22
Posted by marga
TAG CSS
@charset "utf-8";
/* 반드시 들어가야 하는 스타일 시작 */
/* 1. 본문 전체  */
body{
    font: 12px/1.5 Dotum, Verdana, AppleGothic, Sans-serif;
    padding:20px 0;    
    color : #666;    
    background:/*@background-image=url(images/bg.gif)*/ url("images/bg.gif") /*@*/;
    /*@background-image-position=background-position:;*/ background-position: ; /*@*/
    /*@background-image-repeat=background-repeat:;*/ background-repeat: no-repeat; /*@*/
    background-color:/*@background-color=#ddd*/ #ddd /*@*/;
}
/* 2. 기본 링크 */
    a:link {
        text-decoration: none;
        color : #369;
    }
    a:visited {
        text-decoration: none;    
        color : #369;
    }
    a:hover {
        text-decoration: underline;    
        color : #666;
    }
    a:active {
        text-decoration: none;    
        color : #666;
    }    
/* 3. 이미지 */
    img {
        border-width: 0px;
    }
/* 4. 이미지 버튼 */
    .ib {
        cursor: pointer;
    }
/* 5. 입력 텍스트 */
    .text {
    border:1px solid #999;
    }
/* 6. 트리 테이블 */
    .branch2 {
    }
/* 7. 트리 셀 */
    .branch3 {
        cursor: pointer;
        height: 10px;
    }
/* 8. 달력 월 표시 */
    .cal_month {
        font-size : 11px;
        height: 18px;
    }
/* 9. 달력 요일 표시 */
    .cal_week1 {
        font-size : 11px;
        height:18px;
    }
/* 10. 달력 일요일 표시 */
    .cal_week2 {
        color: #f30;
        font-size:12px;
        text-align: center;
    }
/* 11. 달력 지난 달 날짜 표시 */
    .cal_day1 {
        color: #000;
        font-size:12px;
        text-align:center;
    }
/* 12. 달력 다음 달 날짜 표시 */
    .cal_day2 {
        color: #000;
        font-size : 11px;
        text-align: center;
    }
/* 13. 달력 이번 달 날짜 표시 */
    .cal_day3 {
        font-size : 11px;
        text-align: center;
    }
/* 14. 달력 오늘 날짜 표시 */
    .cal_day4 {
        text-align: center;
        font-size : 11px;
        background-color:#ccc;
        font-weight:bold;
    }
/* 15. 달력 글쓴 날 링크 스타일 */
    a.cal_click:link {
        font-weight: bold;
        color : #333;
    }
    a.cal_click:visited {
        font-weight: bold;
        color : #333;
    }
    a.cal_click:hover {
        font-weight: bold;
        color : #369;
    }
/* 16. 이미지 아래 캡션 스타일 */
    .cap1 {
        color: #876;
        text-align: center;
    }
/* 16. 키워드 스타일 */
    .key1 {
        cursor: pointer;
        border-bottom: 1px dotted #ccc;
    }
/* 16. 카테고리 옆 개수 스타일 */
    .c_cnt {
        font:9px Tahoma;
        color : #999;
    }
/* 17. 최신글 옆 개수 스타일 */
    .ps_cnt {
        font:10px Tahoma;
        color : #999;
    }

/* 반드시 들어가야하는 스타일 끝 - 이 아래는 자유롭게 추가, 삭제 가능 */
hr {
display:none;
}    
/* Structured */
#container {
    width:/*@post-width:240=*/ 940px /*@*/;
    background:url("images/bg_footer.gif") repeat-x bottom #fff;    
    border:1px solid #ccc;
    border-bottom:6px solid #ccc;    
    margin:0 auto;
    padding:20px;  
    background-color:#fff;
}
#content {                              /* 사이드바를 왼쪽으로 옮겨보세요 */
    float:left;
    margin-right:20px;    
    width:/*@post-width=*/ 700px /*@*/;
    overflow:hidden;
}
#sidebar {
    float:left;
    width:200px;
    margin-top:10px;
    border:5px solid #eee;
    padding:5px;
    overflow:hidden;    
}
#footer {
    clear:both;
}



/* header */
#header {
    padding: /*@title-height:-43=padding-top:*/ 30px /*@*/ 0 15px 60px;
    /*@title-background-image=background-image:url(images/bg_header.gif);*/ background-image: url("http://cfs.tistory.com/blog/style/template/image/title/4.jpg"); /*@*/
    /*@title-background-image-repeat=background-repeat:no-repeat;*/ background-repeat: repeat; /*@*/
    /*@title-background-image-position=background-position:;*/ background-position: center top; /*@*/
    /*@title-background-color=background-color:;*/ background-color: transparent; /*@*/
}
#header h1{
    margin:0;
    font-size:20px;
    float:left;
}
#header h1 a{
    font-size: /*@title-font-size=*/ 20px /*@*/;
    font-family:/*@title-font-family=*/ dotum /*@*/;
}
#header a{
    color:/*@title-color=*/ #fff /*@*/;     /* 헤더의 배경 이미지에 맞게 블로그 제목을 잘보이는 색으로 바꿔주세요 */
}
#header .sidemenu {
  padding:10px 35px 0 0;
    margin-left:400px;
    text-align:right;
}
#header .sidemenu a{
    padding-left:10px;
}




/* sidebar common*/
#sidebar ul{
    margin:0;
    padding:0;
    list-style:none;    
    }
#sidebar .name {
    font:11px dotum;
    color:#999;
}
#sidebar .date {
    font-size:12px;
    color:#999;    
}    
#sidebar .cnt {
    font :10px Tahoma;
    color:#333;
}
#sidebar h3 {      /* 사이드바의 제목을 바꿔보세요 */
    font:12px Tahoma;
    font-weight:bold;
    background:#eee;
    border-top:1px solid #ccc;
    padding:3px 5px;
    margin:0;
}    
#sidebar a {        /* 사이드바의 링크 색을 바꿔보세요 */
    color:#369;
}    
#sidebar .box {
    padding:8px;
}
/* admin menu */
#sidebar .owner {
    font-size:12px;
    text-align:center;
}
/* blog info (desc, image) */

#sidebar .blogimg {
    width:200px;
    overflow:hidden;
    text-align:center;
}
#sidebar .bloginfo {
    text-align:center;
}
#sidebar .bloginfo img{
    padding:5px;
}
/* notice list */
#sidebar .notice {
    padding:5px 10px;
    background-color:#eeeeee;    /* 사이드바의 공자사항 배경색을 바꿔보세요 */
    margin:5px 0;
}
#sidebar .notice li {
background:url(images/iconNotice.gif) no-repeat 0 50%;
padding-left:38px;
}
#sidebar .notice li a{
    font-size:12px;
    letter-spacing:-1px;
    color:#333;
}
/* search */
#sidebar .search {
    text-align:center;
    padding:5px 0;
}
#sidebar .search input{
    width:130px;
}
#sidebar .search .submit{
    border:1px solid #999;
    background-color:#ddd;
    font:11px Verdana;
    color:#222;
    width:50px;    
}
/* category, category_list*/
#sidebar .category .box li ul li ul li{
    list-style-image:none;
    padding-left:10px;
    margin-left:7px;
    border-left:1px dotted #999;
}
#sidebar .category .box a{
    font-size:12px;
    color:#333;
}
/* tag cloud*/
#sidebar .tagbox ul {
    padding:5px;
    text-align: justify;        
  }
#sidebar .tagbox a {
    letter-spacing:-1px;
    }    
#sidebar .tagbox li .cloud1 {       /* 사이드바의 태그 클라우드 스타일을 바꿔보세요 */
    background-color:#eee;
    font-weight:bold;
  font-size : 16px;
  color : #f30;
  }
#sidebar .tagbox li .cloud2 {
    background-color:#eee;
    font-weight:bold;    
  font-size : 15px;
  color : #f60;
  }
#sidebar .tagbox li .cloud3 {
    background-color:#eee;
    font-weight:bold;    
  font-size : 14px;
  color : #369;
  }
#sidebar .tagbox li .cloud4 {
    background-color:#eee;
  font-size : 13px;
  color : #690;
  }
#sidebar .tagbox li .cloud5 {
  font-size : 12px;
  color : #999;
  }    
#sidebar .tagbox a:hover{
    background-color:#cce5ff;
  color:#000;
  }    
/* recent posts, recent comment, recent trackback, archive, link */
#sidebar .listbox {
    padding:5px 0;
}
#sidebar .listbox ul {
    padding:5px 0;
    margin-left:3px;
}
#sidebar .listbox li {
    background:url(images/bul.gif) no-repeat 0 5px;
    line-height:16px;
    padding-left:8px;
}    
/* counter */
#sidebar .counter {
    background-color:#eee;
    padding:5px 0;
    text-align:center;
    font:10px verdana;
}
#sidebar .ad{
    text-align:center;
    padding:5px 0;
}




/* content common */
#content h2 a{    /* 글 제목의 스타일을 바꿔보세요 */
    font-size:18px;
    padding-top:10px;
    margin:0;
    /*@post-title-color=color:;*/ color: ; /*@*/ /*@post-title-font-family=font-family:;*/ font-family: inherit; /*@*/ /*@post-title-font-size=font-size:;*/ font-size: inherit; /*@*/
}
#content h2 a:hover{    /* post title mouseover*/
    text-decoration:none;
    color:#222;
    background:url(images/iconTitleLink.gif) no-repeat top right;
    padding-right:15px;
}
#content h3 {    /* tag, search, location, guestbook title */
    font-size:14px;
    color:#333;
    margin:10px 0;
    border-bottom:1px solid #ddd;    
    padding-bottom:5px;
}
#content ol, #content ul {
    list-style:none;
    padding:0;        
    margin:0;
}
#content .name {
    font-size:12px;
    color:#666;
    letter-spacing:-1px;
}
#content .cnt {
    font:10px Verdana;
    color:#666;
}
#content .date {
    font:10px Verdana;
    letter-spacing:-1px;    
    color:#666;    
}
#content cite {
    font-size:12px;
    font-style:normal;
    color:#666;
}
/* tag  */
#content .tagcloud ul {
    padding:5px;
    text-align:justify;        
  }
#content .tagcloud li {
    display:inline;
    }        
#content .tagcloud a:hover{
    background-color:#cce5ff;
  color:#000;
  }        
#content .tagcloud li .cloud1 {
    background-color:#eee;
    font-weight:bold;
  font-size : 16px;
  color : #f30;
  }
#content .tagcloud li .cloud2 {
    background-color:#eee;
    font-weight:bold;    
  font-size : 15px;
  color : #f60;
  }
#content .tagcloud li .cloud3 {
    background-color:#eee;
    font-weight:bold;    
  font-size : 14px;
  color : #369;
  }
#content .tagcloud li .cloud4 {
    background-color:#eee;
  font-size : 13px;
  color : #690;
  }
#content .tagcloud li .cloud5 {
  font-size : 12px;
  color : #999;
  }    

/* search list, rplist */    
#content .list, .rplist{
    margin-bottom:50px;
}
#content .list .date, .rplist .date{
    padding-right:8px;
}
/* location */
.location .spot {
    padding-left:30px;
    background:url("images/iconIndentArrow_local.gif") no-repeat 10px 2px;
    margin-bottom:3px;
    }    
.location .info {
    padding-left:15px;
    background:url("images/iconIndentArrow_localinfo.gif") no-repeat 0 50%;
    margin-bottom:3px;
    }    
/* guestbook > write */
.guestbook .write {
    margin-bottom:20px;
}
.guestbook .write p{
    padding:2px;
    margin:0;
}
.guestbook .write input{
    border:1px solid #999;
    height:18px;
    width:200px;
}
.guestbook .write .homepage{
    height:18px;
    width:400px;
}
.guestbook .write .submit{
    border:1px solid #aaa;
    background-color:#ddd;
    height:25px;
    width:98%;
    color:#333;
}
.guestbook .write label{
    font:10px Verdana;
}
.guestbook .write textarea{
    width:98%;
    height:150px;
    border:1px solid #aaa;    
    overflow:visible;
}
/* guestbook > list */
.guestbook p{
    padding:5px 0;
    margin:0;
}
.guestbook .list ol li{
    padding:10px 10px 10px 25px;
    background:url("images/iconGuestbook.gif") no-repeat 0 12px;    
}
.guestbook .list li ul li{
    padding-left:30px;
    margin-left:20px;
    background:url("images/iconIndentArrow_local.gif") no-repeat 10px 12px;
    background-color:#f5f5f5;
}
.guestbook .list .name a{
    font-size:12px;
    font-weight:bold;
    color:#666;
    padding-right:12px;
    background:url("images/icon_homepage.gif") no-repeat 0px right;
}
.guestbook .control a{
    font:9px tahoma;
    background:url("images/iconControl.gif") no-repeat center right;    
    padding-right:10px;
    color:#999;
    margin-right:5px;
}
.guestbook .control a:hover{
    background-color:#ddd;
    color:#333;
}
/* entry > notice */
.entry_notice {
    margin-bottom:30px;
    }
.entry_notice .article {
    padding:10px 0;
}    
/* entry > protected  */
.entry_protected {
    border-bottom:1px solid #ddd;
    margin-bottom:15px;
    }
.entry_protected h2 {
    color:#369;
}
.entry_protected input {
    border:1px solid #999;
    font:10px Tahoma;
}
.entry_protected .submit {
    border:1px solid #bbb;
    background-color:#ddd;
}

/* entry article*/
.entry .article {
    padding:10px 0;
    /*@post-body-color=color:;*/ color: ; /*@*/ /*@post-body-font-family=font-family:;*/ font-family: inherit; /*@*/ /*@post-body-font-size=font-size:;*/ font-size: inherit; /*@*/
}
.entry .article blockquote {
    border-left: 7px double #ccc;
    margin: 10px 10px 10px 20px;
    padding-left: 10px;
}    
.entry .article a{
    color:#369;
    border-bottom:1px dotted #999;
}    
#content .entry .article ul{
    padding:10px 30px;
    list-style-type:disc;
}    
#content .entry .article ol{
    padding:10px 30px;
    list-style-type:decimal;
}        
.entry .article a:hover{
    color:#369;
    text-decoration:none;
}    
/* entry top button*/
.entry .btn_top{
    text-align:right;
    margin-top:3px;
    clear:both;    
}
/* entry tag */
.entry .tagbox{
    padding:5px;
}
.entry .tagtext{
    font:9px verdana;
    font-weight:bold;
    background-color:#369;
    color:#fff;
    padding:1px 3px;
    margin-right:8px;
}
/* entry trackback, comment  */
.entry .tbrp_box {
    border-top:1px dotted #ccc;
    border-bottom:1px solid #999;
    padding:7px 8px;
    font:11px verdana;
}
.entry .tbrp_box .cnt{
    font:10px verdana;
    color:#666;
}
/* entry trackback */
.entry .trackback {
    font-family:verdana, dotum;
    background-color:#f5f5f5;
    padding:10px;
    margin-bottom:4px;
}    
.entry .trackback .add {
    margin:5px;
    font:11px Verdana;
    color:#333;
}    
.entry  .trackback li{
    border-top:1px dotted #ccc;
    padding:10px 0;
}
.entry .trackback h4{
    font:12px Verdana;
    font-weight:normal;
    margin:0;
}
/* entry comment */
.entry .comment {
    background-color:#f5f5f5;
    padding:10px;
}    
.entry .comment p{
    margin:0;
}    
.entry .comment ol li{
    padding:15px 10px 0 25px;
    background:url("images/iconGuestbook.gif") no-repeat 0 15px;        
}
.entry .comment li ul li{
    padding:15px 10px 0 25px;
    background:url("images/iconIndentArrow_local.gif") no-repeat 10px 12px;
    background-color:#f5f5f5;
}
.entry .control{
    font:11px dotum;
    color:#999;
    letter-spacing:-1px;
}
.entry .control a{
    font:11px dotum;
    color:#999;
}
.entry .control a:hover{
    background-color:#ddd;
    color:#333;
}
.comment .write {
    margin-bottom:20px;
}
.comment .write p{
    padding:2px;
    margin:0;
}
.comment .write input{
    border:1px solid #999;
    width:150px;
}
.comment .write .homepage{
    width:260px;
}
.comment .write .submit{
    border:1px solid #aaa;
    background-color:#ddd;
    height:25px;
    width:98%;
    color:#333;
}
.comment .write label{
    font:10px Verdana;
}
.comment .write textarea{
    width:98%;
    height:150px;
    border:1px solid #aaa;    
    overflow:visible;
}
.comment .write .checkbox{
    border:none;
    padding:0;
    margin:0;
    width:25px;
    }

/* paging */
.paging{
    padding-top:10px;
    text-align:center;
    font:10px Tahoma;
}

/* footer */
#footer {
    text-align:center;
    padding:50px 10px 10px 10px;
    font:11px Verdana, dotum;
}
신고

'Developer > CSS / HTML' 카테고리의 다른 글

meta tag 기본정리  (0) 2010.10.29
Tistory CSS  (0) 2008.02.19
검색엔진 노출방지 robots.txt & meata tag  (0) 2008.02.04
DOCTYPE 선언  (0) 2007.11.22
Posted by marga
TAG CSS
원문 : http://www.mozilla.or.kr/docs/web-developer/standard/

실전 웹 표준 가이드 (2005)

본 가이드는 XHTML, CSS, DOM, ECMAScript 등 모든 웹 표준에 대한 이슈를 새롭게 정리하고, 웹 개발 프로젝트에서 표준을 준수하는 방법을 제공하는 가이드 입니다.

목 차

  • 웹 표준이란 무엇인가?
  • 실전 XHTML 가이드
    • XTHML 소개
    • XHTML 일반 문법 준수
    • 구조적 XHTML 사용 방법
  • 실전 CSS 레이아웃
    • CSS 개념 및 소개
    • CSS 레이아웃(LAYOUT) 기초
    • 실전 예제를 통한 CSS 레이아웃
    • 고급 CSS 레이 아웃
  • 실전 DOM/Script 가이드
    • W3C DOM vs. MS DOM
    • 표준 JAVASCRIPT 사용 방법
    • 올바른 플러그인(PLUGIN) 사용
  • 실전 표준 웹 프로그래밍
    • 표준 MIME 타입 설정
    • 표준 문자 인코딩 지정
  • 실전 웹 표준 개발 프로세스
    • 현재 프로세스 소개(Waterfall 방식)
    • 개선된 모델(퍼블리셔 중심)
    • 새로운 개발 프로세스
  • 맺음말
  • 부록 : 웹 표준 사양-브라우저 호환차트
- URL: http://www.mozilla.or.kr/docs/web-developer/web-standard-guide-2005.pdf
- 인쇄 버전 : PDF 파일 (223pp), PDF 파일(부록 포함, 305pp)

웹 표준 기반 홈페이지 구축 가이드 (2004)

본 가이드는 브라우저 호환성 유지 방법은 물론 XHTML/CSS 레이아웃을 통한 홈페이지 개발 방법을 소개한 가이드 입니다.

목 차

  • 1부 브라우저 호환성 유지 방안
    • 현대 웹사이트 제작의 방향
    • W3C 표준안
    • 정확한 문서 형식 사용
    • 올바른 HTML 및 CSS 사용 방법
    • 올바른 객체 모델 및 자바스크립트 사용 방법
    • 웹페이지 디버깅 도구 사용
  • 2부 웹표준 기반 페이지 제작 방법
    • 구조와 표현의 분리
    • XHTML를 사용해야 하는 이유
    • XHTML의 주요 특징
    • CSS 사용 방법
    • CSS 레이아웃 vs.Table 레이아웃
- 인쇄 버전 : PDF 파일

Cross Browsing 가이드(2003)

본 가이드는 각 웹 브라우저의 비 표준 기능과 이를 극복할 수 있는 방법을 위주로 작성된 것입니다.

목 차

- 인쇄 버전 : PDF 파일
신고
Posted by marga

출처 : http://www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/

CSS isn’t always easy to deal with. Depending on your skills and your experience, CSS coding can sometimes become a nightmare, particularly if you aren’t sure which selectors are actually being applied to document elements. An easy way to minimize the complexity of the code is as useful as not-so-well-known CSS attributes and properties you can use to create a semantically correct markup.

We’ve taken a close look at some of the most interesting and useful CSS tricks, tips, ideas, methods, techniques and coding solutions and listed them below. We also included some basic techniques you can probably use in every project you are developing, but which are hard to find once you need them.

And what has come out of it is an overview of over 70 expert tips, which can improve your efficiency of CSS coding. You might be willing to check out the list of references and related articles in the end of this post.

We’d like to express sincere thank to all designers who shared their ideas, techniques, methods, knowledge and experience with their readers. Thank you, we, coders, designers, developers, information architects - you name it - really appreciate it.

1.1. Workflow: Getting Started

  • After you have a design, start with a blank page of content. “Include your headers, your navigation, a sample of the content, and your footer. Then start adding your html markup. Then start adding your CSS. It works out much better.” [CSSing]
  • Reset your CSS-styles first. “You can often eliminate the need to specify a value for a property by taking advantage of that property’s default value. Some people like doing a Global white space reset by zeroing both margin and padding for all elements at the top of their stylesheets. Eric Meyer’s Global Reset, Christian Montoya’s initial CSS file, Mike Rundle’s initial CSS file, Ping Mag’s initial CSS file. [Roger Johansson]
  • Use a master stylesheet. “One of the most common mistakes I see beginners and intermediates fall victim to when it comes to CSS is not removing the default browser styling. This leads to inconsistencies in the appearance of your design across browsers, and ultimately leaves a lot of designers blaming the browser. It is a misplaced blame, of course. Before you do anything else when coding a website, you should reset the styling.” [Master Stylesheet: The Most Useful CSS Technique], [Ryan Parr]
  1. master.css
  2. @import url("reset.css");
  3. @import url("global.css");
  4. @import url("flash.css");
  5. @import url("structure.css");
  1. <style type="text/css" media="Screen">
  2. /*\*/@import url("css/master.css");/**/
  3. </style>
  • Keep a library of helpful CSS classes. Useful for debugging, but should be avoided in the release version (separate markup and presentation). Since you can use multiple class names (i.e. <p class="floatLeft alignLeft width75">...</p>), make use of them debugging your markup. (updated) [Richard K. Miller]
  1. CSS:
  2. .width100 { width: 100%; }
  3. .width75 { width: 75%; }
  4. .width50 { width: 50%; }
  5. .floatLeft { float: left; }
  6. .floatRight { float: right; }
  7. .alignLeft { text-align: left; }
  8. .alignRight { text-align: right; }

1.2. Organize your CSS-code

  • Organize your CSS-styles, using master style sheets. “Organizing your CSS helps with future maintainability of the site. Start with a master style sheet. Within this style sheet import your reset.css, global.css, flash.css (if needed) and structure.css and on occasion a typography style sheet. Here is an example of a “master” style sheet and how it is embedded in the document:”
  1. h2 { }
  2. #snapshot_box h2 {
  3. padding: 0 0 6px 0;
  4. font: bold 14px/14px "Verdana", sans-serif; }
  5. #main_side h2 {
  6. color: #444;
  7. font: bold 14px/14px "Verdana", sans-serif; }
  8. .sidetagselection h2 {
  9. color: #fff;
  10. font: bold 14px/14px "Verdana", sans-serif; }
  • Organize your CSS-styles, using flags. “Divide your stylesheet into specific sections: i.e. Global Styles – (body, paragraphs, lists, etc), Header, Page Structure, Headings, Text Styles, Navigation, Forms, Comments, Extras. [5 Tips for Organizing Your CSS]
  1. /* -----------------------------------*/
  2. /* ---------->>> GLOBAL <<<-----------*/
  3. /* -----------------------------------*/
  • Organize your CSS-styles, making a table of contents. At the top of your CSS document, write out a table of contents. For example, you could outline the different areas that your CSS document is styling (header, main, footer etc). Then, use a large, obvious section break to separate the areas. [5 Steps to CSS Heaven]
  • Organize your CSS-styles, ordering properties alphabetically. “I don’t know where I got the idea, but I have been alphabetizing my CSS properties for months now, and believe it or not, it makes specific properties much easier to find.” [Christian Montoya]
  1. body {
  2. background:#fdfdfd;
  3. color:#333;
  4. font-size:1em;
  5. line-height:1.4;
  6. margin:0;
  7. padding:0;
  8. }
  • Separate code into blocks.. “This might be common sense to some of you but sometimes I look at CSS and it’s not broken down into “sections.” It’s easy to do an it makes working with code weeks, months, or years later much easier. You’ll have an easier time finding classes and elements that you need to change. Examples: /* Structure */, /* Typography */ etc.” [CSS Tips and Tricks]
  • Hook, line, and sinker. Once you have your CSS and sections in place start considering where your selector “hooks” will live by using structural hooks in your mark up. This is your saving grace for future editing and maintenance of the site. This will also give you strength in your document.” [Ryan Parr]
  • Break your style sheet in separate blocks. “I break down my style sheet into three separate blocks. The first is straight element declarations. Change the body, some links styles, some header styles, reset margins and padding on forms, and so on. […] After element declarations, I have my class declarations; things like classes for an error message or a callout would go here. [..] I start by declaring my main containers and then any styles for elements within those containers are indented. At a quick glance, I can see how my page is broken down and makes it easier to know where to look for things. I’ll also declare containers even if they don’t have any rules.” [Jonathan Snook]

1.3. Workflow: Handling IDs, Classes, Selectors, Properties

  • Keep containers to a minimum. “Save your document from structural bloat. New developers will use many div’s similar to table cells to achieve layout. Take advantage of the many structural elements to achieve layout. Do not add more div’s. Consider all options before adding additional wrappers (div’s) to achieve an effect when using a little nifty CSS can get you that same desired effect.” [Ryan Parr]
  • Keep properties to a minimum. “Work smarter, not harder with CSS. Under this rule, there are a number of subrules: if there isn’t a point to adding a CSS property, don’t add it; if you’re not sure why you’re adding a CSS property, don’t add; and if you feel like you’ve added the same property in lots of places, figure out how to add it in only one place.” [CSSing]
  • Keep selectors to a minimum. “Avoid unnecessary selectors. Using less selectors will mean less selectors will be needed to override any particular style — that means it’s easier to troubleshoot.” [Jonathan Snook]
  • Keep CSS hacks to a minimum. “Don’t use hacks unless its a known and documented bug. This is an important point as I too often see hacks employed to fix things that aren’t really broken in the first place. If you find that you are looking for a hack to fix a certain issue in your design then first do some research (Google is your friend here) and try to identify the issue you are having problems with. [10 Quick Tips for an easier CSS life]
  • Use CSS Constants for faster development. “The concept of constants – fixed values that can be used through your code [is useful]. [..] One way to get round the lack of constants in CSS is to create some definitions at the top of your CSS file in comments, to define ‘constants’. A common use for this is to create a ‘color glossary’. This means that you have a quick reference to the colors used in the site to avoid using alternates by mistake and, if you need to change the colors, you have a quick list to go down and do a search and replace.” [Rachel Andrew]
  1. # /*
  2. # Dark grey (text): #333333
  3. # Dark Blue (headings, links) #000066
  4. # Mid Blue (header) #333399
  5. # Light blue (top navigation) #CCCCFF
  6. # Mid grey: #666666
  7. # */
  • Use a common naming system. Having a naming system for id’s and classes saves you a lot of time when looking for bugs, or updating your document. Especially in large CSS documents, things can get a big confusing quickly if your names are all different. I recommend using a parent_child pattern. [10 CSS Tips]
  • Name your classes and IDs properly, according to their semantics. “We want to avoid names that imply presentational aspects. Otherwise, if we name something right-col, it’s entirely possible that the CSS would change and our “right-col” would end up actually being displayed on the left side of our page. That could lead to some confusion in the future, so it’s best that we avoid these types of presentational naming schemes. [Garrett Dimon]
  • Group selectors with common attributes. “Group selectors. When several element types, classes, or id:s share some properties, you can group the selectors to avoid specifying the same properties several times. This will save space – potentially lots of it.” [Roger Johansson]
  • Isolate single properties that you are likely to reuse a lot. “If you find yourself using a single property a lot, isolate it to save yourself repeating it over and over again and also enabling you to change the display of all parts of the site that use it.” [5 Steps to CSS Heaven]
  • Move ids and class naming as far up the document tree as you can. Leverage contextual selectors as much as possible. Don’t be afraid to be verbose in your selectors. Longer selectors can make css documents easier to read while also cutting down the chances of developing class- or divitis. [Chric Casciano]
  • Learn to exploit the cascading nature of CSS. “Say you have two similar boxes on your website with only minor differences - you could write out CSS to style each box, or you could write CSS to style both at the same time, then add extra properties below to make one look different.” [5 Steps to CSS heaven]
  • Use Your Utility Tags: <small>, <em> and <strong>. “Many times you’ll have a section in your design that calls for various typographical weights/looks all on the same line, or very close to each other. drop in random divs and classes because I feel they’re not semantic and defeat the purpose of your nice XHTML everywhere else.” Instead, use semantic tags. [Mike Rundle’s 5 CSS Tips]

1.4. Workflow: Use shorthand notation

  • Shorten hexadecimal colour notation. “In CSS, when you use hexadecimal colour notation and a colour is made up of three pairs of hexadecimal digits, you can write it in a more efficient way by omitting every second digit: #000 is the same as #000000, #369 is the same as #336699 [Roger Johansson]
  • Define pseudo classes for links in the LoVe/HAte-order: Link, Visited, Hover, Active. “To ensure that you see your various link styles, you’re best off putting your styles in the order “link-visited-hover-active”, or “LVHA” for short. If you’re concerned about focus styles, they may go at the end– but wait until you’ve read this explanation before you decide.” [Eric Meyer]
  1. a:link { color: blue; }
  2. a:visited { color: purple; }
  3. a:hover { color: purple; }
  4. a:active { color: red; }
  • Define element’s margin, padding or border in TRouBLed-order: Top, Right, Bottom, Left. “When using shorthand to specify an element’s margin, padding or border, do it clockwise from the top: Top, Right, Bottom, Left.” [Roger Johansson]
  • You can use shorthand properties.
    “Using shorthand for margin, padding and bottom properties can save a lot of space.
  1. CSS:
  2. margin: top right bottom left;
  3. margin:1em 0 2em 0.5em;
  4. (margin-top: 1em; margin-right: 0; margin-bottom: 2em; margin-left: 0.5em;)
  1. CSS:
  2. border:width style color;
  3. border:1px solid #000;
  1. CSS:
  2. background: color image repeat attachment position;
  3. background:#f00 url(background.gif) no-repeat fixed 0 0;
  1. CSS:
  2. font: font-style (italic/normal) font-variant (small-caps) font-weight font-size/line-height font-family;
  3. font: italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

1.5. Workflow: Setting Up Typography

  • To work with EMs like with pxs, set font-size on the body-tag with 62.5%. Default-value of the font-size is 16px; applying the rule, you’ll get one Em standing for roughly ten pixels (16 x 62.5% = 10). “I tend to put a font-size on the body tag with value: 62.5%. This allows you to use EMs to specify sizes while thinking in PX terms, e.g. 1.3em is approximately 1.3px. ” [Jonathan Snook]
  • Use universal character set for encoding. “[..] The answer is to use a single universal character set that’s able to cover most eventualities. Luckily one exists: UTF-8, which is based on Unicode. Unicode is an industry standard that’s designed to enable text and symbols from all languages to be consistently represented and manipulated by computers. UTF- 8 should be included in your web page’s head like this. [20 pro tips]
  1. <meta http-equiv="content-type" content="text/ html;charset=utf-8" />
  • You can change capitalisation using CSS. If you need something written in capitals, such as a headline, rather than rewriting the copy, let CSS do the donkey work. The following code will transform all text with an h1 attribute into all capitals, regardless of format”. [20 pro tips]
  1. h1 {
  2. text-transform: uppercase;
  3. }
  • You can display text in small-caps automatically. The font-variant property is used to display text in a small-caps font, which means that all the lower case letters are converted to uppercase letters, but all the letters in the small-caps font have a smaller font-size compared to the rest of the text.
  1. h1 {
  2. font-variant: small-caps;
  3. }
  • Cover all the bases - define generic font-families. “When we declare a specific font to be used within our design, we are doing so in the hope that the user will have that font installed on their system. If they don’t have the font on their system, then they won’t see it, simple as that. What we need to do is reference fonts that the user will likely have on their machine, such as the ones in the font-family property below. It is important that we finish the list with a generic font type. [Getting into good coding habits]
  1. p {
  2. font-family: Arial, Verdana, Helvetica, sans-serif;
  3. }
  • Use 1.4em - 1.6em for line-height.line-height:1.4” for readable lines, reasonable line-lengths that avoid lines much longer than 10 words, and colors that provide contrast without being too far apart. For example, pure black on pure white is often too strong for bright CRT displays, so I try to go with an off-white (#fafafa is a good one) and a dark gray (#333333, another good one).” [Christian Montoya]
  • Set 100.01% for the html-element. This odd 100.01% value for the font size compensates for several browser bugs. First, setting a default body font size in percent (instead of em) eliminates an IE/Win problem with growing or shrinking fonts out of proportion if they are later set in ems in other elements. Additionally, some versions of Opera will draw a default font-size of 100% too small compared to other browsers. Safari, on the other hand, has a problem with a font-size of 101%. The current “best” suggestion is to use the 100.01% value for this property.” [CSS: Getting into good habits]

1.6. Workflow: Debugging

  • Add borders to identify containers. “Use plenty of test styles like extra borders or background colors when building your documents or debugging layout issues. div { border:1px red dashed; } works like a charm. There are also bookmarklets that apply borders and do other things for you.” You can also use * { border: 1px solid #ff0000; }. [Chric Casciano]. Adding a border to specific elements can help identify overlap and extra white space that might not otherwise be obvious. [CSS Crib Sheet]
  1. * { border: 1px solid #f00; }
  • Check for closed elements first when debugging. “If you ever get frustrated because it seemed like you changed one minor thing, only to have your beautiful holy-grail layout break, it might be because of an unclosed element. [10 CSS Tips]

2.1. Technical Tips: IDs, Classes

  • 1 ID per page, many classes per page. “Check your IDs: Only one element in a document can have a certain value for the id attribute, while any number of elements can share the same class name. [..] Class and id names can only consist of the characters [A-Za-z0-9] and hyphen (-), and they cannot start with a hyphen or a digit (see CSS2 syntax and basic data types).” [Roger Johansson]
  • Element names in selectors are case sensitive. “Remember case sensitivity. When CSS is used with XHTML, element names in selectors are case sensitive. To avoid getting caught by this I recommend always using lowercase for element names in CSS selectors. Values of the class and id attributes are case sensitive in both HTML and XHTML, so avoid mixed case for class and id names.” [Roger Johansson]
  • CSS classes and IDs must be valid. “I.e. beginning with a letter, not a number or an underscore. IDs must be unique. Their names should be generic, describe functionality rather than appearance.” [CSS Best Practices]
  • You can assign multiple class names to a given element. “You can assign multiple class names to an element. This allows you to write several rules that define different properties, and only apply them as needed.” [Roger Johansson]

2.2. Technical Tips: Use the power of selectors

Roger Johansson has written an extremely useful series of articles about CSS 2.1 Selectors. These articles are highly recommended to read - some useful aspects can be found in the list below.

  • You can use child selectors. “A child selector targets an immediate child of a certain element. A child selector consists of two or more selectors separated by a greater than sign, “>”. The parent goes to the left of the “>”, and whitespace is allowed around the combinator. This rule will affect all strong elements that are children of a div element. [Roger Johansson]
  1. div > strong { color:#f00; }
  • You can use adjacent sibling selectors. An adjacent sibling selector is made up of two simple selectors separated by a plus sign, “+”. Whitespace is allowed around the adjacent sibling combinator. The selector matches an element which is the next sibling to the first element. The elements must have the same parent and the first element must immediately precede the second element. [Roger Johansson]
  1. p + p { color:#f00; }
  • You can use attribute selectors. Attribute selectors match elements based on the presence or value of attributes. There are four ways for an attribute selector to match:
  1. [att]
  2. Matches elements that have an att attribute, regardless of its value.
  3. [att=val]
  4. Matches elements that have an att attribute with a value of exactly “val”.
  5. [att~=val]
  6. Matches elements whose att attribute value is a space-separated list that contains “val”. In this case “val” cannot contain spaces.
  7. [att|=val]
  8. Matches elements whose att attribute value is a hyphen-separated list that begins with “val”. The main use for this is to match language subcodes specified by the lang attribute (xml:lang in XHTML), e.g. “en”, “en-us”, “en-gb”, etc.

  • The selector in the following rule matches all p elements that have a title attribute, regardless of which value it has:
  1. p[title] { color:#f00; }
  • The selector matches all div elements that have a class attribute with the value error:
  1. div[class=error] { color:#f00; }
  • Multiple attribute selectors can be used in the same selector. This makes it possible to match against several different attributes for the same element. The following rule would apply to all blockquote elements that have a class attribute whose value is exactly “quote”, and a cite attribute (regardless of its value):
  1. blockquote[class=quote][cite] { color:#f00; }
  • You should use descendant selectors. “Descendant selectors can help you eliminate many class attributes from your markup and make your CSS selectors much more efficient. ” [Roger Johansson]

2.3. Technical Tips: Styling Links

  • Be careful when styling links if you’re using anchors. “If you use a classic anchor in your code (<a name="anchor">) you’ll notice it picks up :hover and :active pseudo-classes. To avoid this, you’ll need to either use id for anchors instead, or style with a slightly more arcane syntax: :link:hover, :link:active” [Dave Shea]
  • Define relationships for links. “The rel attribute is supposed to indicate a semantic link relationship from one resource to another.
  1. a[rel~="nofollow"]::after {
  2. content: "\2620";
  3. color: #933;
  4. font-size: x-small;
  5. }
  6. a[rel~="tag"]::after {
  7. content: url(http://www.technorati.com/favicon.ico);
  8. }
  • “These make use of the attribute selector for space separated lists of values. Any a element with a relationship containing those values will be matched. Links with the nofollow relationship will be followed by a dark red skull and crossbones (?) and those with the tag relationship will be followed by the Technocrati icon.” [Handy CSS]
  • You can mark external links automatically. Many people make use of the non-standard rel="external" relationship to indicate a link to an external site. However, adding that to each and every link is time consuming and and unnecessary. This style rule will place an north east arrow after any link on your site to an external site. [Handy CSS]
  1. a[href^="http://"]:not([href*="smashingmagazine.com"])::after {
  2. content: "\2197";
  3. }
  1. a:focus {
  2. outline: none;
  3. }

2.4. Technical Tips: CSS-Techniques

  • You can specify body tag ID. “In most cases placing an ID in the body tag will allow you manipulate CSS presentational items and markup elements by page by page basis. Not only will you be able to organize your sections you will be able to create multiple CSS presentations without changing your markup from template to template or page to page.” [Ryan Parr, Invasion of Body Switchers]
  • You can create columns with equal heights with CSS. Equal Height Technique: a method to make all columns appear to be the same height. But without the need for faux column style background images. Faux Columns: with background images.
  • You can align vertically with CSS. “Say you have a navigation menu item whose height is assigned 2em. Solution: specify the line height to be the same as the height of the box itself in the CSS. In this instance, the box is 2em high, so we would insert line-height: 2em into the CSS rule and the text now floats in the middle of the box!” [Evolt.org]
  • You can use pseudo-elements and classes to generate content dynamically. Pseudo-classes and pseudo-elements. Pseudo-classes and pseudo-elements can be used to format elements based on information that is not available in the document tree. For example, there is no element that refers to the first line of a paragraph or the first letter of an element’s text content. You can use :first-child, :hover, :active, :focus, :first-line, :first-letter, :before, :after and more.
  • You can set <hr> to separate posts beautifully. “Restyling the horizontal rule (<hr>) with an image can be a beautiful addition to a web page. [CSS: Best Practices]
  • You can use the same navigation (X)HTML-code on every page. “Most websites highlight the navigation item of the user’s location in the website. But it can be a pain as you’ll need to tweak the HTML code behind the navigation for each and every page. So can we have the best of both worlds?” [Ten More CSS Tricks you may not know]
  1. XHTML:
  2. <ul>
  3. <li><a href="#" class="home">Home</a></li>
  4. <li><a href="#" class="about">About us</a></li>
  5. <li><a href="#" class="contact">Contact us</a></li>
  6. </ul>
  • Insert an id into the <body> tag. The id should be representative of where users are in the site and should change when users move to a different site section.
  1. CSS:
  2. #home .home, #about .about, #contact .contact
  3. {
  4. commands for highlighted navigation go here
  5. }
  • You can use margin: 0 auto; to horizontally centre the layout. “To horizontally centre an element with CSS, you need to specify the element’s width and horizontal margins.” [Roger Johansson]
  1. XHTML:
  2. <div id="wrap">
  3. <!-- Your layout goes here -->
  4. </div>
  1. CSS:
  2. #wrap {
  3. width:760px; /* Change this to the width of your layout */
  4. margin:0 auto;
  5. }
  • You can add CSS-styling to RSS-feeds. “You can do a lot more with an XSL stylesheet (turn links into clickable links, etc), but CSS can make your feed look much less scary for the non-technical crowd. [Pete Freitag]
  1. <?xml version="1.0" ?>
  2. <?xml-stylesheet type="text/css" href="http://you.com/rss.css" ?>
  3. ...
  • You can hide CSS from older browsers. “A common way of hiding CSS files from old browsers is to use the @import trick. [Roger Johansson]
  1. @import "main.css";
  • Always declare margin and padding in block-level elements. [10 CSS Tips]
  • Set a width OR margin and padding. “My rule of thumb is, if I set a width, I don’t set margin or padding. Likewise, if I’m setting a margin or padding, I don’t set a width. Dealing with the box model can be such a pain, especially if you’re dealing with percentages. Therefore, I set the width on the containers and then set margin and padding on the elements within them. Everything usually turns out swimmingly.” [Jonathan Snook]
  • Avoid applying padding/borders and a fixed width to an element. “IE5 gets the box model wrong, which really makes a mess of things. There are ways around this, but it’s best to side-step the issue by applying the padding to the parent element instead of the child that gets a fixed-width. [CSS Crib Sheet]
  • Provide print styles. “You can add a print stylesheet in exactly the same way that you would add a regular stylesheet to your page:
  1. <link rel="stylesheet" type="text/css" href="print.css" media="print">
  2. or
  3. <style type="text/css" media="print"> @import url(print.css); </style>
  • This ensures that the CSS will only apply to printed output and not affect how the page looks on screen. With your new printed stylesheet you can ensure you have solid black text on a white background and remove extraneous features to maximise readability. More about CSS-based print-Layouts. [20 pro tips]

2.5. Technical Tips: IE Tweaks

  • You can force IE to apply transparence to PNGs. “In theory, PNG files do support varied levels of transparency; however, an Internet Explorer 6 bug prevents this from working cross-browser.” [CSS Tips, Outer-Court.com]
  1. #regular_logo
  2. {
  3. background:url('test.png'); width:150px; height:55px;
  4. }
  5. /* \ */
  6. * html #regular_logo
  7. {
  8. background:none;
  9. float:left;
  10. width:150px;
  11. filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png', sizingMethod='scale');
  12. }
  13. /* */
  1. #container
  2. {
  3. min-width: 600px;
  4. max-width: 1200px;
  5. width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");
  6. }
  • You can use Conditional Comments for IE. “The safest way of taking care of IE/Win is to use conditional comments. It feels more future-proof than CSS hacks – is to use Microsoft’s proprietary conditional comments. You can use this to give IE/Win a separate stylesheet that contains all the rules that are needed to make it behave properly. ” [Roger Johansson]
  1. <!--[if IE]>
  2. <link rel="stylesheet" type="text/css" href="ie.css" />
  3. <![endif]-->

Workflow: Get Inspired

  • Play, experiment with CSS. “Play. Play with background images. Play with floats.” [Play with positive and negative margins. Play with inheritance and cascading rules. Play. [Chric Casciano]
  • Learn from others. Learn from great sites built by others. Any site’s HTML is easily accessible by viewing a page’s source code. See how others have done things and apply their methods to your own work.
    [20 pro tips]

Sources and Related Posts

신고
Posted by marga
TAG CSS

1/2

Niels Leenheer씨는 HTML 페이지의 로드를 가속화하기 위해 포함하는 자바스크립트 및 스타일시트 파일에 gzip을 사용하여 압축하고  모드리라이트(mod_rewrite) 모듈을 이용하여 자동-전송하는 방법을 자신의 개인 블로그에 소개했다. 좌축의 이미지는 파이어버그(firebug)의 Net 콘솔 화면으로 압축전과 압축후의 로딩속도와 파일용량을 비교한 것이다. 압축률은 1: 0.23~0.25 이며, 자료의 크기는 줄지만 완전히 투과하도록 작동하기 때문에 종전의 소스코드에는 변화를 줄 필요가 없다.

파일의 압축전송은 브라우저가 한정된 수만을 동시에 다운로드하므로 몇몇 파일이 완료될때 까지 기다리는 문제가 발생한다. 이 문제의 해결책은 1개의 큰 파일로 결합하여 전송 대역폭을 줄이는 방법을 제공한다. 예를 들자면 아래와 같다.
분리된 자바스크립트 라이브러리 URL :
http://www.firejune.com/javascripts/prototype.js
http://www.firejune.com/javascripts/builder.js
http://www.firejune.com/javascripts/effects.js
http://www.firejune.com/javascripts/dragdrop.js
http://www.firejune.com/javascripts/slider.js

하나로 결합하기 :
http://www.firejune.com/javascripts/prototype.js,builder.js,effects.js,dragdrop.js,slider.js
그리고 웹서버의 리소스 확보를 위해서 파일들의 요청이 있을때마다 압축하는 작업을 거치지않고 캐시를 사용하도록 설정되어 있다.(끌 수 있음) 설치를 시작하기 전에 우선 아래의 주소에서 소스를 다운로드하고 파일명을 'combine.php'로 저장다.

combine.php 다운로드 : http://rakaz.nl/projects/combine/combine.phps

설정을 위해 다운로드한 파일을 열어 자바스크립트, 스타일시트, 캐시 폴더의 경로를 설정한다. 만약 웹서버에 캐시폴더가 없다면 쓸수있는 권한이 있는 폴더를 생성해야한다. 그리고 웹서버의 루트(root)에 업로드 하자. 두번째로 모드리라이트를 손볼 차례이다. 루트의 .htaccess파일을 열어 아래와같은 내용을 삽입하자. 1번과 2번라인은 이미 설정되어 있다면 무시해도 무방하다. 이 또한 마찬가지로 php에서 설정한 자바스크립트가 있는 폴더와 스타일시트가 있는 폴더이름만 변경하면 된다.
RewriteEngine On
RewriteBase /
RewriteRule ^stylesheets/(.*\.css) /combine.php?type=css&files=$1
RewriteRule ^javascripts/(.*\.js) /combine.php?type=javascript&files=$1

다소 간편한 몇가지의 조작만으로 속도향상을 꾀할수 있었다. 자바스크립트와 스타일스트의 양이 많은 곳이라면 꼭한번 써봄직한 솔루션이다.

출처 : http://firejune.com/1080
신고
Posted by marga


출처 : http://www.smashingmagazine.com/2007/04/18/14-tab-based-inferface-techniques/



신고

'Developer' 카테고리의 다른 글

정규표현  (0) 2008.01.29
14 Tab-Based Interface Techniques  (0) 2007.04.18
Online Converters  (0) 2007.04.10
HTTP Status Code  (0) 2007.04.08
Posted by marga
자바스크립트로 구현한 Prototype.js 프레임웍 기반 다중 선택기 API를 소개합니다.(API라고 하기에는 좀 부끄럽군요) 최초 올라로그 오픈베타 프로젝트에 사용되었습니다. 데스크탑 애플리케이션 못지않은 UI를 구현하겠다는 욕심에 조금은 억척 스럽게 만들어진 녀석입니다. 유저가 익숙하지 않다는 이유로 존속여부는 희박하지만, 라이브러리 형태로 공개하고 계속 발전시켜 나가볼 생각입니다. 조금더 다듬고 기능을 확장하여 여러환경에 적용할 수 있도록 손보았습니다. 웹 특성상 컨트롤 키를 조합하는 방식이 아닌 기본으로 활성화 되어 있는 상태입니다.(추가 예정)

download JS : http://firejune.com/javascripts/multiselect.js
download CSS : http://firejune.com/stylesheets/multiselect.css

사용방법


적용대상이 되는 엘리먼트는 리스트 아이템(UL)의 부모이며, 부모 엘리먼트는 다중선택 활성화 영역(parent)이 됩니다. 리스트 아이탬은 고유한 ID값를 지니고 있어야 합니다.(수정됨) 드래그 사용여부와 스타일 시트에서 지정한 스타일을 별도로 설정 할 수도 있습니다, 자세한 사용방법은 아래와 같습니다.(슬라이드 바는 포지션 리셋 테스트용 입니다.)
new MultiSelect('testElement');

// CSS 시각효과 설정
new MultiSelect('testElement', {
  dragSelect: false, // 드래그 사용 여부
  rectangleCN: 'MS-rectangle', // 선택영역 스타일 이름
  selectCN: 'MS-select', // 선택된 아이탬 스타일 이름
  unselectCN: 'MS-unselect', // 선택되지 않은 아이탬 스타일 이름
}});

// 예제에 사용한 코드
var selector = new MultiSelect('testElement', {
  // 변화가 생기면 이벤트 발생
  onChange: function(){
  var debug = $('debug2'), point = '';
  debug .innerHTML = 'Selected : ';
  selector.items.each(function(a){
    if(a.success) {
       debug .innerHTML += point + a.element.innerHTML;
       point = ', ';
    }
  });
}});

selector.setOffset(true); // 포지션 다시 계산하기
selector.selectAll(true); // 모두 선택하기
selector.selectAll(false); // 모두 선택 해제하기


추후 추가될 기능


- 윈도우 컨벤션을 따르는 UI 모드 추가(컨트롤 키 조합)
- 메모리 릭현상 제거
- 더블 클릭 이벤트 추가
- 아이템의 ID값 없이도 사용할 수 있도록 수정(수정됨)
- form 엘리먼트 지원

출처 : FireJune's Blog
신고
Posted by marga

Online Converters

Developer 2007.04.10 09:42

출처 : http://www.smashingmagazine.com/2007/04/10/online-converters/


Online converters always come in handy. Once you need to perform some operation with your files, they can save your time achieving the same results online, without installing some specific software. In fact, there are many online tools, which convert formats, files and code snippets for free. Some of them are quite specific tools aimed for developers, but some are common “all-rounders”, which manage to convert almost every format to a more popular one. Using them, you can generate .pdf-documents out of images, images out of texts or RSS-feeds out of web-sites. You can also convert any audio- and video-files immediately - the results can be received via e-mail.

So what can you use? What should you use?

This overview of online-converters for users and developers might give you some useful starting points and improve your productivity.

“All-Rounders”

  • Media-Convert
    Media-Convert can deal with many formats. Most important are Text, HTML, XHTML, Microsoft Word, RTF, PDF, PS, Open Office, Star Writer, CSV, dBase, Microsoft Excel, Pocket Excel, Lotus 123, Quattro Pro, Star Calc, Open Office, MathML, Open Office Formeln, Powerpoint. Besides: Video and Audio-formats.
  • txt2tags
    This tool generates HTML, XHTML, SGML, LaTeX, Lout, Man Page, MoinMoin, MagicPoint and PageMaker-documents out of a single plain text-file with minimal markup.
  • Zamzar
    Zamzar supports conversion between a wide variety of different file formats. Many conversion options, among them 11 document formats, 8 image formats, 9 audio formats and 12 video formats.

Development

HTML & CSS

  • Text to JavaScript
    If you’ve ever tried to make some normal text containing characters like ‘ into a JavaScript variable, you will know how frustrating it can be when you miss one, or you miss a \ or a line break or a tag. Well, let this script do it for you.
  • CSS HTML
    Converts CSS-code to HTML and HTML to CSS-Code.
  • HTML2TXT
    Converts HTML in plain text.
  • HTML2Wiki
    Converts HTML to Wiki-Markup
  • HTML -> PHP, JavaScript, ASP
    This program let you convert your HTML in various scripting languages such as: HTML to PHP, HTML to Javascript and HTML to ASP
  • Draac.Com’s Html To Javascript
    Type or paste your Html codes into the text box below, then press the button and convert your Html coding to Javascript.
  • HTML to JavaScript Convertor
    This tool takes your markup and converts it to a series of document.write() statements that you can use in a block of JavaScript.

Graphics

Color

PDF

  • HTML 2 PDF
    Converts HTML and whole sites to PDF
  • Online PDF Converter
    You can generate plain text, .jpg-, .png-, .gif- or .tiff-images out of .pdf-files.
  • PDF Conversion
    PDF -> Text.
  • Show PDF
    PDF -> HTML.
  • PDF Online
    Converts MS Word (DOC), MS Publisher (PUB), MS Word (RTF), MS Excel (XLS), MS PowerPoint (PPT), HTML (MHT), MS PowerPoint (PPS), Text (TXT) and JPG, PNG, BMP, TIFF, WMF, EMF, GIF to PDF online. The .pdf-file is sent via e-mail.

RSS

  • Feed43
    Generates RSS-feeds out of web-sites
  • RSS2GIF
    This tool converts RSS-feeds to images.
  • RSS/RDF
    RSS -> JavaScript.
  • RSSxl
    Converts web-sites to RSS 2.0.

Further converters



신고

'Developer' 카테고리의 다른 글

정규표현  (0) 2008.01.29
14 Tab-Based Interface Techniques  (0) 2007.04.18
Online Converters  (0) 2007.04.10
HTTP Status Code  (0) 2007.04.08
Posted by marga

border-collapse

Technical 2007.03.27 20:04

border-collapse란 테이블 또는 셀의 테두리선 표시방법을 지정하는 스타일시트입니다.

 
아래 두가지의 옵션이 있습니다.


    1. border-collapse:collapse

       서로 이웃하는 테이블이나 셀의 테두리션을 겹쳐서 표현 합니다.


    2. border-collapse:separate

       서로 이웃하는 테이블이나 셀의 테두리션을 분리시켜 표현 합니다.


( 이스타일을 사용하지 않으면 모든 테이블이나 셀의 경계선은 분리되어 나오지요 기본값이라고 합니다 )

 
border-collapse:collapse로 지정된 경우 테두리가 겹쳤을때 나타나는 순서는 다음과 같습니다.


 
   1. border-style:hidden이 지정된것이 가장 우선 합니다.


   2. border-style:non이 지정된 것은 우선순위가 가장 낮습니다.


   3. hidden과 non이외의 값이 지정되어 있는 경우는 폭이 두꺼운 테두리선이 우선순위.


   4. 굵기가 같은 경우 테두리선의 종류에 따라 아래와 같은 우선 순위를 가지게 됩니다.


       double > solid > dashed > dotted > ridge > autoset > groove > inset


   5. 굵기가 같고 테두리종류가 동일, 색상(border-color) 만 다른경우 아래의 순서로 우선 순위.


      th > td > tr > thead.tbody.tfoot > col > colgroup > table


출처 : 'border-collapse' - 네이버 지식iN

신고

'Technical' 카테고리의 다른 글

자바스크립트 정리  (0) 2007.04.02
border-collapse  (0) 2007.03.27
입력상자 - 한/영 고정사용  (0) 2007.03.26
a 태그에서의 함수호출  (0) 2007.03.26
Posted by marga
TAG CSS

style = "ime-mode:auto"           (자동변경)  (한/영 전환 가능)
style = "ime-mode:active"          (한글 모드)  (한/영 전환 가능)
style = "ime-mode:inactive"       (영문 모드)  (오직 영문)
style = "ime-mode:disabled"      (영문 모드)  (한/영 전환 가능)
style = "ime-mode:deactivated" (한글 모드)  (한/영 전환 가능)


<input type="text" name="han" style="width:115px;ime-mode:active;" >

출처 : Tong - nom3203님의 Script & Etc통

신고

'Technical' 카테고리의 다른 글

border-collapse  (0) 2007.03.27
입력상자 - 한/영 고정사용  (0) 2007.03.26
a 태그에서의 함수호출  (0) 2007.03.26
텍스트박스 클릭시 기본값 없애기  (0) 2007.03.26
Posted by marga
TAG CSS

<HTML>
<HEAD><TITLE>Visibility Demo</TITLE>
<STYLE>
P {font-weight:bold}
</STYLE>
<SCRIPT language=jscript>
<!--
function change_visibility() {
 if (MyDiv1.style.visibility == "hidden")
 {
  MyDiv1.style.visibility = "visible";
 }
 else
 {
  MyDiv1.style.visibility = "hidden";
 }
}

function change_display() {

 if (MyDiv2.style.display == "")
 {
  MyDiv2.style.display = "none";
 }
 else
 {
  MyDiv2.style.display= "";
 }
}

-->
</SCRIPT>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=iso-8859-1">
<META NAME="AUTHOR" CONTENT="InetSDK">
<META NAME="MS.LOCALE" CONTENT="EN-US">
<META NAME="ROBOTS" CONTENT="noindex">

<!-- SAMPLE_STYLE_START -->
<LINK REL="stylesheet" HREF="../../../../../workshop/basicsdkie4.css" TYPE="text/css">
<!-- SAMPLE_STYLE_END -->
</HEAD>
<!--TOOLBAR_START-->
<!--TOOLBAR_EXEMPT-->
<!--TOOLBAR_END-->

<BODY TOPMARGIN=0 LEFTMARGIN=0 BGPROPERTIES="FIXED" BGCOLOR="#FFFFFF" LINK="#000000" VLINK="#808080" ALINK="#000000">
<BLOCKQUOTE CLASS="body">

<P>Click the Button to change the visibility of the DIV</P>
<P><DIV ID="MyDiv1" STYLE="position:relative;top:10;left:20;height:100;width:100;
  visibility:hidden;background-color:blue"></DIV></P>

<P>A paragraph below the DIV object</P>
<P><BUTTON onclick="change_visibility()" style="background-color:blue;color:white">
Change Visibility
</BUTTON></P>
<HR>

<P>Click the Button to change the display of the DIV</P>
<P><DIV ID="MyDiv2" STYLE="position:relative;top:10;left:20;height:100;width:100;
  display:none;background-color:green"></DIV></P>
 
<P>A paragraph below the DIV object</P>
<P><BUTTON onclick="change_display()" style="background-color:green;color:white">
Change Display
</BUTTON></P>

<!-- START_PAGE_FOOTER -->
<BR><BR><BR>
&copy; <A CLASS="clsIncCpyRt" HREF="http://msdn.microsoft.com/isapi/gomscom.asp?target=/misc/cpyright.htm" TARGET="_top">2000 Microsoft Corporation. All rights reserved. Terms of use</A>.
<!-- END_PAGE_FOOTER -->
</BLOCKQUOTE>
</BODY>
</HTML>


MSDN을 찾아보니..

IHTMLStyle::display = none reserves no space for the object on the screen. 처럼 공간을 차지하지 않는 상태로 Display되고, IHTMLStyle::visibility는 공간을 차지한 채로 출력하는 차이점이 있더군요..

신고

'Technical' 카테고리의 다른 글

체크박스 전체선택  (0) 2007.03.26
style에서 display, visibility의 차이점..  (0) 2007.03.25
DATETIME 포맷 변환하기  (0) 2007.03.22
Ajax Prototype.js - 프로토타입 완전분석  (0) 2007.03.20
Posted by marga
TAG CSS

Navigation menus have to be intuitive, precise and easy-to-use. One simple, basic principle, which is common for all kinds of nav bars you would ever want to use for your projects. In fact, navigation menu is probably the most important element in web design: after all, it is being used more often than any other element on a given page. Therefore it’s important to make sure that your visitors will find they way around the site structure - however complex the latter might be.

So how do designers cope with a challenging task to create an attractive and usable menu? Which results can be achieved? OK, that’s a tough one. Let’s take a look around.

Below you’ll find 53 beautiful and user-friendly Navigation Menus and solutions web-designers came up with using basic CSS styling.

PS: Over the last few months we’ve reviewed CSS-Based Techniques, CSS-Based Forms and CSS-Based Tables and CSS-Based Footers (yes, some of these techniques use not only CSS, but also JavaScript and PHP). You’ll find even more CSS-related articles in our CSS Section.

PSS: We have included some DHTML- and JavaScript-based navigation menus in this list by mistake. Sorry for inconvenience.

CSS-Based Navigation Menus

1. Change.org

Navigation Menus - Change.org

2. N.Design Studio | Design & Blog

Navigation Menus - N.Design Studio | Design & Blog

3. Good Creative - Web and Graphic Design

Navigation Menus - Good Creative - Web and Graphic Design

4. MacRabbit - Welcome

Navigation Menus - MacRabbit - Welcome

5. Joyent: Introducing Joyent

Navigation Menus - Joyent: Introducing Joyent

6. CSS Vault » The Web’s CSS Site

Navigation Menus - CSS Vault » The Web's CSS Site

7. notiam.com

Navigation Menus - notiam.com

8. Jamie Huskisson: Full time UK PHP freelance developer

Navigation Menus - Jamie Huskisson: Full time UK PHP freelance developer

9. Web design, development and consultancy from Ottawa, Canada - Snook.ca

Navigation Menus - Web design, development and consultancy from Ottawa, Canada - Snook.ca

10. BREAKER DESIGN

Navigation Menus - BREAKER DESIGN

11. Jen Gordon

Navigation Menus - Jen Gordon

12. Tulumarka

Navigation Menus - Tulumarka

13. Ars Technica

Navigation Menus - Ars Technica

14. CSS Beauty | CSS Design, News, Jobs, Community, Web Standards

Navigation Menus - CSS Beauty | CSS Design, News, Jobs, Community, Web Standards

15. Digg / Technology

Navigation Menus - Digg / Technology

16. Triple Crown Customer Service

Navigation Menus - Triple Crown Customer Service

17. microformats

Navigation Menus - microformats

18. Badboy.ro

Navigation Menus - Badboy.ro

19. GetMenus.ca

Navigation Menus - GetMenus.ca

20. Wedding Extravaganza 2007 - A Perfect Marriage

Navigation Menus - Wedding Extravaganza 2007 - A Perfect Marriage

21. Job Pile - Aggregating the Best Job Boards on the Web - Artypapers

Navigation Menus - Job Pile - Aggregating the Best Job Boards on the Web - Artypapers

22. Norman Morrow & Co - Estate Agents In Crumlin, Northern Ireland

Navigation Menus - Norman Morrow & Co - Estate Agents In Crumlin, Northern Ireland

23. Listal - List the stuff you love! Movies, TV, music, games and books

Navigation Menus - Listal - List the stuff you love! Movies, TV, music, games and books

24. folietto

Navigation Menus - folietto

25. Tony Yoo - Online Showcase (version2)

Navigation Menus - Tony Yoo - Online Showcase (version2)

26. Digital Web Magazine

Navigation Menus - Digital Web Magazine

27. Denbighshire Supporting Business

Navigation Menus - Denbighshire Supporting Business | Denbighshire, Supporting, Business

28. Pulmad, peod, lillesalong… - Annilill Peoteenindus

Navigation Menus - Pulmad, peod, lillesalong... - Annilill Peoteenindus

29. ExpressionEngine - Publish Your Universe!

Navigation Menus - ExpressionEngine - Publish Your Universe!

30. coda.coza

Navigation Menus - coda.coza

31. purevolume™ | We’re Listening To You

Navigation Menus - purevolume™ | We're Listening To You

32. EGOLOUNGE *Büro für digitales Design

Navigation Menus - EGOLOUNGE *Büro für digitales Design

33. Merix - Internet Technologies

Navigation Menus - Merix - Internet Technologies

34. Bartelme Design | Showroom

Navigation Menus - Bartelme Design | Showroom

35. Luis Alarcón, Blog

Navigation Menus - Luis Alarcón, Blog

36. CSS3 . info - Everything you need to know about CSS3

Navigation Menus - CSS3 . info - Everything you need to know about CSS3

37. nclud™ a creative web design agency

Navigation Menus - nclud™ a creative web design agency

38. Convan Design - Howdy

Navigation Menus - Convan Design - Howdy

39. ExpressionEngine - Publish Your Universe!

Navigation Menus - ExpressionEngine - Publish Your Universe!

40. Silverpoint: Web Solutions for Schools

Navigation Menus - Silverpoint: Web Solutions for Schools

41. Jambor-ee - Celebrating ExpressionEngine

Navigation Menus - Jambor-ee - Celebrating ExpressionEngine

42. far from fearless

Navigation Menus - far from fearless

43. Scribd - Home

Navigation Menus - Scribd - Home

44. Erika Greco - Blog

Navigation Menus - Erika Greco - Blog

45. Photoshop Tutorials and Articles - Tutorial Blog

Navigation Menus - Photoshop Tutorials and Articles - Tutorial Blog

46. Welcome to Buzz — Buzz Recruitment

Navigation Menus - Welcome to Buzz — Buzz Recruitment

47. Michal Zapoměl - český vlasový design | czech hair design

Navigation Menus - Michal Zapoměl - český vlasový design | czech hair design - Úvodní stránka

48. Onlinecenter Upload

Navigation Menus - Onlinecenter Upload

49. M122Arts Mixed Media and Technology // oo*o

Navigation Menus - M122Arts Mixed Media and Technology // oo*o

50. KazanShops.Ru

Navigation Menus - Магазины Казани - казанский сайт для тех, кто покупает - www.KazanShops.Ru

51. Stone inc. - Aménagements Paysager, Pavés.

Navigation Menus - Stone inc. - Aménagements Paysager, Pavés, Murets, Tourbe et plus!

52. Pixellogo

Navigation Menus - Pixellogo

53. AUSMAG - das Australien Work & Travel Portal

Navigation Menus - AUSMAG - das Australien Work & Travel Portal - Arbeiten und Reisen in Australien

신고

'Technical' 카테고리의 다른 글

체크박스 전부다 선택하기  (0) 2007.03.16
CSS-Based Navigation Menus: Modern Solutions  (0) 2007.03.15
HTML 특수문자코드  (0) 2007.03.04
HTTP 에러 코드 및 내용  (0) 2007.03.04
Posted by marga
TAG CSS

CSS Cuser Property

Technical 2007.03.03 23:49
(표의 설명문구에 마우스를 올리면 예제를 볼 수 있다.)
all-scroll

[IE6+] 좌, 우측 스크롤이 가능할때 나타나는 커서

auto

브라우저의 기본 설정을 따름

col-resize

[IE6+] 테이블의 세로폭을 리사이즈 할때 나타나는 커서

row-resize

[IE6+] 테이블의 가로폭을 리사이즈 할때 나타나는 커서

crosshair

+ 모양의 커서

default

OS에서 설정한 마우스의 기본 커서

hand

링크나 개체를 이동할때 나타나는 손 모양의 커서

help

도움말 등을 나타 낼때 사용하는 커서

move

이동 가능함을 나타내는 + 자 모양의 화살표

no-drop

[IE6+] 접근 불가나 Drop 불가를 나타내는 커서

not-allowed

접근 불가, 허용불가를 나타내는 커서

pointer

[IE6+] Head 와 모양과 기능이 같음

progress

[IE6+] 화살표 + 모래시계 커서

wait

동작중임을 나타내는 모래시계 커서

text

가로 텍스트를 표시하는 I 자 모양의 커서

text

[IE6+] 세로 텍스트를 표시하는 ㅡ 자 모양의 커서

url(uri)

[IE6+] 다른서버의 커서를 사용할 수 있음

*-resize

다양한 리사이즈 지원의 커서 (아래쪽 표참고)

[표 - 리사이즈 별 커서]

n-resize s-resize ne-resize sw-resize
nw-resize se-resize e-resize w-resize


신고

'Technical' 카테고리의 다른 글

iframe 자동 크기지정  (1) 2007.03.03
CSS Cuser Property  (0) 2007.03.03
Javascript 에서 Querystring 뽑아내기  (0) 2007.03.03
web editor 소스  (0) 2007.03.03
Posted by marga
TAG CSS

CSS Properties To JavaScript Reference Conversion

CSS Property JavaScript Reference
background background
background-attachment backgroundAttachment
background-color backgroundColor
background-image backgroundImage
background-position backgroundPosition
background-repeat backgroundRepeat
border border
border-bottom borderBottom
border-bottom-color borderBottomColor
border-bottom-style borderBottomStyle
border-bottom-width borderBottomWidth
border-color borderColor
border-left borderLeft
border-left-color borderLeftColor
border-left-style borderLeftStyle
border-left-width borderLeftWidth
border-right borderRight
border-right-color borderRightColor
border-right-style borderRightStyle
border-right-width borderRightWidth
border-style borderStyle
border-top borderTop
border-top-color borderTopColor
border-top-style borderTopStyle
border-top-width borderTopWidth
border-width borderWidth
clear clear
clip clip
color color
cursor cursor
display display
filter filter
font font
font-family fontFamily
font-size fontSize
font-variant fontVariant
font-weight fontWeight
height height
left left
letter-spacing letterSpacing
line-height lineHeight
list-style listStyle
list-style-image listStyleImage
list-style-position listStylePosition
list-style-type listStyleType
margin margin
margin-bottom marginBottom
margin-left marginLeft
margin-right marginRight
margin-top marginTop
overflow overflow
padding padding
padding-bottom paddingBottom
padding-left paddingLeft
padding-right paddingRight
padding-top paddingTop
page-break-after pageBreakAfter
page-break-before pageBreakBefore
position position
float styleFloat
text-align textAlign
text-decoration textDecoration
text-decoration: blink textDecorationBlink
text-decoration: line-through textDecorationLineThrough
text-decoration: none textDecorationNone
text-decoration: overline textDecorationOverline
text-decoration: underline textDecorationUnderline
text-indent textIndent
text-transform textTransform
top top
vertical-align verticalAlign
visibility visibility
width width
z-index zIndex

Usage

Internet Explorer

document.all.div_id.style.JS_property_reference = "new_CSS_property_value";



Older Netscape's (4.7 and earlier)

document.div_id.JS_property_reference = "new_CSS_property_value";



Netscape 6.0+ and Opera (and other Mozilla)

document.getElementById(div_id).style.JS_property_reference = "new_CSS_property_value";

Note the use of parentheses instead of square brackets in newer Mozilla's "getElementById()" reference.

 
 
 
신고

'Technical' 카테고리의 다른 글

보기좋은 코딩원칙1-80칸의 원칙  (0) 2007.03.03
CSS Properties To JavaScript Reference Conversion  (0) 2007.03.03
asp 속도업  (0) 2007.03.01
asp기본함수  (0) 2007.03.01
Posted by marga
정말 괜찮은 예제들이다.

http://www.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/
신고
Posted by marga
TAG CSS
반드시 읽어봐야 할 책!!


신고
Posted by marga
TAG CSS,