블로그 이미지

카테고리

데꾸벅 (194)
Publisher (39)
Scripter (97)
Programmer (1)
Designer (30)
Integrator (18)
Pattern Searcher (4)
News (2)
강좌 및 번역 (3)

최근에 올라온 글

최근에 달린 댓글

'nextree 넥스트리 데꾸벅'에 해당되는 글 42건

  1. 2010.03.09 SVG와 CANVAS사이의 선택 16
  2. 2010.03.08 CSS 최적화 기법 7
  3. 2010.03.07 지금 바로 쓸수 있는 CSS3
  4. 2010.03.06 Firefox에서 링크 점선 없애기 2
  5. 2009.12.31 CSS로 만든 3D입체 이미지 6
  6. 2009.12.14 내 웹사이트의 속도를 빠르게! 3
  7. 2009.12.08 프로젝트 관리자가 알아야할 97가지 사실 1
  8. 2009.12.08 우분투에 설치된 MySQL 접속 2
  9. 2009.11.18 자바스크립트 delete 연산자에 대한 고찰 8
  10. 2009.11.16 CSS 이용한 Text를 이미지로 대체하기 3
  11. 2009.11.15 Ext js 틀고정 그리드 1
  12. 2009.11.11 2010년 유행할 웹디자인 트렌드 1
  13. 2009.11.07 CSS Float속성의 모든것 (All About Floats) 18
  14. 2009.11.04 화면전체 배경이미지인 웹사이트 만들기
  15. 2009.11.02 IE8 웹조각(Web Slice) 만들기 5
  16. 2009.10.30 포토샵 액션 모음
  17. 2009.05.07 32가지 환상적인 사진합성 디자인사이트 2
  18. 2009.05.06 Ext.Updater 깜빡거림 방지
  19. 2009.05.06 화면 가득 BG이미지 사용 웹디자인 1
  20. 2009.05.04 Beautiful Website Footer Design 2
  21. 2009.05.04 포토샵 강좌 : +20 PSD를 HTML/CSS로 컨버팅하기
  22. 2009.05.04 소용돌이 및 꽃 브러쉬 (Swirls and Flowers Brush) 29
  23. 2009.05.04 Ajax Framework 분석
  24. 2009.04.28 CSS로 Table 디자인 하기 15
  25. 2009.04.16 물감번짐 효과 포토샵 브러쉬 및 텍스쳐 57
  26. 2009.04.16 고해상도 먹물튀기기 포토샵 브러쉬 6
  27. 2009.04.16 간결하면서도 우아한 명함디자인 30선
  28. 2009.04.16 더 나은 디자이너가 되기 위해 도움이 되는 튜토리얼 사이트 50선
  29. 2009.04.15 웹표준 UI/UX 그리고 프리젠테이션
  30. 2009.04.10 HTML5 Gallery 4



HTML5에 대한 내용을 정리하기로 마음 먹으면서 하나하나씩 정리해 갑니다.
오늘은  오페라개발자센터에서 작성한 <Canvas>와 <SVG>관련 포스트를 참조하여 SVG와 Canvas태그에 대해서 알아보도록 하겠습니다.



새로운 웹기술의 목적은 지원하지 않는 브라우저에서도 동작하게끔 크로스브라우저를 지원합니다. 예를 들면 2010년 03월 현재 나온 브라우저에서 부분적으로만 지원하는 SVG나 CANVAS를 모든 브라우저에서 지원하게끔 대체(Fallback)기술들이 존재합니다. Raphaёl로 구현가능하고 <CANVAS>는 ExCanvasJavascript Library로 구현이 가능합니다. 심지어 MS의 익스프로러도 SVG에 관심을 보이고 있고 향후 폭넓게 지원할 것으로 보입니다.  제목과 같이 새로운 프로젝트에 어떤 기술이 적합할지 선택하는것이 점점 더 어려워 질것입니다.

HTML5 CanvasSVG 두 웹기술은 브라우저안에서 풍부한 그래픽을 만들어내는 것이나 이 두개는 근본적으로 서로 다릅니다.  이 포스트에서 서로 다른점에 대해서 밝혀보고, SVG와 Canvas 를 효과적이고 적절하게 사용하기 위해 필요한 지식에 대해 알아보고자 합니다.




SVG (Scalable Vector Graphics)

SVG 는 XML기반 표준 벡터 그래픽 포맷입니다. SVG 컨텐츠는 정적일수 있으며 인터랙티브하고 애니메이션이 가능합니다 즉 매우 유연하다는 뜻이죠. CSS로 SVG 를 스타일링 할수 있고, SVG DOM을 이용하여 동적인 비헤이비어(Behaviour)를 추가할수 도 있습니다. 물론 한개의 파일안에 SVG 텍스트가 있기때문에 상대적으로 접근 또한 가능합니다. 그리고 <object>태그를 이용하여 표준 (X)HTML안에 SVG  컨텐츠를 추가할 수도 있습니다.

좌측 이미지와 같이 SVG를 이용한 원형 샘플이 있습니다 (소스는 아래에..). 간단히 확대/축소 애니메이션을 구현한 것이다. 오페라와 Webkit기반의 웹브라우저에서 동작합니다 (아래 소스로는 FF 와 IE에서는 애니메이션이 작동하지 않습니다.)

SVG를 이용하면 간단한 벡터 그래픽과 애니메이션이상으로 많은 것들을 할 수 있으며  스크립트를 사용하여 좀더 인터랙티브한 웹애플리케이션을 개발할 수도 있습니다. SVG 에 대해서 좀더 자세히 알고자 한다면 오페라 개발자센터의 " SVG:Evlolution, Not Revolution"을 참조하세요.



<svg style="margin:10px" version="1.1" width="320" height="320" xmlns="http://www.w3.org/2000/svg"> 
  <defs> 
    <radialGradient id="circleGrad"> 
      <stop offset="0%"   stop-color="rgb(255, 255, 0)" /> 
      <stop offset="100%" stop-color="rgb(  0, 255, 0)" /> 
    </radialGradient> 
  </defs> 
 
  <ellipse fill="url(#circleGrad)" stroke="#000" cx="50%" cy="50%" rx="50%" ry="50%"> 
    <animate attributeName="rx" values="0%;50%;0%" dur="2s"  repeatCount="indefinite" /> 
    <animate attributeName="ry" values="0%;50%;0%" dur="2s"  repeatCount="indefinite" /> 
  </ellipse> 
</svg> 




HTML5 Cavas

HTML5 Cavas스펙에서는 다양한 자바스크립트 드로잉 API 들을 제공합니다. <canvas>태그요소만으로 HTML페이지에 원하는 그래픽을 드로잉 할 수 있습니다. 실제로 드로잉하기 위해서는 다른 옵션을 사용합니다.
전자인 2D드로잉 컨텍스트는 IE를 제외한 최근 웹브라우저에서 지원가능합니다.  후자인 3D드로잉 컨텍스트는 아직 표준화 작업중이며 손을 봐야 할 부분들이 남아있습니다.

좀더 폭넓게 지원되는 2D드로잉 컨텍스트에 대해서 살펴보자면, 2D 비트맵을 빠르게 드로잉 연산을 수행하기 위해 간단하고도 막강한  API들을 제공합니다. 파일포맷이 아니라 단지 스크립트를 이용하는 것입니다. 

소스다운로드 : 

HTML5로 구현한 canvas
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Canvas animation example</title>
    <script type="text/javascript">
    <!--
    window.addEventListener('load', function () {
    
        // canvas엘리먼트 찾기
        var canvas = document.getElementById('myCanvas'),
        w = 4,
        h = 4,
        zoompx = 6,
        step = 'zoomin';
        
        if (!canvas || !canvas.getContext) {
            return;
        }
        
        // canvas 2d context 가져오기.
        var ctx = canvas.getContext('2d');
        if (!ctx) {
            return;
        }
        
        var K = 4*((Math.SQRT2-1)/3);


        //줌인,줌아웃처리
        setInterval(function () {
            if (step == 'zoomin') {
                w += zoompx;
                h += zoompx;
            } else if (step == 'zoomout') {
                w -= zoompx;
                h -= zoompx;
            }
        
            if (w > canvas.width) {
                w = canvas.width;
                step = 'zoomout';
            } else if (w < 4) {
                w = 4;
                step = 'zoomin';
            }
        
            if (h > canvas.height) {
                h = canvas.height;
                step = 'zoomout';
            } else if (h < 4) {
                h = 4;
                step = 'zoomin';
            }
    
    
            // radial gradient 생성: x0, y0, r0, x1, y1, r1.
            // That's the start circle (x0,y0) coordinates and r0 radius,
            // followed by the end circle (x1,y1) coordinates and r1 radius.
            var gradient = ctx.createRadialGradient(
                Math.round(w/2), Math.round(h/2), 0, Math.round(w/2), Math.round(h/2), 
                Math.round(Math.min(w, h)/2)
            );
        
            gradient.addColorStop(0, "#ff0");
            gradient.addColorStop(1, "#0f0");
        
            // 그라디언트 속성 입히기
            ctx.fillStyle = gradient;
        
            // Ellipse radius and center.
            var cx = w/2,
            cy = h/2,
    
            // Ellipse radius*Kappa, for the Bezier curve control points
            rx = cx*K,
            ry = cy*K;
        
            ctx.setTransform(1, 0, 0, 1, 0, 0); 
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        
            ctx.setTransform(1, 0, 0, 1, Math.round((canvas.width - w) / 2), 
            Math.round((canvas.height - h) / 2));
            ctx.beginPath();
    
            // startX, startY
            ctx.moveTo(cx, 0);
        
            // Control points: cp1x, cp1y, cp2x, cp2y, destx, desty
            // go clockwise: top-middle, right-middle, bottom-middle, then left-middle
            ctx.bezierCurveTo(cx + rx, 0, w, cy - ry, w, cy);
            ctx.bezierCurveTo(w, cy + ry, cx + rx, h, cx, h);
            ctx.bezierCurveTo(cx - rx, h, 0, cy + ry, 0, cy);
            ctx.bezierCurveTo(0, cy - ry, cx - rx, 0, cx, 0);
        
            ctx.fill();
            ctx.stroke();
            ctx.closePath();
        }, 20); //end of setInterval

    }, false);
    // -->
</script>
</head>
<body>
    <canvas id="myCanvas" width="320" height="320">당신의 브라우저는 Canvas를 지원하지 않습니다.</canvas>
</body>
</html>


canvas 영역안에서는 이미지필터와 같이 pixel-manipluation 연산들을 수행할 수 있으면 png, jpg,등 브라우저가 로드할수 있는 이미지들을 삽입할 수도 있습니다. 또한 canvas 결과물을 일반 이미지로 export하거나 저장할 수도 있습니다. 아래소스는 Canvas 태그로 구성한 윈도우즈 그림판 소스입니다.

Canvas태그로 만든 이미지 저장 및 구현 :
기본적인 Canvas 를 배우시려면 오페라 개발자센터의 "HTML5 Canvas"를 참조하세요


여기서 제공한 canvas 예제는  좋은 사용예가 아닙니다. 왜냐하면 여러분은 SVG를 이용하면 더 적은 코드로 같은 기능을 구현할 수 있기 때문입니다. 좀더 좋은 canvas 사용예는 인터랙티브한 그래프와 이미지분석과 같은 동적인 정보를 표현하는 것입니다.  좋은 canvas예제로써 아래 그림과 같은 예제는 canvas 2D Context API를 이용하여 이미지 히스토그램을 표현하고 계산하는 예제입니다.

왼쪽의 이미지 히스토그램 예제 코드에서는 <img>태그로 이미지를 로드합니다.  그리고 이미지가 로드되는 순간 Canvas 2D Context API를 이용하여 이미지에 사용된 모든 픽섹들을 카운트하여 분석합니다.

사용자가 선택한 칼라값들(CMYKm HIV, RGB)에 따라 픽섹들이 카운트되고 분석됩니다. 오른쪽에 표시된 두번째 canvas태그에서는 각 픽셀에서 수집한 데이타를 바탕으로 이미지 히스토그램을 드로잉 합니다.







데꾸벅이 자주가는 canvas관련 사이트


이미지 히스토그램 소스 : 

Canvas 3D Context는 어디에 적합한가?
보통 3D 컨텍스트는 개체들, 텍스쳐, 음영값들, 그리고 상업적 애니메이션에 사용됩니다. 쿼크(Quake)같은 3D 게임을 만들수도 있고 3D 모델링 툴들을 제작할 수도 있습니다. 웹브라우저는 하드웨어 가속기를 이용하여 장면들을 드로잉 합니다. 물론 가능하다는 전제하에 말이죠!!





SVG와 Canvas 비교

아래 표는 svg와 canvas를 사용했을때의 장점과 단점을 표기한 것입니다. 뭐, 물로 데꾸벅이 한게 아니라 오페라 개발자센터에서 한거지만요.. ㅡ.,ㅡ;

장점
 Canvas  SVG
  • 높은 퍼포먼스의 2D영역으로 원하는 어떤것이라고 드로잉능함
  • 지속적인 수행 - 모든것이 픽셀이므로 이미지 해상도가 높을 경우에만 수행능력이 떨어짐
  • .png나 .jpg로 저장할수 있음.
  • 래스터방식(점-dotted방식)의 그래픽에 적합하여 게임이나 도형처리가 용이, 이미지 편집과 같이 픽셀수준의 처리가 용이하다
  •  해상도에 독립적이다 - 어떤 화면 해상도에서도 처리가능하기때문(벡터방식)에 SVG 를 크로스플랫폼 UI 에 적합하게 하였음. 
  • 애니메이션에 대한 지원이 좋음 - 엘리멘트들은 명확한 태그나 스크립트로 구현이 가능
  • 자바스크립트로 SVG DOM API 를 이용한 모든 엘리먼트들을 자유자재로 컨트롤한다.
  • SVG는 XML 파일포맷이므로 모든 웹브라우저에 지원하고 웹애플리케이션 UI에 좀더 좋은 솔루션으로 사용된다. UI 시맨틱은 ARIA로 향상시킬수 있다.


단점
 Canvas SVG 
  •  드로잉할 DOM노드가 없고 픽셀로만 컨트롤가능하다
  • 애니메이션에 대한 API가 없으므로 필요할때마다 이벤트를 업데이트하거나 타이머를 작동시켜야 한다.
  • 텍스트 렌더링에 약한다.
  • canvas를 지원하지 않는 브라우저가 존재하기 때문에 적절한 선택이 아닐지도 모른다.
  • 웹사이트나 애플리케이션 UI에 적합하지 않다. 왜냐하면 전통적으로 UI는 동적이고 인터랙티브하나 canvas는 다시 렌더링 해야 한다. 다른 이유로는 지원하는 애니메이션 API가 부족하다.
  •  문서 복잡도가 증가할수록 렌더링이 느리다. 즉 DOM이 많을수록 느리다
  • 게임같은 곳에서는 적합하지 않다.  아마도 가장좋은 방법은 Canvas + SVG 조합이 아닐까 한다.



어떤것을 선택할 것인가?

각 기술마다 자신만의 이용법이 있어 어떤것이 좋고 어떤것이 나쁜것인지 가늠할 수 없습니다.

Canvas가 적합한 예
  • 인터랙티브한 이미지 편집 : 자르기, 리사이징, 필터적용
  • 래스터 그래픽 생성 : 데이타 표현, 데이터 플롯, 챠트등
  • 이미지 분석 
  • 게임 그래픽 등

SVG가 적합한 예
  • 해상도 독립적인 웹애플리케이션 사용자 인터페이스
  • 매우 인터랙티브하고 애니메이션 되는 사용자 인터페이스
  • 데이타 챠트
  • 벡터 이미지 편집

간단하게 말하자면 두가지 기술을 모두 사용해야 합니다. 래스터 그래픽같이 동적으로 렌더링을 원한다면 canvas를 사용하고 그것들을 애니메이션 하려면 svg를 사용합니다.

언제 이런 기술들을 사용하죠?
순수하게 HTML + CSS기반으로 둥근 모서리펴현이나 CSS transition, 음영표현, 투명처리를 하려면 jquery와 같은 자바스크립트를 고려할 겁니다. 만약 여러분의 프로젝트가 순수 HTML과 CSS만으로 개발가능한지, 정말로 SVG, canvas가 필요한지 자신에게 반문해 보세요.   SVG는 가장 프리젠이션에 능한 마크업이고 HTML보다 일반적이지도 않는 전문성을 필요로 합니다.  프리젠테이션을 하기 위해 HTML과 CSS뿐만아니라 SVG를 선택하는 것은 그리 바람직 하지 않습니다.




요약 

이 포스트에서는 같지만 서로다른 두가지 기술들(SVG와 HTML5 Canvas)의 차이점에 대해 알아봤습니다.  각각의 기술의 강점과 단점을 있으므로 여러분은 적절하게 잘 사용하셔야 겠죠. 종종 이러한  하나의 웹애플리케이션에 두개의 기술을 적절히 혼합하면 좋은 결과를 수확할수도 있습니다.























'Publisher > HTML/HTML5' 카테고리의 다른 글

[HTML5] Progress Bar CSS입히기  (2) 2013.03.04
HTML5 Gallery  (4) 2009.04.10
웹페이지 소스보기 금지  (0) 2008.08.19
Post by 넥스트리소프트 데꾸벅(techbug)
, |

CSS 최적화 기법

Publisher/CSS / 2010. 3. 8. 01:25



웹표준 강의중 CSS 및 HTML마크업에 대해 체계적으로 개발할수 있게 프로세스를 정립하거나 CSS 도 마크업과 마찬가지로 구조적으로 짜야 한다는 얘길 한적이 있다.  사실 데꾸벅 조차도 프로젝트 초기에는 나름 구조적으로 코딩한다고 생각하나 나중에는 엘리먼트에 인라인으로 바로 넣거나 의미없는 태그로 wrapping하기도 한다. 사실 CSS를 코딩하다가 보면 처음에는 구조적으로 개발하다가 나중에는 덕지덕지 붙은 inline-style sheet나 잘못 cascading(혹은 inherited) 된 속성들 때문에 나중에는 더이상 수정할 수 없는 수준이 되기도 한다. 
그래서 아래 몇가지 CSS 를 최적화 할수 있는 방법을 소개한다.





1. CSS 를 구조화하라
마크업에서는 하나의 CSS 로 Linked하고 해당 CSS 에서 구조적으로 분기한다.

마크업
<html>
<link red="stylesheet" type="text/css" href="default.css" title="기본.css" media="all" /> 
</html>

기본.CSS
@charset "UTF-8"
@import url("base.css");    /*CSS Reset & overrides*/
@import url("table.css");    /* table관련속성*/
@import ulr("link.css");      /* 링크관련 속성*/

와 같이 구성하거나 기본 base.css에서 다음과 같이 작성한다. 먼저 
  1. CSS Resets 이나 overrid된 속성들
  2. Link 와 type
  3. Main layout
  4. Sub layout structures
  5. Form 요소
  6. 기타
과 같은 순서대로 구성한다.

/*CSS 리셋 및 오버라이된 속성*/
* {
   margin:0;
   padding:0;
}
img {border:none}


/* 링크 및 타입 */
body { }
a:link, a:active, a:visited, a:focus {}
a:hover {}
h1 {}
h1 a {}
h1 a:hover {}


/* 레이아웃 */
header,article,footer,nav,aside,menu {display:block}
header {}
article {}
footer {}
nav {}



/* 박스모델 */
.box01 {}



/* 폼요소 */
label {}
input {}
fieldset {}
legend {}


/*기타*/
.left {}
.right




2. 저작자 표시,  문서제목, 작성일자 표시
/* =============================
  데꾸벅
  Copryright 2010 Nextree soft
  written for - http://techbug.tistory.com

  - 칼라 견본 -

  13437a - darkblue
  1d74be - mid blue
  elelel - light gray
 ============================= */

다른이에게 자신이 짠 소스음을 알리는 부분이다. 저작권자를 표현하고 연락받을수 잇는 주소를 입력해 템플릿사이트나 기타 다른 사이트에 도용되지 않게 한다.
아래 칼라견본은 후에 CSS Guide문서를 작성할때 참조할수 있도록 미리 문서상단에 표기한다. 후에 칼라값을 찾을때 시간을 절약할 수 있게 한다.


3. 자신만의 CSS 템플릿을 보관하라
한번 구조화된 CSS와 마크업의 경우 나중에 재사용할 수 있다. 데꾸벅의 경우에도 프로젝트 마다 base.css와 테이블.css, 혹은 폼과 관련된 스타일시트들은 재사용하며 점점 업데이트 하여 사용한다.
각 사이트 마다 레이아웃이나 서브레이아웃의 상세 요소들은 스타일이 틀릴수 있으나 기본적은 스타일들은 대부분 비슷하게 적용되므로 보관하는것이 좋다.



여러분은 각 사이트마다 모바일용 레이아웃, 혹은 블러그, 카페, 포탈사이트 레이아웃등 자신만의 레이아웃들을 보관할 수 있다. Coda (OSX 에디터)는 웹사이트 개발할때 미리 이러한 레이아웃을 제공하여 웹사이트 제작 및 소스코드 관리를 편리하게 제공해 준다.





4. 유용한 명명법(Naming Convention)
클래스나 Id를 명명할때는 위치값이나 특정속성값들을 사용하지 않는다. 
예를들면 col-left나 col-right 대신에 col-alpha, col-beta혹은 col01, col02와 같이
명명한다. 왜냐하면 나중에 다른 사이트를 개발할때 col-left가 오른쪽에 위치할때 문제가 된다.
그러므로 특정 디자인에 관련된 용어를 클래스나 id값에 명명하지 않는다.
클래스나 id이름은 어떻게 보이느냐가 아니라 반드시 그 요소가 무슨 기능을 하는지에 따라 명명한다.
예를 들면 .post-title보다는 .post-lagefont라 짓고 .comment-blue 보다는 .comment-beta와 같이 몀명한다.



5. 언더바 보다는 하이픈을 사용
오래된 브라우저는 언더바를 지원하지 않는다. 향후호환성을 위해 #col_alpha보다는 #col-alpha라고 명명한다.



6. DRY(Don't Repeat Yourself)하게 코딩
스타일을 재지정하는것 보다는 그룹핑하여 사용한다.
h1 {
    margn:1px 0 0;
    font:normal 12px gulim;
}
h2 {
    margn:1px 0 0;
    font:normal 12px gulim;
}
과 같이 되어 있으면 아래와 같이 그룹핑한다.
h1, h2 {
    margn:1px 0 0;
    font:normal 12px gulim;
}

또는 단축속성을 사용한다.

h1 {
   margin-top:1px;
   margin-right:0;
   margin-bottom:0;
   margin-left: 1px;
   font-family:gulim;
   font-size:12px;
   font-weight:bold;
}
은 다음과 같이 단축형 속성으로 처리 가능하다.
h1 {
   margin: 1px 0 0 1px; (위>오른쪽>아래쪽>왼쪽, 위>오른쪽|왼쪽>아래쪽, 위|아래>왼쪽|오른쪽등)
   font:bold 12px gulim
}



7. 경량의 CSS 파일
위 속성들 처럼 단축속성들이 몇개 있다. 아래와 같이 사용할 수 있다.
풀속성으로 파일을 크게하지 않고 아래 단축속성들을 사용하여 파일사이즈를 작게한다. 
background:url(이미지주소) 0 0 no-repeat scroll;
font : normal 12px gulim

파일사이즈가 작을수록 좋다. CSS Compressor를 이용하여 자바스크립트처럼 Obfuscate할수 있다.




8 Gecko를 기본으로, 그리고 다음에 IE, Webkit순으로
기본적으로 웹표준을 잘 따르는 브라우저를 기본으로 코딩하여 표준에 충실하며 IE에서 표현되지 않는 부분들은 hack을 사용하여 표현한다.  
왜  먼저 IE를 먼저 맞추면 안되냐고 묻는 개발자들이 있다.   IE에 맞추고 FF에서 틀어진 부분을 맞추려면 맞는 Hack이 없다.. ㅡ.,ㅡ; (대략난감)



9 유효성 검증
W3C의 CSS Validator를 이용하여 표준문법을 사용한다.
요즘은 브라우저에 플러그인 식으로 제공하므로 굳이 웹사이트를 이용하지 않아도 된다.
예를 들면 파이어폭스의 HTML Validator나 Firebug CSS Validator등이 있다.



10. 정돈된 CSS형태로 유지하라
개인적으로 브라우저에 특화된 CSS나 자바스크립트, 서버사이드 코드, IE 조건식등은 별도로 관리하며
기본 CSS에는 hack이 없는 깨끗한 상태로 유지한다. 기본 CSS 는 깨끗하고 유지보수가 편하게 관리한다.



11. 되도록 Hack을 사용하지 말라
10번 항목과 일맥상통하는 얘기이나 되도록 Hack을 사용하지 않는 식으로 코딩한다. 향후 대부분의 브라우저는 표준을 따라간다. 여러분이 짜놓은 CSS 에서 hack을 사용하지 말고 작성한다 어쩔수 없는 경우 사용한다면 별도의 파일로 관리한다.  
개발자이자 유명한 웹표준저자인 Peter Paul Koch는 다음과 같이 말한다.
“The complexity monster has reappeared, right in the center of modern Web development. Nowadays it doesn’t manifest itself as an endlessly nested table, but as an endlessly complicated CSS hack"



12. 문서와 CSS파일을 분리하라
태그에 직접 스타일시트를 작성하는 inline-styleed 표기법 대신에 embeded, imported방식으로 작성하여  구조(HTML)와 표현(CSS)를 분리한다. 기본적으로 브라우저는 URI가 바뀌지 않는 자원에 대해서는 캐시하는 특성이 있으므로 CSS 파일로 별도로 분리한다.  



13. DIV를 남용하지 말라
국내든 해외든, 특히 국내 퍼블리셔분들을 보면 div 태그를 너무 남용한다는 생각이 많이 든다. 마크업은 문서 그대로 구조만을 표현해야 하며 태그는 반드시 태그 그 자체의 의미대로 시맨틱하게 작성한다. HTML5의  <header>,<footer>,<nav>,<article>기타등등과 태그는 이와 같은 의도로 작성되었으며 브라우저자체에서 잘 렌더링할수 있도록, 혹은 추후 좀더 의미를 두기 위해 div태그등을 남용하지 않는다.
이러한 연습을 하기 위해 데꾸벅의 경우 마크업과 CSS 를 동시에 작성하지 않으며 마크업은 개발자에게 프로젝트 표준형식을 정해둔뒤 추후 혼자 CSS 작업을 하는 경우가 많다. (사실 마크업을 작성하는 수고를 덜수 있어서 좋다.)



14. 미디어타입을 이용하라
"인쇄했을 경우를 고려하라" 라는 의미와 같다. 사실 CSS 를 제거했을때도 문서의 흐름과 마크업만으로도 의미 전달을 할 수 있어야 한다. 이런 점에서 국내의 현실이 안타깝기 그지 없다.  














'Publisher > CSS' 카테고리의 다른 글

Height 100% 2~3단 컨텐츠 레이아웃잡기  (18) 2010.07.27
간단한 CSS Reset  (4) 2010.05.24
지금 바로 쓸수 있는 CSS3  (0) 2010.03.07
Firefox에서 링크 점선 없애기  (2) 2010.03.06
CSS로 만든 3D입체 이미지  (6) 2009.12.31
Post by 넥스트리소프트 데꾸벅(techbug)
, |




CSS(Cascading Style Sheets)는 마크업(HTML)을 자유롭게 표현할 수 있는 웹디자인 언어이다. 현재 CSS Level3는 표준화 작업중이다. 사실 CSS를 공부하려할때 어디서 부터 시작해야 되는지, 혹은 어떻게 이용해야 하는지 궁금해 하는 분들이 많다. CSS3 는 아직 공식적으로 웹표준 권고안이 아니지만 몇몇 브라우저들은 벌써부터 몇가지 기능들을 미리부터 제공하고 있다.특히 jQuery의 DOM Selector를 보면 CSS3 Spec에 명시된 내용을 미리부터 관련 표현들을 사용하고 있다. 그래서 몇가지 CSS3 의 새로운 기능을 미리 살펴보고자 한다. ( 본 포스트는 디자인스팟에서 제공하는 팁을 참조하여 작성하였다. )
 Speaking In Styles : The Fundamentals of CSS for Web Designers에서 언급한 향상된 디자인이라  스타일이 렌더링이 되지 않았을때 대체할수 있도록 비주얼적으로 어필할수 있도록 사용성을 향상시킬수 있는것을 말한다.
각설하고, 몇가지 CSS3 속성으로 아래와 같은 효과들을 얻는 팁을 소개한다.
  • 디자인 향상 예제 : border-radius를 이용하여 박스의 테두리를 둥글게 표현할때 좀더 디자인적으로 어필할 수 있으나 이러한 코너링이 제대로 렌더링 되지 않아도 여전히 해당 웹사이트를 사용할 수 있게 처리한다.

  • 사용성 체감 디자인예제:  백그라운드나 엘리먼트들의 RGBA(Red, Green, Blue, Alpha) 색상값을 이용해 상위 레이어에 위치한 , 즉 z-index값이 높은 요소들을 불투명하게 표시함으로써 아래에 배치된 개체를 미리 볼수 있는 기능을 제공해 줌으로써 사용성을 배가 시킬수 있게 처리한다.

아래 6가지 CSS3 속성값들을 이용하여 지금 바로 여러분의 사이트를 좀더 다양하게 표현해 보자
아래 이미지는 스타일을 적용하기 전의 원본 디자인 표현이다.



최종소스 다운로드 : 지원브라우저 : 사파리4이상, 파이어폭스3.5 이상, 구글크롬1.0 이상




1 투명한 칼라효과
지원브라우저 : 사파리4, 파이어폭스3.0.5, 구글크롬1

RGBA는 텍스트, 백그라운드, 보더, 음영과 관련된 컨트롤들에  특정한 칼라값을 채워넣는 것이다. 보통 색깔값은 #FFFFFF와 같이 16진수형 표현으로 사용되거나 red, blue, navy,orange등과 같이웹에 암묵적으로 명시된 칼라값들을 사용하나 RGB는 0~255까지 범위값으로 표현한다.  추가적으로 A 는 투명도를 표현하는것으로 0(투명transparent)~(불투명:opaque)로 표현한다.
rgba(0-255,0-255,0-255,0-1)


[이미지출처 : 웹디자이너월]

브라우저에 다음과 같이 사용할 수 있다.
.topbox {
    color: rgb(235,235,235);
    color: rgba(255,255,255,0.75);
    background-color: rgb(153,153,153);
    background-color: rgba(0,0,0,0.5);
    border-color: rgb(235,235,235);
    border-color: rgba(255,255,255,0.65);
}

IE에서는 지원되지 않으나 조건(if IE)로 gradient를 구현할수 있다.
<!--[if IE]>
.pretty-box {
    background:transparent;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000050,
          endColorstr=#00000050);
    zoom:1;
}
<![endif]-->





2  둥근 모서리 효과
지원브라우저 : 사파리3, 파이어폭스1, 구글크롬1

테두리의 코더값은 아래와 같이 radius값으로 지정해 줄수 있다.
border-radius:값



브라우저 호환을 위해 다음과 같이 표현한다.
-webkit-border-radius: 10px;   (사파리나 크롬)
-moz-border-radius: 10px;     (파이어폭스)
border-radius: 10px;

각각 지정해 주려면 다음과 같이 하면 된다.

CSS3

Mozilla

WebKit

border-top-right-radius

-moz-border-radius-topright

-webkit-border-top-right-radius

border-bottom-right-radius

-moz-border-radius-bottomright

-webkit-border-bottom-right-radius

border-bottom-left-radius

-moz-border-radius-bottomleft

-webkit-border-bottom-left-radius

border-top-left-radius

-moz-border-radius-topleft

-webkit-border-top-left-radius

border-radius

-moz-border-radius

-webkit-border-radius








3. 텍스트 음영(Drop Shadow효과)
지원브라우저 : 사파리3, 파이어폭스3.0.5, 구글크롬1

특정 텍스트 하단에 음영을 추가하기 위해서는 다음과 같이 좌/우측, 위/아래, offset값과, blur효과, 칼라값등과 같이 표현하다.
text-shadow: x y blur color;

[이미지출처 : 웹디자이너월]


음영을 조절하기 위해 다음과 같이 표현한다.
text-shadow: -2px 2px 10px rgba(0,0,0,.5);

여러개 효과를 주려면 아래와같이 콤마(,)로 구현한다.
text-shadow:   
       0 0 10px rgba(0,255,0,.5),
       -10px 5px 4px rgba(0,0,255,.45), 
       15px -4px 3px rgba(255,0,0,.75);





아래 이미지와 같이 표현하기 위해서는
text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;  
이 하면 된다.






4. 박스모델의 음영주기
지원브라우저 : 사파리4, 파이어폭스3, 구글크롬1

박스모델에 음영을 주기위해서는 아래와 같이 text-shodow와 같이 표현한다.
box-shadow: x y blur color;

text-shadows와 같이, Mozilla 와 Webkit에서 최종CSS표준에서는 자신만의 문법을 제공한다.
-webkit-box-shadow: 0 0 10px rgb(0,0,0);
-moz-box-shadow: 0 0 10px rgb(0,0,0);
box-shadow: 0 0 10px rgb(0,0,0);

멀티음영을 주려면 아래와같이 공백으로 분리하여 컴마(,)로 멀티표현하여 처리한다.
-webkit-box-shadow: 0 0 20px rgb(0,255,0),
        -10px 5px 4px rgba(0,0,255,.45), 
         15px -20px 20px rgba(255,0,0,.75);
-moz-box-shadow: 0 0 20px rgb(0,255,0),
         -10px 5px 4px rgba(0,0,255,.45), 
         15px -20px 20px rgba(255,0,0,.75);
box-shadow: 0 0 20px rgb(0,255,0),
         -10px 5px 4px rgba(0,0,255,.45), 
         15px -20px 20px rgba(255,0,0,.75);



-moz-box-shadow: 
          -2px -2px 0 #fff,       /*shadow1*/
          2px 2px 0 #bb9595,    /*shadow2*/
          2px 4px 15px rgba(0, 0, 0, .3);  /*shadow3*/





5. 백그라운드이미지 여러개 표현
지원브라우저 : 사파리1.3,  구글크롬1

백그라운드 이미지를 주기위해서 아래 두번째 줄과 같이 콤마(,)로 해당 이미지를 여러개 표현할 수 있다.
background-image: url(astro-127531.png);
background-image: url(astro-127531.png),url(Hubble-112993.png);
background-repeat: no-repeat;
background-position: bottom left;
background-position: bottom left, top right;

background: url(첫번째이미지) 0 0 no-repeat, url(두번째이미지) 10 -20px repeat-x;





6. 박스모델 회전시키기
지원브라우저 : 사파리4, 파이어폭스3.5 구글크롬1

아직 CSS3 표준스펙에는 포함되어 있지 않지만 Webkit과 Mozilla에서는 박스모델 회전을 시키는 속성값이 있다.
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);


rotate속성을 지원하지 않는 브라우저에서는 다음과 같이 표현된다.






정리하자면

위의 css3 의 4가지 룰에 대해서 정리하자면 다음과 같다.(순서주의) 
아래소스는 모든 브라우저에서 호환가능하도록 cross-browsing처리하기 위한 표현들이다 css3에 대해 간단하게 처리하기 위해서는 다음과 같이 css reset 기능들을 가지고 있으면 개발시 유용할것 같다.

/*둥근모서리 표현*/
.box_round {
     -moz-border-radius: 12px; /* FF1+ */
     -webkit-border-radius: 12px; /* Saf3+, Chrome */
      border-radius: 12px; /* Opera 10.5, IE 9 */
}


/*박스음영*/
.box_shadow {
  -moz-box-shadow: 0px 0px 4px #ffffff; /* FF3.5+ */
  -webkit-box-shadow: 0px 0px 4px #ffffff; /* Saf3.0+, Chrome */
  box-shadow: 0px 0px 4px #ffffff; /* Opera 10.5, IE 9.0 */
  filter:  progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#ffffff'); /* IE6,IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#ffffff')"; /* IE8 */
}

/*백그라운드 그라디언트*/
.box_gradient {
  background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #444444)
                             ,color-stop(1, #999999)); /* Saf4+, Chrome */
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999');
         /* IE6,IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999')";
        /* IE8 */
}


/*투명효과*/
.box_rgba {
  background-color: #B4B490;
  background-color: rgba(180, 180, 144, 0.6);  /* FF3+, Saf3+, Opera 10.10+, Chrome */
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#99B4B490',endColorstr='#99B4B490');
         /* IE6,IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#99B4B490'
                 ,endColorstr='#99B4B490')"; /* IE8 */
}


/*박스모델 회전*/
.box_rotate {
  -moz-transform: rotate(7.5deg);  /* FF3.5+
  -o-transform: rotate(7.5deg);  /* Opera 10.5
  -webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome
   filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7
   -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8
}


/*웹폰트*/
@font-face {
  font-family: 'WebFont';
  src: url('myfont.eot');  /* IE6+ */
  src: local('?'),
        url('myfont.woff') format('woff'),  /* FF3.6 */
        url('myfont.ttf') format('truetype');  /* Saf3+,Chrome,Opera10+ */
}


CSS3 향후지원할 BOX Model 에 대한 흥미로운 포스트가 있어 소개합니다.

'Publisher > CSS' 카테고리의 다른 글

간단한 CSS Reset  (4) 2010.05.24
CSS 최적화 기법  (7) 2010.03.08
Firefox에서 링크 점선 없애기  (2) 2010.03.06
CSS로 만든 3D입체 이미지  (6) 2009.12.31
CSS 이용한 Text를 이미지로 대체하기  (3) 2009.11.16
Post by 넥스트리소프트 데꾸벅(techbug)
, |



웹표준 강의 중에 어떤 수강생분이 질문했던 부분인데  파이어폭스에서  <a>태그에 텍스트를 이미지로 대체할때 (CSS를 이용한 Text 대체하기 포스트 참조) 점선으로 테두리가 생기는 것을 확인했다.

예전에는 IE에서 이미지에 이러한 점선이 생기면 아래와 같이 작업하였었는데

<img src="이미지주소" onfocus="this.blur()" />

사실 이와같은 방법은 데꾸벅은 즐겨쓰지 않았지만.. (접근성을 고려할때 링크는 링크임을 표시해줘야 한다고 생각해서... )


Firefox에서 CSS를 이용하여 text-indent값을 주었을때 점선이 생기면 다음과 같이 아주 지저분하게 점선이 생긴다. 그래서 overflow로 잘라줌으로써 이와 같은 현상을 해결할 수 있다.

 
div h1 a {
         display:block;
         width:300px;
         height:100px;
         background:url(이미지주소) 0 0 no-repeat;
        text-indent:-2000px;
        overflow:hidden;
        outline:none;
}

 Firefox의 경우 text-indent까지 링크영역으로 인식해서 점선이 해당 indent영역까지 처리됨으로 overflow:hidden 을 더 추가해 줌으로써 이와 같은 현상을 깔끔히 해결할 수 있다. 밑의 outline:none; 은 a 링크의 점선라인을 삭제해주는 것으로 추가적으로 적어주긴 했으나 overflow만으로도 충분히 가능하다.

<a>링크의 점선까지 없애주기 위해서는 다음과 같은 속성으로 전역에 공통으로 선언함으로써 전체 링크의 점선을 모두 처리할 수 있다.   이 속성은 IE, FF등 모든 브라우저에 적용할 수 있다.
a {
        outline:none;
}


샘플파일 


사실 이러한 점선은 웹접근성에 비춰볼때 상당히 중요한 요소이다. CSS-TRICKS에서도 데꾸벅과 같은 생각을 가지고 있었는데 나보다 한술 더 떠서 이 블로그에서는 마우스를 올렸을때 포커스 했을때 CSS를 이용해서 좀더 꾸밀때를 설명해 주고 있다.

a:hover, a:active, a:focus { // styling for any way a link is about to be used }






'Publisher > CSS' 카테고리의 다른 글

CSS 최적화 기법  (7) 2010.03.08
지금 바로 쓸수 있는 CSS3  (0) 2010.03.07
CSS로 만든 3D입체 이미지  (6) 2009.12.31
CSS 이용한 Text를 이미지로 대체하기  (3) 2009.11.16
CSS Float속성의 모든것 (All About Floats)  (18) 2009.11.07
Post by 넥스트리소프트 데꾸벅(techbug)
, |


오늘자 ajaxian을 보다가 굉장한 CSS 애니메이션을 보게되서 함 분석해 봅니다.
이미지 3개와 background-position프로퍼티와 :hover 가상클래스를 사용하여 3D입체 이미지를 구현했군요~
고생꽤나했을듯~ ㅠ.,ㅠ;   이런거 보면 대단하다 보다는 고생이 먼저 떠오르는 이유는 뭘까요?


사용한 이미지

사용된소스 : 원본



 
 
 
 
 
 
 
 
 
 
 

	
  
원본소스다운로드 : 





이미지 하나에 background-position을 이용한 애니메이션

위 영역에 마우스를 올려보세요 ^^ 
이전에 포스팅한 CSS Sprites에서도 언급한 CSS background-position을 이용한 애니메이션입니다


사용된 이미지

소스






Post by 넥스트리소프트 데꾸벅(techbug)
, |




처음 이바닥에 발을 들여놓은지 어언~ 십수년이 지나갑니다. 그러나 그때나 지금이나 웹페이지의 성능향상은 언제나 중요하게 생각되고 있습니다.
어느분이 방명록에 의뢰한 내용이 있어서 찾아보다가 우연히 찾게된 야후! 개발자 센터에서 정의한 웹사이트 최적화 방법입니다. 필요할것 같아 잠시 정리해봅니다.
참고적으로 이곳에서 더글라스 크록포트아저씨의 Ajax 최적화 방법도 들을수 있습니다. 관심있는 분은 참조하세요~
"웹사이트 최적화 기법" 이라는 책도 나와있다는걸.. 번역이 끝난후 알아버렸음돠.. ㅡ.,ㅡ;
High Performance WebSite에 가시면 웹사이트 최적화 기법들이 좀더 상세하게 설명되어 있으므로 확인하시기 바랍니다.
각 브라우저마다 페이지속도를 최적화하기 위해 브라우저의 성능평가나 지원가능한 라이브러리 또는 현재 표준지원여부등을 비교한 사이트도 함 들러보시길...



 

HTTP Request를 최소화하라!

End-User응답시간의 80%는 Front-end단에서 소요된다. 이러한 응답시간의 대부분은 보통 해당 페이지에 포함되어 있는 이미지, 스타일시트, 스크립트, 플래쉬등과 같은 컴포넌트를 다운로드 하는 것과 연관된다. 이러한 컴포넌트를 줄이는것이 웹페이지를 렌더링하는데 요구되는 HTTP Request의 수를 줄이는 한방법이며 좀더 빠른 웹페이지를 구성할수 있는 중요한 포인트이다.

웹페이지내의 컴포넌트의 수를 줄이는 한 방법으로 페이지 디자인을 간결하게 하는것이다. 그러나 좀 더 빠른 시간에 응답메세지를 받으면서 풍부한 컨텐츠(Richer Content)를 제공하기 위한 방법은 없을까? 여기 이러한 풍부한 디자인을 제공하면서 HTTP Request수를 줄이는 방법을 소개한다.

파일 묶기(Combined Files)

한개의 스크립트에 모든 스크립트를 묶어서 (데꾸벅 주: 순차적 다운로드 방법- head 영역에 script를 순차적으로 append시키는법) 사용하거나 하나의 CSS안에 다른 CSS를 묶는 식(데꾸벅 주: @import를 이용한 CSS import)으로 HTTP Request수를 줄이는 방법이다. 이러한 파일묶기 방법은 각각의 스크립트나 스타일시트가 서로다른 페이지에서 다양하게 사용될때는 조금은 무리가 있는 방법이기는 하나 캐쉬를 지원하므로 응답속도를 향샹시키는 하나의 방법으로 사용할수 있다.

CSS Sprites
CSS Sprites는 이미지 Request수를 줄이는 방법으로 사용한다. 하나의 이미지에 여러가지 백그라운드가 사용될때 이미지 조각들을 보여주는 background-image와 background-position 프로퍼티를 사용한다.
(데꾸벅 주: 하나의 버튼을 만들때 마우스오버, 마우스다운, 비활성화 상태의 버튼을 표시하자면 각각의 상태마다 버튼 이미지들이 필요한데 이러한 이미지들을 하나로 만들어서 한번의 Request를 이용해 CSS의 background-position을 사용하여 표현한다. 대부분의 Ajax framework이나 라이브러리들의 CSS를 보면 이렇게 사용하는곳이 많다. 디자이너들에게 추천해 줄만한 내용이다.  미남이의 이러쿵저러쿵 블로그를 참조하세요)

Image Maps
이미지맵은 하나의 이미지 않에 여러개의 이미지를 묶는 방법이다. 전체사이즈는 갔지만 HTTP Request의 수를 줄여줌으로써 페이지 로딩을 더 빠르게 한다. 이미지 맵은 navigation bar와 같이 페이지내에서 연속적으로 사용되는 이미지가 있다면 사용하는것이 좋다.(데꾸벅 예: 웹에디터의 메뉴들) 
페이지 네비게이션에 이미지맵을 사용하는것은 접근성면이나 컨트롤하기가 어려우므로 네이비게이션 영역에서는 추천하지 않는다.

URL Scheme를 이용한 데이타로써 인라인 이미지 사용
실제 페이지에서 이미지 데이타는 URL Scheme를 포함한 데이타로 사용된다. 이러한 것들이 HTML문서사이즈를 증가시킨다. 캐시된 스타일쉬트안에 이러한 인라인이미지를 포함시키는것은 HTTP Request와  웹페이지 사이즈를 줄여줄수 있는 한 방법이다. 인라인이미지의 경우는 아직 다른 브라우저에서는 지원하지 않고 있다.

(데꾸벅 주 : base64로 인코딩된 이미지 파일포맷으로 브라우저에서 재해석하여 렌더링 되므로 이러한 렌더링 타임을 줄이는것이 좋다.  IE8이나 다른 브라우저에서는 이미 base64 포맷으로 이미지를 사용할 수 있다.)

웹페이지를 설계할때 HTTP Request수를 줄이는 것에서 시작하라.
이것은 처음 방문한 사용자를 위해 성능향상을 위한 가장 중요한 가이드 라인이다.  Tenni Theurer씨의 블로그 포스트(Browser Cache Usage-Exposed!)에서 언급한것처럼 일일 방문자중 40~60%가 아무런 캐쉬가 없는 상태에서 여러분의 웹사이트에 방문한다. 이러한 첫번째 방문자를 위해 페이지를 설계하는것이 사용자경험을 좋게 만드는 중요한 키포인트이다. 




CDN(Content Delivery Network)을 사용하라!

사용자와 웹서버의 거리가 가까울수록 응답속도는 빨라진다. 사용자에게 좀더 빠르게 여러분의 컨텐트를 제공하고자 한다면 서버를 사용자들과 지리적으로 가까운쪽으로 분산하여 배포한다. 
(데꾸벅 주 : 서울에 사는 사용자에게 여러분의 컨텐츠를 제공하고자 한다면 서울에 있는 서버가 부산에 있는 서버보다 빠르다는 얘기이다. 그렇다고 서버를 여러군데 설치한다면 배보다 배꼽이 더 커지는 경우이다. 이럴 경우에는 CDN 을 이용하면 좀더 비용을 줄일수 있지만 그렇다고 CDN이 싸다는 얘기는 절대 아니다. 대부분의 돈많은(?) 포탈들의 경우 이러한 CDN을 사용하고 있고 속도가 빠른 웬만한 주요 벤더들의 국내사이트들은 대부분 CDN을 사용하고 있다고 보면 된다.) 


 

Gzip 컴포넌트 사용

참고 URL_1 : apache의 mod_gzip 설정하기
참고 URL_2 : gzip 압축테스트
참고 URL_3 : mod_gzip설치


스타일시트는 최상위에

 HTML specification 에 스타일시트는 페이지의 Head부분에 넣으라고 명백하게 기술되어 있다.
    " LINK태그는 HEAD태그에서만 사용할수 있고 몇개를 넣어도 상관없다. "



스크립트는 맨 밑에

동시에 컨텐츠를 다운로드 하는 문제가 발생한다.   HTTP/1.1 specification 에서는 브라우저는 하나의 호스트네임에서는 동시에 두개이상 컴포넌트를 다운로드 다운로드하지 않는다고 제시한다. 만일 여러분이 이미지를 여러개의 호스트네임으로 서비스한다면 여러분은 동시에 두개이상이 컴포넌트를 다운로드 받게 되는것이다.
스크립트가 다운로드 되는 동안 브라우저는 다른 컨텐츠를 다운로드 받지 않는다.
스크립트를 페이지 맨밑으로 보내지 못하는 경우도 있을 것이다 만일, 예를 들어 스크립트를 document.write를 써서 컨텐츠의 한 부분으로 넣는다면 해당 스크립트를 페이지 맨 밑으로 보내지 못할것이다.  당연히 스크립트의 scope 문제가 발생하게 된다.

대안으로는 defer 스크립트를 사용하는것이다.  DEFER 속성은 스크립트가 document.write를 포함하지 않는다는것을 가르키며 브라우저가 계속 렌더링 할수 있게 해주는 하나의 방법이였다. 불행히도 파이어폭스는 DEFER속성을 지원하지 않는다.

(요즘  자바스크립트 라이브러리들은 defer 속성 대신에 document.ready나, window.onload를 사용한다.)   



CSS Expressions 피하기

CSS expressions은 CSS Properties를 동적으로 사용하는 강력한 방법이기는 하나 위험하다. 인터넷 익스플러러 5 버전 이상에서 지원한다.  종종 개발할때 투명 PNG파일을 사용하기 위해 이와같은 expression을 사용하기도 하고, 이미지로된 콤보박스를 만들때 사용되기도 하지만 익스플로러를 제외한 다른 브라우저에서는 지원되지 않으므로 사용을 자제하는것이 좋다.



자바스크립트와 CSS는 외부파일로 작성 

속도향상 규칙의 많은 부분들이 외부자원을 어떻게 효율적으로 다루냐에 달려있다. 
실제로 외부파일들을 사용하면 페이지 로딩속도가 점차적으로 빨라진다고 한다. 왜냐하면 자바스크립트와 CSS는 브라우저에 캐쉬되기 때문이다.  HTML안의 자바스크립트와 CSS는 HTML이 요청될때마다 서버에서 다운로드 받게 된다.



DNS Lookup을 줄여라

DNS(Domain Name System)은  호스트이름을 IP 주소로 매핑시킨다. 전화번호부가 사람들의 이름과 전화번호부로 매핑되듯이 말이다.  만일 여러분이 브라우저에 techbug.tistory.com으로 타이핑한다면 DNS resolver는 서버 IP주소를 리턴받아 브라우저에서 접속하게 해준다. 
주어진 호스트네임을 IP주소로 바뀌는데 20~120 밀리초가 걸린다. 또한 브라우저는 DNS Lookup이 완료되기전에는 어떠한 것도 다운로드 받지 않는다.

 

 


프레임수를 최소화하라

Iframe은 부모문서에 HTML 문서를 삽입하는것이다. iframe이 어떻게 효과적으로 사용되는것인지 이해하는것이 중요하다.

<iframe> 써야 되는 이유:

  • 광고나 뱃지와 같은 로딩이 느린 3-party컨텐트들
  • Security sandbox
  • 동시에 다운로드되는 스크립트들

<iframe> 쓰지 말아야 되는 이유:

  • Costly even if blank
  • Blocks page onload
  • Non-semantic

 


 

DOM접근을 최소화하라

자바스크립트로 DOM요소에 접근하는것은 페이지응답속도를 느리게 한다. 대신에 여러분은

  • 접근했던 엘리먼트 참조를 캐쉬하라
  • "offline"노드들을 업데이트하고 그것들을 DOM트리에 추가하라
  • 자바스크립트로 레이아웃을 고정하는것을 피하라
더 자세한 정보를 원한다면 Julien Lecomte의 "High Performance Ajax Applications"를 참조하라 


이벤트 핸들러를 적절히 사용하라!

때때로 너무많은 이벤트 핸들러 때문에 페이지들의 응답이 늦는것 처럼 느껴진다.  이때는 이벤트 딜리게이션(event delegation)을 쓰는 것이 좋은 해결책이다. 만일 하나의 div에 10개 버튼을 가지고 있다면 각각의 버튼에 이벤트핸들러를 다는 대신에 div wrapper에 단 하나의 이벤트 핸들러를 사용하라. 

DOM tree로 어떠한 액션을 시작하기 위해 onload이벤트를 사용할 필요는 없다.단지 여러분이 원하는것은 DOM tree에 접근할수 있는 엘리먼트만 필요할 뿐이다. 또한 여러분은 이미지가 다운로드 되기를 기다릴 필요가 없다. 다만 모든 브라우저에서 사용할수는 없지만 DOMContentLoaded 이벤트는 onload대신에 사용할수 있을것이다. 여러분은 onAvailable 메쏘드와 같이 YUI 이벤트 유틸리티를 사용할 수 있다.
더 자세한 정보를 원한다면 Julien Lecomte의 "High Performance Ajax Applications"를 참조하라 

@import 보다는 <link>를 선택하라

 스타일태그는 항상 페이지 상단에서 정의한다. 다만 IE에서의 @import는 <link>태그를 페이지의 하단에 위치하는것과 같으므로 @import보다는 <link>를 사용하도록 한다. 
참고 사이트 : High Performace Web Site Blog



Filter사용을 피하라!

IE의   AlphaImageLoader 프로퍼티는  IE7미만 버전하에서 PNG이미지의 반투명한 문제를 해결하기 위한 목적으로 쓰는 filter이다.그러나 이러한 프로퍼티는 PNG이미지를 다운로드 받는동안 브라우저를 멎게(freeze) 만든다. 또한 이미지에 따른것이 아니라 똑같은 이미지가 여러개일 경우 각 엘리먼트마다 적용되므로 메모리 소비를 증가시킨다. 

가장 좋은 방법은 AlphaImageLoader를 사용하지 않는 방법이다. 굳이 사용하고자 한다면 IE7이상의 사용자에게는 적용되지 않도록  언더바(_) CSS hack을 사용한다. (_filter:AlphaImageLoader)



이미지를 최적화하라!

웹디자이너가 웹페이지 이미지들을 생성하고 난후 이러한 이미지를 웹서버에 올리기전에 해줘야 할 일들이 있다.
(데꾸벅 주:  웹디자이너는 포토샵으로 이미지 저장시 save as for web으로 저장한다.)

  • 이미지매직(imagemagick)을 이용하여   identify -verbose image.gif와 같이 GIF이미지들은 칼라수에 따라 사이즈를 설정할수 있다. (데꾸벅 주 : 포토샵으로도 indexed color를 설정했을때 선택가능)
  • 저장할때 GIF를 PNG로 변경하라. 가끔씩 개발자들은 PNG이미지가 브라우저마다 제한적으로 지원하는것 때문에 주저한다. 그러나 이것은 이미 오래된 얘기다 진짜 문제는 true-color PNG이미지의 alpha-tansparency때문에 그러한데, GIF이미지는 실제 true color가 아니며 다양한 투명이미지조차 지원하지 않는다. (데꾸벅 주: 가끔 anti-aliasing이 먹은 GIF이미지를 투명이미지로 만들때 테두리가 완벽한 투명성을 지원하지 않는다.) 
    이미지매직을 이용하면 convert image.gif image.png  과 같이 하면 된다.
  • pngcrush(데꾸벅 주: PNG이미지 커스터마이저)를 이용해서 최적화하라.
    pngcrush image.png -rem alla -reduce -brute result.png
  • jpegtran을 이용해서 JPG이미지를 최적화하라
    jpegtran -copy none -optimize -perfect src.jpg dest.jpg



이미지 크기의 원래사이즈를 적어라!

HTML 코드에 width와 height를 넣었다는 이유로 여러분이 원하는 것 보다 더 큰 이미지를 사용하지 말라! 만약 여러분이  <img width="100" height="100" src="mycat.jpg" alt="My Cat" /> 를 원한다면 그때 500x500px 를 작게 해서 넣는것 보다   100x100px의 이미지를 넣는것이 좋다.
(데꾸벅 주 : 이미지에 사이즈를 주는 것이 퍼포먼스 측면에서 좋습니다만, 원래 500x500px 이미지를 100x100px로 준다고 해서 퍼포먼스가 좋아지는것이 아니라 100x100px로 표기하였으면 100x100px짜리 이미지를 넣으라는 뜻입니다)



CSS Sprites를 사용하라

참조 : CSS Sprites Generator
번역본 보다 다른 블로거의 글이 좋아 인용합니다. 원본글은 아래에서 확인하삼~

웹 페이지의 첫 로딩 속도를 줄여주는 여러 방법들 중, 서버로의 요청 횟수를 초소화 하는 것은 웹 어플리케이션의 최적화 요소들 중에서도 중요한 덕목이자 실제 적용하기에도 아주 손쉬운 방법이다.

보통 웹 페이지에서 치장을 목적으로 사용되는 백그라운드 이미지들은 많이 사용될 수록, 자동적으로 그 요청 횟수도 늘어나기 마련인데, 이를 줄이고자 하는 목적으로 쓰이는 기법으로 CSS Sprites 기법이 있다.

간단하게, 아이콘이나 버튼과 같은 반복되서 표시되지 않는 그림들처럼 독립되어 있는 여러 그림들을 하나의 그림으로 합쳐놓고 CSS의 background-position을 보여질 요소에 따라 바꾸어서 표시하는 기법인데, 이렇게 하면 서버로의 요청 횟수를 줄여주면서 사이트 로딩 속도를 줄여주고 더불어서 내려받는 이미지의 크기까지 줄여줄 수 있는 부수적 효과를 얻을 수 있다.

이 곳 블로그에서도 오른쪽 옆구리 아래에 붙어있는 표딱지 그림들의 경우, 개별 이미지를 사용할 경우 웹 페이지에 표시하려면 모두 10 번의 서버 요청이 필요한데, CSS Sprites 기법을 써서 왼쪽에 보여지는 바와 같은 하나의 그림으로 모든 단추의 배경 그림들을 표시할 수 있었다.

실제 구현 방법은 아주 간단해서, unordered li들로 구성된 메뉴들의 각 li에 특정 id 값을 지정해 주고 a 태그 속에 있는 text node를 <span> 태그로 감싸고 난 후, 여기에 background image의 좌표 값을 표시될 해당 위치에 맞게 지정해 주면 모든 작업이 끝난다.

한 가지 주의가 필요했던 것은 text 때문에 배경 그림이 일부 가려지는 것을 막기 위해, <span>에 적용한 CSS의 padding-left 값을 li의 너비 만큼 주어서, 결과적으로 글자를 화면 바깥으로 밀어내어 표시되지 못하도록 하였다. 이렇게 해서, 마지막 CSS 적용 결과는 다음과 같다.

div#sidebar div#badges ul li {

    list-style-type: none;
    list-style-image: none;
    background-image: none;
    width: 80px;
    height: 15px;
    margin-bottom: 4px;
    overflow: hidden;
}

div#badges span {
    display: block;
    background-image: url(images/buttons-bg.png);  <-- 이미지는 한번만 요청한다.
    background-repeat: no-repeat;
    padding-left: 80px;
    cursor: pointer;
}

//각각의 이미지는 background-position으로 위치시킨다.
div#badges #vxhtml span {background-position: 0 -15px;}
div#badges #vcss span {background-position: 0 -30px;}
div#badges #wcag span {background-position: 0 -45px;}
div#badges #uni span {background-position: 0 -60px;}
div#badges #cc span {background-position: 0 -75px;}
div#badges #mac span {background-position: 0 -90px;}

출처 : 미남이's Blog




favicon.ico파일은 작고 캐쉬가 가능하게 제작하라!

favicon.ico는 여러분의 서버 root에 위치시키는 작은 이미지이다.  예를 들어 IE에서는 onload시 다른 컴포넌트를 요청할때 해당 컴포넌트가 다운로드 되기전에 먼저 로드된다. 여러분은 이러한 favicon.ico파일을 만들때 다음사항을 유의해서 작성하라.

  • 1K이하로 작게 제작하라   Imaemagick을 이용하면 작은 favicons이미지를 생성하게 해준다.
  • Expires header를 설정하라.


25K 이하의 컴포넌트로 제작하라!

이러한 제한은 iPhone이 25K보다 큰 컴포넌트를 캐쉬하지 못한다는 사실에 기인한다. 좀더 자세항 정보를 원한다면 Wayne Shea & Tenni Theurer의 "Performance Research, Part 5: iPhone Cacheability - Making it Stick" 를 참조하라.



하나의 Multipart 문서에 컴포넌트들을 묶어라!

(Pack Compoents into a Multipart Docuement)

전자우편의 첨부파일과 같이 Multipart문서에 컴포넌트들을 묶는것이 여러개의 컴포넌트들을 하나의 HTTP Request에 함께 전송하는데 도움을 준다.(HTTP requests는 비싸다는것을 반드시 기억하라)
여러분이 이러한 기술을 사용할때 사용자 Agent가 이러한 기능을 지원하는지 반드시 체크하라. iPhone은 이러한 기능을 지원하지 않는다. 







Post by 넥스트리소프트 데꾸벅(techbug)
, |


데꾸벅이 기거(?)하고 있는 회사에서 팀장들을 대상으로 아래 책(97Things Every Project Manager Should Know)을 번역하고 있습니다. 데꾸벅도 물론 번역에 참여하고 있습니다..(우라질 영어울렁증이 다시 도지고 있습니다.. 쿨럭...)


트랙백(http://homo-ware.tistory.com/trackback/126)으로 국내 프로젝트 관리자들의 경험을 듣고자 합니다. 채택되신 분들께는 번역하는 책에 포함되는 영광(?)과 함께 번역본을 무료로 발송해 드리는 이벤트를 하고 있습니다. 많은 참여를 바랍니다.

원본글 : 人-ware  (이충헌차장님의 블로그.. ㅋㅋ)




O'Reilly 에서 출판된 '97 Things' 시리즈의 두번째 책입니다. 기존 Software Architect 에 관련된 책은 Eva팀과 같이 번역을 진행해서 내년 초에 출판될 예정이고, 이제 두번째 시리즈 책을 회사 내부의 팀장들과 같이 진행하고 있습니다. 이 책 역시 수많은 Software 프로젝트 현장에서 프로젝트 관리자(PM)로 경험하신 많은 분들의 이야기가 담겨져 있으며, 그 내용이 현실적이어서 많은 공감을 불러일으키는 것 같습니다. 이 책은 첫번째 책과는 달리 미국 각지 뿐만 전세계 각지의 IT 현장에 있는 사람들의 목소리를 실으려고 더 노력을 한 흔적이 보입니다. 책의 내용을 작성한 저자들이 다양한 국적을 가졌다는게 그 예입니다.

하지만, 못내 아쉬운 점은 소위 IT 강국이라고 하는 대한민국에서 진행되는 프로젝트를 경험한 PM의 목소리를 같이 실어내지 못했다는게 번역을 진행하면서 계속해서 마음 속에 남고 있습니다. 이에 번역서에서는 외국의 현실 뿐만 아니라, 국내 현장의 목소리를 같이 실어보자는 노력을 하려고 합니다. 따라서, 

이글을 읽으시고 PM을 수행하시면서 경험했거나 느꼈던 내용을 블로그에 남겨주시고,  트랙백으로 남겨놓으시면, 저희가 그 글을 읽고 내용이 좋으면, 출판시 해당 글을 같이 실으려고 합니다. 만일 해당 블로그의 글이 채택되면, 해당 글을 작성하신 분들의 간단한 이력을 포함해서 책을 출판할 것이고, 출판된 책을 보내드리려 합니다. 기간은 책이 출판되는 날(약 2달 가량)까지 입니다. 많은 블로거 분들의 참여를 부탁드립니다.


트랙백 주소 : http://homo-ware.tistory.com/trackback/126 

현재 책의 내용이 읽기 편하게 2페이지 분량으로 편집되었기 때문에 그러한 형식을 동일하게 취하기 위해 추가될 글 역시 2 페이지 내외의 분량으로 작성되었으면 합니다. MS 워드로 보면, A4 용지로 편집시 약 1장에서 1.5장의 분량으로 편집됩니다.






'강좌 및 번역' 카테고리의 다른 글

HTML5  (10) 2010.03.02
AJAX & UI 강의자료  (8) 2009.03.22
Post by 넥스트리소프트 데꾸벅(techbug)
, |




팀원이 MySQL 사용자 계정 호스트를 "%"로 설정후 로컬에서 원격서버(우분투)로 접속이 안된다고 하길래 별별 설정을 찾아 해메다 유용한 정보를 공유하고자 한다.. 
(이미 공개된 내용일지도.. ㅡ.,ㅡ; 간만에 MySQL을.. ㅠ.,ㅠ)

접속이 되질 알아.  iptables설정과  포트문제인듯 싶어 "sudo ufw allow 3306" 명령어로 포트도 열어보고.. 
telnet ~~ 3306으로도 접속해보고.. /etc/hosts.deny 파일두 훝어보고..  한동안 못만났던 MySQL사이트도 뒤져보고... ㅠ.,ㅠ   우야튼 아~ 오늘도 데꾸벅 삽질을 하다~
# vi /etc/mysql/my.cnf

#
# Instead of skip-networking the default is now to listen only on
# localhost which is more compatible and is not less secure.
#bind-address = 127.0.0.1 
#
# /etc/init.d/mysql restart

bind-address 부분을 주석처리(#)해주고 MySQL을 다시 실행하면 접속이 잘 된다..
보안상 특정아이피만 접근하도록 설정한거란다..
아무튼 다른분들은 삽질 하지 마시길..



Post by 넥스트리소프트 데꾸벅(techbug)
, |



AJAX에서 XMLHttpRequest 객체 삭제

ajax 강의중 메모리에 있는 객체를 삭제시키는 방법에 대해서 질문을 하신 분이 있었는데 사실 명시적으로 null 로 처리하면 되나 좀더 깔끔한 방법을 소개하고자 한다.
function deletexhr(xhr) {
    function doNothing() {
    }
    xhr.onreadystatechange = doNothing; //onreadystatechagne를 더미함수로 대체    
    xhr.abort();                        //xhr 요청 중단
    delete xhr;                         //xhr 객체 밑의 모든 프로퍼티 삭제
}





자바스크립트에서 delete 연산자

자바스크립트의 delete연산자는 단항연산자로써 피연산자로 지정된 객체 프로퍼티, 배열원소 또는 변수의 삭제를 시도한다.
(C++ 프로그래머라면 자바스크립트의 delete연산자는 C++의 delete연산자와 전혀 닮지 않았다는 것을 발견할 것이다. 자바스크립트의 메모리 해제는 GC에 의해 자동으로 관리되기 때문에-순환참조 제외- 메모리를 직접 해제하는일에 신경 쓸 필요가 전혀없다.)

피연산자가 성공적으로 삭제되었을 경우 true를 반환하고, 삭제될 수 없는 경우 false를 반환한다. 모든 변수나 프로퍼티를 삭제할 수는 없다. 즉 객체자체는 삭제할 수 없으나 객체의 프로퍼티는 삭제할 수 있다는 것이다.  몇몇 핵심 프로퍼티나 클라이언트측 프로퍼티는 삭제하려 해도 소용으며  사용자가 var문으로 정의한 변수들도 삭제할 수 없다. 존재하지 않은 프로퍼티에 대해 delete을 호출할 경우 true가 반환되며 심지어 ECMAScript표준에 따르면 피연산자가 프로퍼티, 배열 원소 또는 변수가 아닐 경우에도 true를 반환한다고 명시되어 있다. 

var o = {           //변수 정의 및 객체 초기화
    x:1,
    y:2
}
delete o.x;         //객체 프로퍼티중 하나를 삭제한다. true 반환
typeof o.x;         //존재하지 않은 프로퍼티. "undefined" 반환
delete o.x;         //존재하지 않는 프로퍼티를 삭제하려한다. true반환
delete o;           //선언된 변수는 삭제할 수 없다. false 반환
delete 1;           //정수도 삭제할 수 없다. true 반환
x = 1;              //var 키워드를 사용하지 않고 암묵적으로 변수를 선언
delete x;           //이와 같은 변수는 삭제할수 있다. true반환
x;                  //런타임 에러, x는 삭제되었으므로 정의되지 않았다.


삭제된 프로퍼티나 변수, 배열원소는 단순히 undefined값으로 설정된 것이 아니라는 것을 주의하라. 어떤 프로퍼티가 삭제되면 그 프로퍼티는 더이상 존재하지 않는다.
한가지 중요한 점은, delete이 영향을 미치는 것은 오직 프로퍼티 뿐이며 해당 프로퍼티가 참조했던 객체는 무관하다는 것이다.
var my = new Object();      //'my'라는 이름의 객체를 생성
my.hire = new Date();       //my.hire는 Date객체 참조
my.fire = my.hire;          //my.fire도 동일한 객체 참조
delete my.hire;             //hire속성 삭제 true반환
document.write(my.fire);    //하지만 my.fire는 여전히 Date객체를 참조

javascript에서의 delete는 개체(object), 개체의 속성(property), 배열의 특정 인덱스에 있는 원소(element)를 지우는 연산자이며. 문법은 다음과 같다
delete objectNamedelete objectName.property
delete objectName[index]delete property // with 문장 안에서만 유효
objectName은 개체 이름이고, property는 개체에 존재하는 속성이고, index는 배열의 원소 위치를 나타내는 정수. 네 번째 형식은 개체의 속성을 지우는 코드인데, with 문장 안에서만 사용할 수 있다. 
암시적으로 선언된 변수를 지울 때는 delete 연산자를 사용할 수 있지만 단 var 문장을 이용해서 선언된 변수는 지울 수 없다. 
delete 연산자 실행이 성공하면, 속성이나 원소가 undefined로 설정되며. delete 연산자는 실행이 가능하면 true를 반환하고, 불가능하면 false를 반환하게 된다. 
var x=42;
var y= 43;
var myobj=new Number();
myobj.h=4;      // h라는 속성을 만듭니다
delete x;       // returns true (암시적으로 선언된 변수는 지울 수 있습니다)
delete y;       // returns false (var로 선언한 변수는 지울 수 없습니다)
delete Math.PI; // returns false (미리 정의된 속성은 지울 수 없습니다)
delete myobj.h; // returns true (사용자 정의 속성은 지울 수 있습니다)
delete myobj;   // returns true (암시적으로 선언되었으므로 지울 수 있습니다)

당연하지만 배열의 원소를 지워도, 배열의 길이에는 변화가 없게 된다. 즉 delete로 지우는 경우 원소는 더이상 배열에 존재하지 않게 된다(undefined). 하지만 delete와 배열원소에 undefined를 할당한 경우 조금 의미가 다르다. 
먼저 아래 예제에서 trees[3]을 delete로 제거한 예제이다. 
trees=new Array("redwood","bay","cedar","oak","maple");
delete trees[3];
if (3 in trees) {   // 이 블록은 실행되지 않는다.
   alert(trees[3]);
}
즉 trees라는 배열에는 trees[3] 이라는 배열원소 자체가 삭제(undefined)되어 실행되지 않지만 단지 배열 원소가 존재하긴 하지만 정의되지 않은 값을 가지도록 하고 싶다면 delete 연산자 대신 undefined 키워드를 사용하면 된다. 
다음은 trees[3]에 undefined 값을 할당하는 경우이다 
trees=new Array("redwood","bay","cedar","oak","maple");
trees[3]=undefinedif (3 in trees) {   // 이 블록은 실행된다.
}
undefined 키워드로 배열의 값은 정의되지 않았지만 배열원소는 유지되므로 블록은 실행된다







- PHPSCHOOL에서 - 

delete는 해당 변수를 삭제하는 용도로 주로 쓰입니다. C언어에서는 클래스를 삭제하는 등등 뭐 여러가지로 잘도 쓰이죠. 하지만 JS에서는 그닥 delete문은 쓰잘데기 없습니다. 기본적인 사용예제입니다.
var a=document.getElementsByTagName('div');
 for(i=0;i
a를 통해 div 태그를 모조리 뽑아온 다음 모조리 배경색을 초록으로 바꾸고 그변수를 버립니다. 물론 그 이후 a를 출력시키면 undefined로 나오죠. 뭐.. 객체 자체를 삭제할 수는 있지만 객체 안의 멤버를 삭제할 수는 없습니다.
 
delete a.member; 
이래봐야 결과값은 각설이처럼 죽지도 않고 또출력되네~ 입니다. 하지만 a의 동적 멤버, 즉, 프로토타입은 delete문으로 지울 수 있습니다. 
delete Integer.prototype.toUnsigned; 
물론 객체 자체를 삭제해야 하기 때문에 괄호를 붙이면 안되겠죠. 그렇다고 객체 자체가 삭제되지는 않으니 안심하세요. 어쨌든 이렇게 되면 잠시동안 프로토타입을 선언한 후 쓰다가 지울 수 있는 괴기한 스크립트를 만들 수 있겠습니다. 
Object.prototype.extend=function(obj){
       for(var x in obj)
           this[x]=obj[x];
       return this;
 }

var ob={
    a:'가',
    b:'나',
    c:function(){
        return '다';
      },
    d:4
};

ob=ob.extend({e:5,f:'라마바',g:(function(ret){return ret;})('사아자차카타파하')}); 
delete Object.prototype.extend; 
prototype 멤버를 delete로 삭제할 수 있다는 걸 알려주는것 뿐입니다.




자바스크립트에서의 가비지컬렉션

300.slimes님 블로그글중 일부발췌

먼저 순환 참조에 대한 일반적인 이해에는 Garbage Collector에 대한 간단한 작동 방식을 이해해야 된다.다음 코드를 보자.
var Vervain = new Herb();
var Verbena = Vervain;  


Vervena 가 객체 Vervain을 참조하게 되면 scope 내에 Vervain에 대한 참조카운트가 1이 증가한다. 그리고 실행이 끝나고, scope 를 벗어날 때 해당 scope 내에 Verbena는 파괴되게 된다. 그렇게 되면 Vervain 객체에 대한 참조카운트는 다시 1이 감소한다. 그렇게 되면 GC에서는 Vervain의 참조카운트가 0이 되었으므로 더 이상 사용하지 않는 객체로 판단하고 메모리를 해제하게 된다.하지만 다음과 같은 경우는 어떨까?

var Vervain = new Herb();
var Verbena = new Herb();  
Vervain.see = Verbena;  
Verbena.see = Vervain;  

Vervain과 Verbena는 서로를 참조하고 있다. 이러한 경우를 순환참조라고 한다. 객체에 대한 참조를 따라가 보면 완전한 연결고리를 형성하게 된다. 
하지만 위와 같은 경우는 어떻게 메모리를 해제해야 될까? 
Vervain과 Verbena의 참조카운트는 모두 1이다. Vervain 를 해제하기 위해서는 Vervain에 대한 참조카운트가 0이 되어야 하는데, 이는 Verbena.see 가 Vervain을 참조하고 있다. 
역으로 Verbena에 대한 참조카운트도 0이 되어야 하나 Vervain.see 는 Verbena를 참조하고 있다. 
결국 이러한 순환참조는 메모리 누수현상을 가져오게 된다. (IE 7에선 이러한 문제가 해결되었다.) 이러한 메모리 누수현상을 방지하기 위해서는 위와 같은 순환 참조를 형성하지 않거나, Vervain.see = null 혹은 Verbena.see = null 을 할당함으로써 참조카운트를 0으로 만들어 GC에서 메모리를 해제하게끔 만들어야 한다.






extjs에서 delete 연산자 사용확인

extjs-base.js파일을 까보았다. 객체를 소멸시킬때 사용하는 destroy함수에도 쓰이고 있었다.
//IE일 경우 모든 이벤트 및 프로퍼티 삭제
if(Ext.isIE) {
    function fnCleanUp() {
        var p = Function.prototype;
        delete p.createSequence;
        delete p.defer;
        delete p.createDelegate;
        delete p.createCallback;
        delete p.createInterceptor;
        window.detachEvent("onunload", fnCleanUp);
    }
    window.attachEvent("onunload", fnCleanUp);
}//객체 destory 처리
destroy : function(){
    Ext.each(arguments, function(arg){
        if(arg){
            if(Ext.isArray(arg)){
                this.destroy.apply(this, arg);
            }else if(Ext.isFunction(arg.destroy)){
                arg.destroy();
            }else if(arg.dom){
                arg.remove();
            }
         }
    }, this);
},
destroyMembers : function(o, arg1, arg2, etc){
    for(var i = 1, a = arguments, len = a.length; i < len; i++) {
        Ext.destroy(o[a[i]]);
        delete o[a[i]];
    }
},
remove : function(o){
    var index = this.indexOf(o);
    if(index != -1){
        this.splice(index, 1);
    }
    return this;
}











'Scripter > JAVASCRIPT' 카테고리의 다른 글

offsetParent의 모든것!  (0) 2010.02.04
Javascript로된 Wiki Parser : Creole 1.0  (0) 2009.01.12
자바스크립트 가이드  (0) 2008.12.03
JsonML 활용하기  (0) 2008.11.12
CSS & JAVASCRIPT 최적화 도구  (0) 2008.10.26
Post by 넥스트리소프트 데꾸벅(techbug)
, |


요즘 부쩍 CSS에 관련된 글들을 많이 포스팅하고 있는데 데꾸벅이 가장 많이 사용하며, 실수도 하고 혹은 후배들에게 알려주고 싶은 부분이기 때문이다.  중간중간 CSS-TRICK의 글을 인용했음을 미리 알린다.


CSS Zengarden 사이트에 들어가서 스타일시트를 없앤후 보면 아래 그림과 같이 텍스트로만 나오는것을 볼 수 있을 것이다. 단순 텍스트가 어떻게 이미지로 대체되는지 그 방법에 대해서 알아보고 대부분의 CSS 관련 책이나 가이드에 제시해 주던 text-indent를 이용한 이미지 대체 문제를 좀더 심도있게 다루어 보고자 한다.


CSS기능을 끈상태의 CSSZengarden
마크업의 모든 제목이 <h>태그를 이용하여 구조적으로 만들어져 있다.


CSS기능을 사용한 CSSZengarden 




<h>태그의 텍스트를 이미지를 사용하여 좀더 비주얼하게 표현하였다.







1. 많이 쓰는 고전적인 방법 

HTML:
<h1 class="main-logo">Techbug</h1>

CSS:
h1.main-logo {
width: 350px; height: 75px;
background: url(images/header-image.jpg);
text-indent: -9999px;
}

이와 같이 사용하였을때 CSS기능을 끈다면 원래 텍스트파일인 Techbug가 나온다. 물론 이 방법이 나쁘지는 않지만 대부분의 사용자들은 CSS기능을 끄더라고 이미지를 보고 싶어한다는  문제점이 있다.
그래서 아래와 같은 새로운 방법에 대해서 생각해 본다.

2. 새로운 방법

HTML:
<h1 class="main-logo">
    <a href="#"><img src="images/header-image.jpg" alt="Techbug" /></a>
</h1>

CSS:
h1.main-logo {
width: 350px; height: 75px;
background: url(images/header-image.jpg);
text-indent: -9999px;
}

CSS는 위와 같은 방법으로 코딩되어 있으나 마크업자체는 변경되었다. 이와같은 방법으로 처리했을 경우 CSS기능을 끄더라도 이미지는 출력되며, 이미지 출력기능을 끄더라도 이미지의 대체텍스트인 "Techbug"를 그대로 사용자에게 보여줄수 있는 장점이 있다.
물론 위와 같이 <h1>태글를 사용하여 검색엔진에 의해 접근이 가능하게 하고 싶으나 대부분 개발자들은 로고를 이미지로 만들고 싶어하므로 위와 같은 방법으로 두가지 조건을 모두 만족 시킬수 있다.


위의 두 사이트를 참고로 CSS 기능을 껐을때와 Image기능을 껐을때의 기능을 중심으로 9가지 방법들을 소개하고자 한다. [테스트 페이지]  몇가지 방법은 오래된 방법임을 밝히며 FF2, Opera9, Safari3, IE6에서 테스트 하였다.



Technique #1

<h1 id="technique-one">
	<span>CSS-Tricks</span>
</h1>
h1#technique-one {
	width: 250px;
	height: 25px;
	background-image: url(logo.gif);
}
h3#technique-one span {
	display: none;
}


참조:
이기술은 FIR(Fahrmer Image Replacement)를 참조하였으며 텍스트를 둘러싼 <Span>태그를 숨기고 부모객체인 <H1>태그에 백그라운드 이미지를 대체하였다. 이 방법은 텍스트를 이미지로 잘 대체하였으나 검색로봇에는 별로 좋지 않은 방법이다.



Technique #2

<h1 class="technique-two">
	CSS-Tricks
</h1>
h1.technique-two {
	width: 2350px; height: 75px;
	background: url("images/header-image.jpg") top right;
	margin: 0 0 0 -2000px;
}


참조:
Radu Darvas가 사용한 방법으로 복잡한 레이아웃에는 문제를 보이는 경우가 발생할수 있으며 다른 기술들 보다 그렇게  효과적이지는 않다.

 


Technique #3

<h1 class="technique-three">
	CSS-Tricks
</h1>
h1.technique-three {
	width: 350px; height: 75px;
	background: url("images/header-image.jpg");
	text-indent: -9999px;
}


참조:
Mike Rundle의 방법으로 요즘 가장 많이 사용되는 방법이기도 하다.  가장 간단한 방법이기도 하며 들여쓰기에 음수값을 집어넣어 텍스트를 왼쪽으로 밀어버린 방법이나 가끔 몇몇 브라우저에서는 원치않는 스크롤바가 생기기도 한다.



Technique #4

<h1 class="technique-four">
	<a href="#">
		<img src="images/header-image.jpg" alt="CSS-Tricks" />
	</a>
</h1>
h1.technique-four {
	width: 350px; height: 75px;
	background: url("images/header-image.jpg");
	text-indent: -9999px;
}


참조:
처음 이 방법을 제안한 사람은 알수 없으나 Phark이 사용했던 방법의 한가지이다. 또한 데꾸벅이 자주가는 Smashing Margazine의 헤더파일에 적용된 것이기도 하다. 텍스트노드 속성을 가진 <a>태그를 이용한 방법으로 위 3번째 방법과 동일하게 사용하였다. CSS기능을 끄고 Image기능을 켰을때 이미지가 보이기는 하나 문제는 웹호환성(Section508 :장애우를 위한 웹접근성 지침) 에 위배되는 경우가 생긴다. ALT의 텍스트가 일반적인 웹텍스트이긴 하나 검색엔진에는 효과적이지 못하다. 


 

Technique #5

<h1 class="technique-five">
	<img src="images/blank.gif" alt="CSS-Tricks" />
	<span>CSS-Tricks</span>
</h1>
h1.technique-five {
	width: 350px; height: 75px;
	background: url("images/header-image.jpg");
}
h1.technique-five span {
	display: none;
}


참조:
Radu Darvas가 사용했던 방법으로 1x1픽셀짜리 투명이미지를 마크업에 사용하였다. 이미지를 껐을때도 ALT속성으로 대체 텍스트를 제공할수 있다. 매우 효과적인 방법으기는 하나 CSS와 Image 모두 껐을 경우 텍스트가 두개 나타나는 효과가 발생한다.

 



Technique #6

<h1 class="technique-six">
	CSS-Tricks
</h1>
h1.technique-six {
	width: 350px;
	padding: 75px 0 0 0;
	height: 0;
	background: url("images/header-image.jpg") no-repeat;
	overflow: hidden;
}

참조:
Seamus Leahy와 Stuart Langridge가 사용했던 방법으로 padding값을 이용하여 높이를 지정하였으며 overflow속성을 이용해 스크롤링 버그를 해결하였다.  웹접근성관련하여 효과적인 방법이나 overflow:hidden으로 인해서 이미지가 커질경우 숨겨지는 버그가 있으며 옛날버전의 IE에서는 box Model Hack을 써야 하는 경우가 생긴다.

 


Technique #7

<h1 class="technique-seven">
	<span>CSS-Tricks</span>
</h1>
h1.technique-seven {
	width: 350px; height: 75px;
	background: url("images/header-image.jpg") no-repeat;
}
h1.technique-seven span {
       display: block;
	width: 0;
      height: 0;
      overflow: hidden;
}


참조:
Leon Dwyer가 사용했던 방법으로 이 기술은 overflow:hidden으로 width:0, height:0인 블럭-레벨 요소를 집어넣었다. 텍스트를 숨겨서 로고까지 읽던 스크린리더 사용자에게는 좋은 방법이다. (데꾸벅 주: 기본적으로 웹표준 유효성 체크를 통과하기 위해 항상 대체텍스트를 써야하는 이유로 기존 스크린 리더들은 쓰잘데기 없는 것 까지 읽어서 오히려 방해가 되는 경우가 있다.) 

 

Technique #8

<h1 class="technique-eight">
	<span></span>CSS-Tricks
</h1>
h1.technique-eight {
	width: 350px; height: 75px;
	position: relative;
}
h1.technique-eight span {
	background: url("images/header-image.jpg");
	position: absolute;
	width: 100%;
	height: 100%;
}


참조:
Levin Alexander가 사용한 방법으로 텍스트를 밀어넣는 대신 텍스트를 절대값위치로 항상 위쪽에 표시해야 하며 이미지를 투명한 이미지를 사용했을 경우 문제가 발생할 수 있다.



Technique #9

<h1 class="technique-nine">
	CSS-Tricks
</h1>
h1.technique-nine {
	width: 350px; height: 75px;
	background: url("images/header-image.jpg") no-repeat;
	font-size: 1px;
	color: white;
}


참조:
Russ Weakley가 사용했던 방법으로 다른 방법과 달리 텍스트를 숨기는것이 아니라 아예 1pix로 작게 만들어서 사용한다. 단점으로는 글자색과 배경색이 다르면 아주 작게라도 나타난다는 문제점이 있다.



사족

위 방법들이 정답이라는 뜻이 아니라 이 보다 더 좋은 방법도 있으리라 본다. 사실 국내의 웹표준을 지킨 다수의 웹사이트에서는 이보다 더 좋은 방법을 사용하고 있으리라 생각한다. 데꾸벅이 사용하는 방법들도 몇가지 있지만 같은 표현을 위해 얼마나 많은 방법들이 존재하는지 알 수 있었다.  


Post by 넥스트리소프트 데꾸벅(techbug)
, |



국내환경에서 Ajax Library/Framework에서만 제공하는 기본 컴포넌트/위젯으로는 어려운 경우가 많은데 오늘 우연찮게 블로그 유입경로를 보다가 유난히 틀고정 그리드를 찾는 분들이 많아 포스팅한다.
Ext js 의 포럼글에서 우연찮게 찾아 북마킹해 놓은 것이 있어 공개한다. 아래 소스를 조금 수정하여 열고정, 행고정이 되는 그리드 컴포넌트를 만들어 보는것도 좋을듯....






Markup
<html xmlns="http: //www.w3.org/1999/xhtml" xml: lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="../lib/ext-3.0.3/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="columnLock.css" />
<script type="text/javascript" src="../lib/ext-3.0.3/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../lib/ext-3.0.3/ext-all.js"></script>
<script type="text/javascript" src="columnLock.js"></script>


컬럼모델 config 파일은 다음과 같이 작성한다.
columns: [
    {id:'company',header: "Company", width: 120, sortable: true, dataIndex: 'company', locked: true},
    {header: "Price", width: 150, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
    {header: "Change", width: 150, sortable: true, renderer: change, dataIndex: 'change'},
    {header: "% Change", width: 150, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
    {header: "Last Updated", width: 150, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],



Ext js 3.0x 이상

Ext js 2.1~ 2.2 버전

























'Scripter > EXTJS' 카테고리의 다른 글

Ext.Updater 깜빡거림 방지  (0) 2009.05.06
Extjs Core 3.0 Beta 릴리즈  (4) 2009.04.07
Examples Of ExtJS in Action  (2) 2009.03.31
extjs RowAction 붙이기  (1) 2009.03.31
extjs 2.2의 IE에서 iframe document load 버그패치  (0) 2009.01.21
Post by 넥스트리소프트 데꾸벅(techbug)
, |




미래를 예측한다는 것은 상당히 힘든일이다.
이 분야 일을 시작한지 어언 십수년이 지나가지만 자신만의 스타일을 고수하기 보다는 매년 트렌드를 따라 작업하다 보니 이런 것을 챙기지 않으면 트렌드를 따라가지 못한다는 강박관념(?)이 생겨버렸다.  트렌드를 쫓다보면 트렌드를 따라가지 못한다는 느낌이 많이 든다. 
각설하고.... 일년전 이맘때 2009년 유행할 웹디자인 트렌드를 포스팅한 적이 있었다. 물론 웹디자인 카테고리에서 가장 많은 트래픽을 가져온 포스팅이기도 했다.
이미 2010년 웹디자인 트렌드에 대해   카페글에 포스팅되어 있는 내용들을 사부작 꼬불쳐 본다.

아래 내용은 2010년 웹디자인 트렌드라는 제목으로 14가지 항목으로 정리되어 있다.

번역본에 데꾸벅만의 생각들을 살포시 얹어보았다 


대부분 2009년 웹디자인 트렌드에서 이미 언급되었거나 국내 환경에서는 유행이 지난 내용들이 많으며 오히려 2008년 트렌드와도 흡사하다. 이제는 해외 사이트트렌드와 국내웹사이트들의 트렌드가 이제는 조금씩 바라보는 뷰가 틀려지기 시작하는 듯 싶다. 

2009년의 트렌드와 비교하자면 조금 객관적이지 못해 작성자만의 지극히 주관적인 생각이며 잘못 설정된 표본집단 조사, 즉 넓은 시각이 아닌 좁은 시각에서 웹디자인 트렌드를 바라본 것 같다. 




데꾸벅이 가장 좋아하는 스티브잡스형님이 이런 얘길 한적이 있다. 


"Design is not just what it looks like and feels like.  

  Design is how it works"


단지 데꾸벅's 생각일뿐~ 오해하지 말자







오래되고 닳은 웹 디자인은 정리를 할 시간이고, 내일을 위한 과감하고 새로운 얼굴들을 맞이할 시간이다.  물론 트렌드라는 것이 1월 1일에 시작이 되고 끝나는것은 아니지만, 새해에는 새로운것을 갈망을 하고, 연말에는 지난간 한해에 교본(tutorial)을 찾게되는 욕구에는 분명 뚜려한 움직임이 있다.  대부분의 경우, 이러한 변화는 미묘하다.  이러한 변화는 현재 트렌드를 완벽하게 만들거나 새롭게 해석을 하는 것이다.  트랜드들은 우리가 디자이너로서 진화를 하는데 도움을 준다.  미적 디자인 스킬을 습득하게 됨에 따라, 우리는 다음에 무엇이 있는지, 우리가 원하는 것이 무엇인지를 추구하게 된다.

 

이러한 트랜드 뒤에 있는 아이디어들은 당신이 이미 알고 있는 것들도 있음에 오해를 하지 말기바란다.  아래의 트렌드들이 2009년에 인기가 있었던 것들로부터 굉장한 차이가 있는 것은 아니지만, 앞으로 펼쳐지는 트렌드들이 전개가 되고 또한 좋은 결과들로 남게 될 것이다.  당신들이 이러한 트렌드들을 당신의 디자인에 어떻게 이용을 할 것인가를 고민을 할때, 각 트렌드의 주요 아이디어가 무엇인가에 초점을 맞추기를 바란다.




 

1. 대형로고와 헤더

데꾸벅 : 최근 3년동안의 트렌드와 같은 내용이다.  대형 타이포를 이용하여 사용자시선을 유도한다. 다만 디자인적인 면이 다분이 많으며 사용성에는 그다지 중점을 두지 않은 듯 보인다.

사이트의 스플래쉬 페이지는 너무도 낡은 기법이다.  방문자들에게 잊혀지지 않는 느낌을 주기 위한 2010년의 트랜드는 특대형의 로고와 그와 걸맞는 특대형의 헤더이다.  이러한 류의 헤더는 전체 스크린을 차지하되, 하나의 중용한 메세지를 가지고 있다.  방문자는 아무것도 클릭을 할 필요가 없고, 그냥 스크롤 다운을 하면 된다.  방문자들은 (과거의 나쁜 네비게이션 경험으로 생긴) 종종 마우스클릭에 대한 공포를 가지고 있다. 그래서, 대형 헤더는 당신 사이트의 방문자들 이 무엇인가를 클릭하도록 강요하지 않으면서, 스플래쉬 페이지의 역할을 수행한다.

 

주요 아이디어: 커다란 헤더는 방문자들이 당신을 기억하게 만든다. 

http://ma.tt/

 

 


2. 스케치/손그림

데꾸벅 : 이미 국내에서는 몇년전 부터 웹디자인 템플릿 사이트에 유행이 지난 것으로 주요 프로모션 성격의 사이트에서 많이 사용되고 있다. 

손으로 그린 디자인은 새로운 것은 아니다. 하지만, 웹 디자인에서는 아직은 가장자리를 차지하고 있음을 알고 있다.  많은 디자이너들이 이러한 스타일에 감탄을 하면서도, "나는 잘 그리지 못해"라는 투의 태도때문에 이 스타일을 사용하기를 두려워하고 있다.  이러한 스타일의 디자인들은 미술박물관에 걸만한것은 아니라고 해도, 일탈의 감성적인 면을 전달을 할 수 있고, 차거운 웹 사이트와 친근한 인터랙션의 경계를 흐리게 할 수 있다 - 그게 인터넷의 궁극적 목적이 아니겠는가?  만약 그림을 끄적거릴 수 있다면, 당신은 이미 웹 디자인을 스케치 할 수 있다.

 

2010년에는 스케치는 웹 디자인상의 요소로 자리를 할 것이고, 웹 디자인의 주 초점이 되지는 않을 것이다.  또한 스케치는 표준적인 웹을 새롭고 흥미있는 것으로 개인화 시키는 데 사용이 될 것이다.

 

주요 아이디어: 스케치는 기업 웹 사이트 디자인의 "요소"가 될 것이다.

 
http://www.biola.edu/undergrad/

 

 


 


3. 굵고 두꺼운(Slab) 글꼴


데꾸벅 : 최근3년 트렌드에서도 언급되었던 내용이다.  전통적인 인쇄매체에서 많이 사용되던 Press Letter형태를 웹형태로 옮겨온 것으로 영문폰트를 이용하여  적용한 예가 많다. 한글폰트에서도 두꺼운 글꼴은 글쎄다~. 

 폭이 넓은 글자체는 지난 200년 동안 전통적인 미디어에서는 사용이 되어왔지만, 웹 디자인에서는 비교적 새로운 것이다.  폭넓은 글자체의 좋은 "감"을 얻으려면, 옛날 옛날 서부 개척시대의 "현상금" 포스터를 생각을 하면 될 것이다.  이때 사용이 된 굵은 글자체들이 "Slab" 타이프이다.  폭이 넓은 글자체들은 보통 모두 대문자에, 볼드로 처리가 되어있고, 그리고 눈을 끌어당기는 당당하게 보인다.  많은 디자이너들이 과거에는 슬랩 타이프를 멀리 해왔는데, 슬랩 타이프가 사용이 되면 로고나 헤더들이 저평가 되게 보일 수 있기 때문이다.  하지만, 대형 헤더라는 트렌드와 같이 사용이 되면, 슬랩 타이프를 사용할 때 독자들의 시선을 끌수가 있다.

 

주요 아이디어: 슬랩 타이프는 당신 누구인지 과감하게 표현하기 위해 사용이 된다.

 


http://www.edgepointchurch.com/

 

 


4. 타이포

데꾸벅 : 타이포그라피와 관련된 내용은 당근 이전부터 쭈욱~ 언급되었던 내용이다. 굳이 무엇을 더 언급할것인가 

타이포그라피는 적용하기에 가장 어려운 트렌드 중에 하나이기때문에, 2010년에도 싱싱하게 존재를 할 것이다.  사용성관련된 모든 걱정들 때문에, 웹 디자이너들은 새롭고 색다른 폰트를 사용하기를 꺼려한다.  다른 폰트사이즈들을 섞는 다는 생각은 절대로 할 수도 없는 것이 였다. 하지만, 폰트들은 탐구의 대상이고, 비틀고, 우리의 목적에 적합하도록 사용이 되어야 한다.  정확한 위치선정을 한다면, 타이포그라피를 주요 디자인 요로 사용을 하는 웹 사이트들은 수많은 사진들로 부담이 되는 사이트들 보다는 독자들에게 더 흥미로와 보일 것이다.

 

주요 아이디어: 타이포그라피의 사용은 아직 충분한 성장을 하지 못했지만, 웹 디자인의 한 부분으로 남아있을 것이다.

 

 

 

 

 


5. 한 페이지 레이아웃

데꾸벅 : 이미 Interaction한 Rich UI Layout ( Web Application 혹은 Ajax Application) 이 자리잡은 요즘에 비하면 2010년 트렌드라 말하기에는 조금 오래된 내용이다. 

한 페이지 레이아웃은 필요하지 않는 부분을 제거를 하게끔 하는 과제를 준다.  2010년에는 이 스타일이 특이한 네비게이션을 버리고 미니멀리즘 접근방식을 택할 것이다.  이러한 웹 사이트들을 비즈니스 카드라고 생각을 하라.  이러한 웹 사이트들은 당신과 다양한 사이트들에 퍼져있는 당신의 작업물들을 어떻게 찾을까를 알려주는 one-stop-shop이 될 것이다.

 

주요 아이디어: 한 페이지 레이아웃은 기업 사이트가 보다는 개인 프로파일에 더 적합하다.


 http://www.zachklein.com/

 

 


6. 큰이미지

데꾸벅 : 큰 이미지뿐만 아니라 이제는 화면전체를 이미지로 깔고 덮고 플래쉬로 도배를 하기도 한다. 

대형 로고/헤더와 가까운 친척인 대형 이미지는 거의 같은 기능을 제공한다.  대형 이미지들은 방문자들이 쉽게 잊지 못할 효과를 준다.  위에서 이야기를 한 대형 헤더와는 달리, 대형 이미지는 사이트의 브랜딩과 관련이 있는 것은 아니다.  대신에, 이러한 이미지들은 방문자들을 사이트의 컨텐츠가 아니라면 이미지를 이용해서라도 방문자들을 사이트로 끌어들인다. 2010년에는, 웹 디자이너들은 사이트의 느낌을 전달하기 위해서, 대형 이미지를 사용하는 것을 더욱 편안하게 느낄것이다. 

 

주요 아이디어: 대형 이미지들은 방문자들을 초대하기 위해서 사용이 된다.

 

http://digitalmash.com/ 

 





7. 시각의 변화

데꾸벅: 좀 더 비주얼한 면을 강조하기 위해 2D에서 3D형태 뷰포인트의 전환등 이러한 시도는 항상 있어왔다. Flex/Flash, 혹은 Silverlight,  SVG, VML 등 이미 수없이 많은 디자인 사이트에서 봐왔던 내용이다. 

이미 위에서 이야기를 한것과 같이, 데스크 탑 형태의 디자인은 지겹도록 사용이 되어왔다. 2010년에는  좀더 현실감있는 시각으로 변화가 될 것이다. 공간에서 옆을 보는 것과 같은 시각으로 이동도 있을 수 있다.

 

주요 아이디어: 2010년 여러가지 다른 시각/시점이 시도가 될 것이다.

 

http://downsign.deviantart.com/art/Book-Store-136542851


http://kpucu.deviantart.com/art/Pastorant-Restaurant-71565329

 

 

 

 


 

8.인터렉티브/직관적 디자인

데꾸벅 : 웹디자인이나 UI/UX에 대한 입문서에 나올만한 내용이다. 인터렉티브하고 직관적인것인 이미 디폴트인 시대에 살고 있다.

Flash는 지금보다는 더 인기가 있었던 적이 있었다.  한때는 짜증스러운 Flash 인터페이스가 없는 사이트들을 피할 수 없었던 적도 있었다.  최근에는, Flash는 좀더 편안하고 좀더 전문스러워 졌다.  어떤 디자이너들은 폼이나 팝업을 위해서 jQuery를 더 선호할 수도 있지만, Flash는 적당하게 사용이 되었을때면 아직도 웹 디자인의 중요한 부분이다.  Flash은 인터랙티브한 면에서는 아직도 적수가 없다.  2010년에는 웹 디자인너들은 Flash를 좀더 보완할 수 있는 요소들로 이동을 할 것이다.  최근의 방문자들은 웹에 대해서 대부분 잘 알고 있기 때문에, 디자이너들은 과거의 사이트들 보다는 좀더 직관적인 사이트를 제작을 할 것이다.

 

주요 아이디어: 인터랙티브 디자인이 컴백을 할 것이다.

 

 http://www.crowleywebb.com/

 


 

9. 모달창

데꾸벅 : 최근 3년동안의 웹트렌드에서도 언급되었던 내용이며 2010년에도 계속 유행될듯 싶다. 워낙 막강한 javascript library나 Framework들과 RICH Tool들이 많다 보니 이제는 구현하기도 쉬워졌다.

모달 윈도우는 2010년에는 말 그대로 사방에서 볼 수 있는 트랜드가 될 것이다.  모달 윈도우는 팝업하고는 달리 부드럽고, 모양도 좋고 더 인기가 많다. 모달 윈도우는 디자인과 사용이 너무 쉽게 때문에, 사용성을 염두에 두는 디자이너들에게는 최적의 해법이 될 것이다.

 

주요 아이디어: 모달윈도우는 2010년에도 지속적으로 사용이 될 것이다.

 

 http://digg.com/

 


 


10. 미니멀리즘


데꾸벅 : 모노톤이나 명조대비만으로 여백의 미를 강조하는 동양적인 디자인 컨셉에서 부터 시작된다. 과거 해외사이트를 살펴보면 대부분 여백에 텍스쳐나 바탕이미지를 사용하였으나 이제는 "오리엔탈 이즈 베스트 ~~~"

과거의 미니멀리즘 웹 사이트는 잊어도 좋다.  2010년의 웹 사이들은 많은 여백을 사용을 하되, 과감한 타이포그라피와 놀라운 컬러 스킴을 이용을 할 것이다.  모든 미니멀 웹 사이트들이 명확한 간결성 개념과 일치 하지는 않을 것이다. 미니멀리즘은 그 본연이 강도가 떨어지기는 하지만, 새로운 색상들이 채용이 될 것이다.  미니멀리즘은 차가운 것이 아니고, 따듯하고 핵심을 찌르는 것이다.

 

주요 아이디어: 미니멀리즘은 타이포그라피로 모험을 시도할 것이다.

 

 http://www.kylestanding.com/

 





11. 대형푸터

데꾸벅 : 일전에 데꾸벅의 블로그에서도 한번 포스팅 되었던 내용이기도 하다. 메인기능이 아니라 부가기능이나 정보, 혹은 메타성 데이타를 한곳에 몰아둔다는 느낌이 없지 않아 있다. 국내의 현실은 대부분 숨겼다/보여주는 형태로 많이 구현되고 있다.

대형 푸터는 이미 여기저기에서 볼 수가 있지만, 2010년에는 좀더 과장되게 사용이 될 것이다. 앞으로의 푸터는 미약한 존재가 아닌 디자인의 중요한 부분이 될 것이다.  앞으로는 다양한 소셜미디어 사이트의 부터의 피드, 투표기능, 트위터 피드와 같은 무작위적인 정보를 포함을 하고 있는 푸터도 보게 될 것이다.

 

주요 아이디어: 대형 푸터는 중요도는 떨어지지만, 좀더 퍼스널한 정보를 제공을 할 것이다.

http://www.duirwaigh.com/


 

 http://oldloft.com/

 

 

 

12. 복고

복고풍의 디자인은 당분간 남아있을 것이다.  많은 수의 디자이너들이 복고풍의 디자인에 감탄을 하기는 하지만, "마무리"를 제대로 짓지 않는 느낌을 제대로 소화하는 것은 쉽지 않다.  복고풍 디자인의 디자인의 톤과 저변에 깔린 재미요소를 통한 영감을 받아야 한다.  2010년의 레트로 디자인은 구식예술을 존중하는 새로운 방법을 찾아갈 것이다.

 

주요 아이디어: 복고는 "새롭다"

 

 http://www.level2d.com/

 






 

13.  인트로 상자

데꾸벅 : 2009년 웹디자인트렌트 맨 마지막 아이템으로 소개되었던 내용이다. 2010년에도 계속 쭈욱~ 될 듯 싶다.

2010년 디자이너들은 "안녕, 내이름.. " 하는 식의 자신을 방문자에게 소개하는 아름답기까지한 간결함을 알게될 것이다.  만일 당신이 창의적인 "About" 페이지 구성에 고민을 하고 있다면, 인트로 박스가 아마 최적의 답이 될 것이다.  인트로 박스는 당신이 누구인지를 제한된 면적을 통해 알려야 하기 때문에, 정보를 농축시키도록 강요할 것이다.  2010년의 인트로 박스는 그 사용영역을 단순 소개를 넘어서게 될 것이다.  지루한 "Hello"가 아닌 좀더 새로운 "인사법"을 디자이너들은 찾게 될 것이다.  그리고, 왼쪽에 치우쳐서 놓이는 인트로 박스가 아닌, 특이한 자리에 놓이는 - 예를 들면 페이지의 중간 같은 - 인트로 박스를 보게 될 것이다.

 

주요 아이디어: "Hello"를 하는 새로운 방법들

 

http://www.alessandro-cavallo.de/ 

 




14. 잡지형식의 레이아웃

데꾸벅 : 2009년 웹디자인트렌트 맨 처음 아이템으로 이미 소개되었던 내용이고 웹도 인쇄매체와 마찬가지로 2D라는 측면에서 접근하는 경향이 많다.  대부분의 레이아웃 설계나 정보설계(IA)시 인쇄매체의 레이아웃을 많이 참조하는 경향이 있다. 

사람들이 점점 더 전통적 인쇄물의 편안함에서 온라인으로 이동을 함에 따라, 디자이너들은 그들의 이동을 부드럽게 하는, 새로운 "환영 방법"을 찾고 있다.  한장의 홈페이지에 잘 정돈이 된 정보들을 가진, 잡지포맷의 디자인을 제공하여, 방문자들이 원하는 정보를 찾아보도록 하는, 이동이 생기고 있다.  잡지나 신문을 읽어본 사람이라면, 제공이 되는 익숙한 디자인에 호감을 갖을 것이고, 사용에 편안함을 느낄 것이다.  2010년에는 잡지포맷은 블로그에서 특히 인기가 있을 것이다.

 

주요 아이디어: 잡지 형태가 인포테인먼트 사이트에서 사용이 될 것이다.

 

 http://www.bmivoyager.com/

 

 

 

Post by 넥스트리소프트 데꾸벅(techbug)
, |



웹표준으로 개발하다보면 가장 큰 문제가 HTML을 구조적으로 표현하지 못하는데 있다.
표준코딩이라하여 CSS,HTML,Javascript를 모두 분리하고 레이아웃을 table태그를 사용하지 않으면 된다고만 생각하는데서 이러한 구조적인 문제가 발생한다.
예전 전통적인 방식(table을 이용하여 레이아웃을 잡던 시절)과 마찬가지로 이제는 DIV를 난발하여 화면을 만들고 가장 기본적인 문단 나누기 또한 빈 DIV태그를 이용하여 사용하고 있는 데꾸벅 포함 여러 웹퍼블리셔들에게는 가장 난감한 부분이 float속성이 될것이다. 
사실 아래 본문에도 나오겠지만 대부분의 웹퍼블리셔(여기서는 코더 혹은 에디터를 말한다.)는 가장 레이아웃을 잘 잡기 위한 방법으로 position 속성을 많이 사용한다.  absolute, relative, top, right, bottom,left 만 있으면 모든 레이아웃을 잡을수 있다. 그러나 이러한 방식의 CSS는 나중에  유지보수하기가 더 힘들어 진다. (데꾸벅의 경험상... )
국내사이트와 해외사이트의  HTML구조만 비교하더라고 국내 웹퍼블리셔들이 무엇을 잘못하고 있는지 확연히 들어나는 현실이다.
디자인적인 측면과 기능적인 측면, 유지보수성이 모두 다 충족하는 퍼블리싱이 되길 바라면서 이글을 번역, 포스팅한다. 






"Float" 은
CSS 위치관련 속성이다. 목적과 기원을 이해하기 위해서는 인쇄디자인을 살펴보면 된다.  인쇄레이아웃에서 이미지는 아래 그림과 같이 텍스트에 둘러 쌓이게 되며 이것을  일반적으로 text wrap" 이라고 말한다.



이러한 텍스트랩(Text lab)은 아래 그림과 같이 박스와 같은 영역으로 페이지레이아웃의 텍스트 흐름(flow)속에 있거나 혹은 별도로 위치하게 된다.  웹디자인도 이와 유사하다.

 

웹디자인에서 CSS float 속성은 인쇄레이아웃에서 이미지와 같이 해당 이미지 근처의 텍스트 흐름에 영향을 받게된다.  Float된 요소는 (floated elements) 웹페이지의 flow의 한 부분으로 남으며 이것은 고정된 위치값을 가진 요소들과 명백히 다르다.  위치가 고정된 페이지요소는 웹페이지내의 흐름속에서 제외되며 다른 요소에도 영향을 끼치지 못한다.

float속성은 다음과 같이 사용한다.

#sidebar {
   float: right;
}

float속성은 4개의 유효값을 가지고 있다  좌우방향을 표시하는 left와 right, 기본디폴트값인 none, 그리고 부모요소로 부터 상속(cascading)된 inherit속성이 그것이다.

Float속성은 어디에 사용되는가?


float속성값은 이미지를 둘러싸고 있는 텍스트에 사용되나 위 그림과 같이 전체 웹레이아웃을 생성하는데 사용되기도 한다.
또한 아래와 같이 전체레이아웃과 유사한 작은 구성 영역에도 사용된다.
아래의 예는 아바타 이미지와 해당 계정의 내용을 표시한것으로 float 속성을 사용한것이다.
아바타 이미지가 커지더라도 적절한 간격을 유지하며 포지셔닝된다.

그러나 위와 같이 같은 레이아웃이라도 상대적인 위치나 절대적위치값을 이용하여 사용한다면 아래 그림과 같이 이미지사이즈가 변할경우 레이아웃 자체가 깨질수 있다.
데꾸벅 주: 대부분의 경우 디자이너나 에디터의 경우 relative, absolute로 작업하는 경향이 많다. 이는 한국형 웹페이지(?)만의 특징이라고 볼수도 있겠지만 가장 화면레이아웃을 쉽고 빠르게 셋팅할수 있기 때문이다. 이러할 경우 웹표준으로 작업하더라도 그만큼의 효과를 얻지 못한다는 것이다.




흐름제거 (Clearing the Float)
float의 속성의 자매속성으로 clear가 있다.  HTML 요소는 float과 같이 흐름속성이 있다면 이와 같은 흐름을 제거하는 속성(clear)를 가지고 있다.

위그림에서 보는바와 같이   사이드바(sidebar)는 메인컨텐츠(Main content)영역보다 짧게 오른쪽으로 float이 되어있으며 footer영역이 main content영역만큼을 채우려고 올라와 있다. 이와같은 문제를 해결하려면 아래와 같이 footer에 clear 속성으로 흐름을 제어하면 된다.

#footer {
   clear: both;
}

 clear속성은 4가지 속성값을 가지고 있는데 보통 양쪽흐름을 끊는 "Both"속성을 많이 사용한다. 왼쪽과 오른쪽 흐름을 끊는 "left", "right" 와  기본값으로 "none", 부모객체의 속성값을 상속(cascading)받는 "inherit" 이 있다.


겹침문제

float속성을 사용해서 작업하다보면 곤혹스런경우를 많이 당하게 되는데 아래 그림과 같이 float속성을 가진 객체의 부모객체밖으로 삐져나오는 경우가 있다.


흐름을 끊는 기법(Techniques for clearing Floats)

clear기법을 사용하는 방법으로 아래와 같이 여러가지 방법이 사용되고 있으나 상황에 맞게 적절하게 사용하여야 한다.

  • 빈div 태그에 직접 clear속성 넣기 : <div style="clear:both;"></div>를 이용하는 것으로 <br />과 같은 효과를 준다. 그러나 구조적인 마크업의 흐름을 깨게 되는 경우가 생기므로 사용에 주의하여야 한다.

  • overflow 방법 : 부모객체에 overflow속성을 넣는 방법으로 float되는 객체의 부모객체의 넓이를 조정하여 흐름을 제어하는 방법이다. 그러나 이 방법은 원하지 않는 스크롤바를 생성할 수도 있다.
    (참조사이트 : wystan's tables)

  • 가장쉬운 clear 방법 : 가상선택자(pseduo selector ) :after를 이용하여 float을 clear할수 있다. float되는 객체의 부모객체에 다음과 같이 clearfix 클래스를 줌으로써 간단하게 해결할 수 있으며 오래된 브라우저도 수용할 수 있다.
    (참조사이트:positioniseverything)
  • .clearfix:after {
       content: ".";
       visibility: hidden;
       display: block;
       height: 0;
       clear: both;
    }


    •  위 그림과 같이 서로 다른 float 속성이 먹은 객체들이 나열되어 있을때 그룹화하여 흐름을 제어하고 싶다면 아래 그림과 같이 그룹화된 부모객체에 위의 방법을 쓸 수 있다.



Float속성의 문제점
Float속성을 쓰면 화면이 깨지기 쉽다. IE6은 float과 관련된 버그를 가지고 있다. 점점더 많은 디자이너들이 IE6지원을 줄여가고 있는 시점이나 그렇다고 포기할만한 시점도 아니다.
  • 밀려내려감(Pushdown) : 아래 그림과 같이 밀려내려가는 증상은 float된 객체가 영역보다 클때 일어난다. 이럴 경우는 overflow:hidden을 사용하여 처리할수 있다.

  • 더블마진버그(Double Margin Bug) : IE6에서 inline-level element가 같은 방향으로 float된 경우 일어난다. 이럴경우는 해당 요소를 display:inline을 써서 inline-level요소로 만들어 주면된다.
    (참조사이트 : positioniseverything.net,  신현석씨 블로그)

  • 3픽셀 밀림 버그(3px Jog) :
    E 6에서 CSS 먹일때 Float + Margin or Padding 값을 동시에 먹이면. Margin,Padding 값이 두배가 되는
    버그가 있는데 
    이상하게도 float된 요소의 다음에 오는 텍스트에 오는 버그로 이럴경우 text의 width와 height값을 주면 해결된다.
    (참조사이트 :  강짱's blog)

  • IE7의 Bottom Margin 버그 : float된 부모객체 안의 자식객체에 나타나는 버그로 부모객체에 의해 자식객체의 bottom-margin을 무시하게 되는 버그로써 부모객체에 bottom padding을 줘서 해결해야 한다. 
    (참조사이트 : maratz.com)
  

그외 참조

원본출처 : CSS-TRICK





'Publisher > CSS' 카테고리의 다른 글

CSS로 만든 3D입체 이미지  (6) 2009.12.31
CSS 이용한 Text를 이미지로 대체하기  (3) 2009.11.16
화면전체 배경이미지인 웹사이트 만들기  (0) 2009.11.04
CSS로 Table 디자인 하기  (15) 2009.04.28
CSS Hack in IE8  (9) 2009.04.27
Post by 넥스트리소프트 데꾸벅(techbug)
, |


얼마전 "화면 가득 BG이미지 사용 웹디자인" 에서 소개했던 전체 백그라운드 사용기법에 대해서 소개하고자 한다.

가끔씩 좀더 디자인적인 요소가 가미된 웹페이지를 만드려다 보면 페이지전체에 백그라운드 이미지가 들어가야 하는 경우가 있다. 기존에는 이미지 용량을 최적화하기 위해 전체 플래쉬를 사용한다든가, 이미지를 디더링하여 용량을 감소시키는 경우가 있었다.
"백그라운드 이미지 사이즈 변경하기"의 개념과 유사하게 백그라운드 자체를 CSS만으로, 혹은 자바스크립트를 이용하여 풀스크린으로 띄우는 방법을 소개한다.

최종소스


원본출처  : 
CSS-Tricks


 

본 기술과 이미지는 GOTOCHINACSS-TRICKS 에서 가져온것임을 밝히며 다음과 같은 기능들로 구성된다.

  • 여백없이 이미지로 전체페이지 채우기
  • 필요한만큼 이미지 크기 정하기
  • 이미지를 페이지중간에 정렬하기
  • 스크롤바 생기지 않게하기
  • 크로스브라우저 호환
  • 플래쉬같은 장난질 하지 않기(? ) : Isn't some fancy shenanigans like flash

이러한 기능요구사항은 매우 까다로운 주문사항이다. 무엇보다 이미지 사이즈를 변경하는 것은 전통적인 CSS background-image속성에 위배되기 때문이다.



Technique #1

인라인 이미지(Inline image)는 아래와 같이 페이지내에서 특정한 목적에 따라 어떠한 요소로 둘러싸여 있다.
( 데꾸벅 주 :
   이미지는 원래 속성은 block-level요소가 아니라 span태그와 같이 inline-level요소 이므로 크기를 고정시키기 위해 block-level요소 태그들에 의해 둘러쌓여있다.

마크업

<div id="bg">
    <div>
        <table cellspacing="0" cellpadding="0">
            <tr>
                <td>
                    <img src="images/bg.jpg" alt=""/>
                </td>

            </tr>
        </table>
    </div>
</div>

CSS :
 
* {
    margin: 0;
    padding: 0;
}
html, body, #bg, #bg table, #bg td {
    height:100%;     width:100%;     overflow:hidden;
}

#bg {

    position: fixed;
}

#bg div {

    height:200%;
    left:-50%;
    position:absolute;
    top:-50%;
    width:200%;
}

#bg td {

    text-align:center;
    vertical-align:middle;
}

#bg img {

    margin:0 auto;
    min-height:50%; //safari4.0과 chrome에서는 min-height가 잡히지 않음
    min-width:50%;
}

 
위 소스는 마크업과 CSS를 적게 사용하여 개발하나 아주 좋은 기법이다. 
html과 body태그에 overflow:hidden값을 넣는게 우려되기는 하나 해당 페이지 스크롤바를 없애기 위한 방법이다.

아래와 같이 overflow:auto 컨텐츠 영역에 overflow:auto로 자동 스크롤바를 생기게 할 수 있다.
 
 <div id="cont">
    <div class="box">
          <!-- 내용 들어가는곳-->
    </div>
</div>

#cont {
    position:absolute;
    top:0;left:0;
    z-index:70;
    overflow:auto;
}
.box {
    margin: 0 auto;
    width: 400px;
    padding: 50px;
    background: white;
    padding-bottom:100px;
    font: 14px/2.2 Georgia, Serif;
}
 

IE6에서는 잘 동작하지 않으므로 MooTools 자바스크립트 라이브러리가 필요하다. (소스확인)


Technique #2

이번 기법은 위에서와 달리 별도의 "bg"클래스를 가진 div태그와 같은 wrapper 마크업이나 자바스크립트가 필요없이 CSS만으로 가능하다.

img.bg {
 /* Set rules to fill background */
 min-height: 100%;
 min-width: 1024px;

 /* Set up proportionate scaling */
 width: 100%;
 height: auto;

 /* Set up positioning */
 position: fixed;
 top: 0;
 left: 0;
}

@media screen and (max-width: 1024px){
 img.bg {
  left: 50%;
  margin-left: -512px; }
}

div#content {
 /* This is the only important rule */
 /* We need our content to show up on top of the background */
 position: relative;

 /* These have no effect on the functionality */
 width: 500px;
 margin: 0 auto;
 background: #fff;
 padding: 20px;
 font-family: helvetica, arial, sans-serif;
 font-size: 10pt;
 line-height: 16pt;
 -moz-box-shadow: #000 4px 4px 10px;
 -webkit-box-shadow: #000 4px 4px 10px;
}

body {
 /* These rules have no effect on the functionality */
 /* They are for styling only */
 margin: 0;
 padding: 20px 0 0 0;
}






 

Post by 넥스트리소프트 데꾸벅(techbug)
, |


네트웍이 안되는 특수환경에서 프로젝트를 진행하다 복귀해 보니 최신정보에 상당히 둔감해졌다는 생각이 많이 든다.
그래서 꿈춰두었던 내용들을 살포시 꺼내본다.

Internet Explorer 8 출시 이후  이미 모든 포털에서 웹조각(Web Slice)기능들을  많이들 구현해 놓았는데
혹시나 모르시는 분들이 계실것 같아서 웹조각 만드는 방법에 대해서 공유한다.


최종 HTML소스


결과화면 : 로컬에서 해서 안되서 서버를 띄웠답니다. ㅡ.,ㅡ;





웹조각 추가하기



실제 적용예



웹조각 삭제하기




원본소스 나갑니다.

    <div id="bugslice" class="hslice">
     <div class="entry-title">데꾸벅 웹조각 테스트 제목</div>
     <div class="entry-content">
         웹조각 내용이 들어가는곳입니다.<br />
         .entry-title을 display:none이나 화면에 필요한걸로 바꾸면 되겠죠<br />
         <!--[if gte IE 7]>IE8에서 되는기능이므로 로도 처리해 되겠죠<![endif]-->
         아이디값은 나중에 버튼으로 추가하려면 좋아요~
        </div>
    </div> 


<html>
<head>
<title>Web Slice Example</title>
</head>
<body>
   <div class="hslice" id="SliceID">
      <span class="entry-title">Slice Title</span>
      <a rel="entry-content" href="http://techbug.tistory.com/" style="display:none;">
        실시간 웹조각 컨텐츠
      </a>
 
      <a rel="bookmark" href="http://techbug.tistory.com/" style="display:none;">북마크할때</a>
      <a href="http://techbug.tistory.com/" target="_blank">웹조각의 링크를 다른창으로 열때</a>
      <span class="endtime" title="25 Jul 2008 17:30:00 PST" style="display:none;">캐쉬없앨때</span>
   </div>
</body>
</html>











이벤트핸들러로 달기

<input type="button" value="웹조각 추가"  
       onclick="external.AddToFavoritesBar('http://localhost/webSlice.html#bugslice','설명','slice')" /> 


DIV대신 a태그 사용시 (웹조각에서 보여줄 페이지 지정하기)

<a rel="entry-content" href="http://techbug.tistory.com"> </a>


<div class="hslice" id="아이디값">
    <span class="entry-title">링크로처리할때</span>
    <a rel="entry-content" href="링크주소.html" style="display:none;"></a>
</div>

Feed용

<a rel="feedUrl" href=http://techbug.tistory.com/script/powerEditor/pages/">

<div class="hslice" id="아이디값">
    <span class="entry-title">링크로처리할때</span>
    <a rel="feedurl" href="피드주소.html" style="display:none;"></a>
</div>


북마크용

<div class="hslice" id="아이디값">
    <span class="entry-title">링크로처리할때</span>
    <a rel="bookmark" href="북마크.html" style="display:none;"></a>
</div>



웹조각 아이콘 바꾸기


원래의 웹조각 아이콘을 바꾸는 방법입니다. 기존 파비콘(favicon)을 바꾸는 방법과 마찬가지로 아래와 같은 방법으로 바꿀수 있습니다.

<link
    rel="default-slice"
    type="application/x-hatom"
    href="#웹조각아이디값" />




웹조각기능끄기
이미지툴바기능끄기와 같은 방법으로 웹조각 기능끄기 태그는 아래와 같습니다.

<meta name="slice" scheme="IE" content="off"/>



웹조각캐쉬없애기  (다음글을 참조하세요)

<span class="endtime" title="25 Jul 2008 17:30:00 PST" style="display:none;">캐쉬없앨때쓰기</span>











파이억폭스에서도 IE의 웹조각기능 사용하기
Firefox용 플러그인 WebChunks 3.5에서도 되네요
IE8에 새로 도입되는 WebSlices 기능을 파이어폭스에서 구현한 확장기능입니다.
툴바에서 Webslices 기능이 지원되는 사이트의 업데이트를 보기 좋게 확인 할 수 있습니다.
다운로드
    
 











다음글도 참조하세요 :




즐코딩하시길... 간만에 데꾸벅이였습니다.









Post by 넥스트리소프트 데꾸벅(techbug)
, |


가끔씩 사진보정작업에 관련된 알바거리가 들어올때가 있다.
일일이 색보정하고 효과주기가 귀찮아질때 웹상에 돌아다니는 action파일들을 찾을때가 있는데..
이리저리 찾다가 정리한 내용들을 올려본다.
아래는 데꾸벅이 자주가는 deviantArt사이트에서 모아둔 Action들이다.

 



 


deviantART Photoshop actions
 


 













원본 : Visual-Blast


Turning Turnip: Photo cube effect - 일반 이미지를 3D이미지로 변환하는 액션





Turning Turnip: Soften skin effect - 잡티제거 및 자연스런 스킨효과







- 9 more Free Photoshop Actions from Turning Turnip

Page Curl Photoshop Action - 이미지 구석탱이를 페이지 접힘 효과로 표현

PanosFX: B & Big picture - A 3-D collage effect



PanosFX: Discrete - 좀더 자연스런 이미지로 표현

PanosFX: Spiral Bind 

PanosFX: 3D - 

PanosFX: Stamp v.2 -우표와 같은 효과 주기

PanosFX: The Big Picture -

- 32 more Free Photoshop Actions from PanosFX

Color Actions 2 - 

Vintage Photo -




 




Finesse FX: Old Parchment action

Finesse FX: TackIt! Mini action

- 65 more Free Finesse FX Photoshop Actions 

Liknes: FilmStrip Action

Liknes: Puzzle Action

- more Photoshop actions from Liknes - border, text and special effects

Shutter Freaks: Crystal Ball Action

Shutter Freaks: Hayes Island Variant


다른 액션들

Post by 넥스트리소프트 데꾸벅(techbug)
, |

이미지 합성은 디지털 시대의 가장 복잡하고 디테일하며 보다 창조적인 예술형식입니다.
여러개의 사진들을 믹싱하는 작업은 보기보다 어려운 작업이며, 서로 다른 요소들을 하나의 이미지로 합치는것은 화면 구성, 칼라이론, 정형화된 컨셉과 같은 상당한 기술셋을 요한다는 것은 이미 잘 알고들 계실겁니다.
아래 36개의 뛰어난 디자이너의 환상적인 사진합성 이미지 출처(dzineblog)는 웹디자이너에게 많은 영감을 불어넣어 줄 것입니다.  돌이켜보면 데꾸벅도 처음 포토샵을 접한 95년도에 이러한 이미지 합성을 하면서 디자인의 즐거움을 찾았던것 같다는... 쿨럭!

저작권은 각 해당 이미지작성자에게 있으며 어떠한 이미지도 가져다 쓰실수 없다는것은 잘 알고들 계시죠?
저작자와 포스팅한자에 대한 출처표기는 블로깅 에티켓입니다. ^^  [이미지 저작권에 대한 짤막한 블로그 포스트]







사이트바로가기



사이트바로가기



사이트바로가기



사이트바로가기



사이트바로가기





사이트바로가기



사이트바로가기



사이트바로가기



사이트바로가기



사이트바로가기



사이트바로가기



사이트바로가기



사이트바로가기



사이트바로가기



사이트바로가기



사이트바로가기



사이트바로가기



사이트바로가기



사이트바로가기



사이트바로가기



사이트바로가기



사이트바로가기



사이트바로가기



사이트바로가기



사이트바로가기



사이트바로가기






사이트바로가기



사이트바로가기



사이트바로가기



사이트바로가기



사이트바로가기



사이트바로가기











Post by 넥스트리소프트 데꾸벅(techbug)
, |


ext-js 2.x 이상 버전에서 Updater를 이용시 깜빡거릴 경우가 있다.
이는 로딩인디케이터 때문인데 이럴 경우에는 다음과 같이 처리해주면 깜빡거리지 않는다.
아래 소스는 ext2.2 버전에서 테스트한 경우이다.

참조 URL : http://extjs.com/deploy/dev/docs/output/Ext.Updater.html

<html>
<head>
 <title>Ext JS 2.2 Samples</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<script type="text/javascript" src="../lib/ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../lib/ext-2.2/ext-all.js"></script>
<body>

<div id="specialDiv" style="border:solid 1px black;width:300px;height:300px"></div>
<button onclick="testFunc('start')">오토 시작</button>
<button onclick="testFunc('stop')">오토 끝</button><span id="techbugNo"></span><br />

<button onclick="testFunc1()">클릭할때마다 시작</button>


<script type="text/javascript">

 function testFunc(a){
  var mgr = new Ext.Updater("specialDiv");
  mgr.showLoadIndicator = false;  <-- 깜빡거림 방지
  if(a=='start'){
   mgr.startAutoRefresh(1, {
    url: "test1.html",
    method: "post",
    scripts: true,
    refreshNow : true,
    callback : function(){

    }
   });
  }else {
   //IE6이상버전에서 이상하게 작동하지 않음! 소스를 까봐야 겠음!
   mgr.stopAutoRefresh();
  }

  var techbug =0;
  mgr.on("update",function(){
   Ext.get("techbugNo").update(techbug++);
  });
 }

 function testFunc1(){   
  Ext.get("specialDiv").load({    //보통은 load로 처리하여 요기를 Updater로 사용하는것이 바람직
         url: "./test1.html",
         scripts: true,
         params: "",
         text: "Loading Foo..."
    });

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


IE7, Chrome, FF3, Opera9.64 에서 테스트결과




'Scripter > EXTJS' 카테고리의 다른 글

Ext js 틀고정 그리드  (1) 2009.11.15
Extjs Core 3.0 Beta 릴리즈  (4) 2009.04.07
Examples Of ExtJS in Action  (2) 2009.03.31
extjs RowAction 붙이기  (1) 2009.03.31
extjs 2.2의 IE에서 iframe document load 버그패치  (0) 2009.01.21
Post by 넥스트리소프트 데꾸벅(techbug)
, |

요즘은 화면 가득히 큰 사이즈의 백그라운드를 사용한 웹사이트가 점점 증가하는 추세이다.
이전에도 이러한 시도들은 많았으나 속도면에서나 리소스 사용율이 많다는 한계에 부딪혀 작은 이미지를 자바스크립트를 이용해 백그라운드에 넣었던 기억이 난다.
화면 퀄러티도 떨어지지 않고 조화를 이루면서 리소스면에서도 우수한 사이트들을 추천해 본다.
국내의 웹디자이너들도 이러한 추세를 많이 따라가고 있는데 해외사이트와 달리 전체 Full Flash사이트를 많이 접하게 된다. 아무래도 리소스면에서 풀이미지보다 벡터이미지로 처리하려고 그런것 같은데 아래 사이트들의 소스를 분석해 보면서 어떻게 사용하고 있는지 분석해 보는것도 좋을것 같다.

※ 발췌한곳이 해외사이트(VANDELAY DESIGN)이다 보니 국내사이트에 대한 내용이 없는데 추천하고 싶은곳이 있다면 댓글이나 트랙백으로 남겨주세요 ^^



Lanbruk’s Gunyah




Pixel Image




The Circumference




Not Your Average Joe




Montel Media Group




Hellenic Holidays




Housing Works




Gazelle Touch




Bike Friday




JasonDorn.com




Pillsbury




Travis & Presley




TOOBYDOO




eleven3




Text on Color




Ace of Base




MEDIENRING




Farmhouse Fare




Carolina Jesus




WallSwaps




Elite Pre-Vestibular




Roar




August




NOFRKS Design Studio




BH Eurosong




Get London Reading




Longfellow Ranches




Upstruct




ANidea




Global Ventures




Le Nordik




Skate2 + Etnies




Peter Pearson




Creative Spaces






Post by 넥스트리소프트 데꾸벅(techbug)
, |

웹디자인을 하다가 보면 전체적인 틀을 잡고 각각의 요소마다 채워나가다보면 항상 푸터가 고민되는 경우가 있다. 웹사이트 푸터를 모아놓거나 각각의 요소(헤더,좌측 사이드바, 메뉴영역, 푸터)들을 수집(?) 놓는 경우가 많은데 좋은 푸터들을 모아놓은 사이트가 있어서 소개한다.
해당 이미지나 기법들을 그대로 따라 베끼라는 얘기가 아니라 영감(Inspiration)을 얻는데 도움이 되라는 취지에서 포스팅한다.


1. Bcandullo

2. Creamy CSS

3. Brand 07

4. Rich Moris

5. David Hellmann

6. Albertlo

7. VSplash

8. Tulsa Tough

9. Ten Thoushand Things

10. Nuevo Aurich

11. Seraph Design

12. Bio Wind

13. Biola

14. Blog Amuki

15. Blog me Tender

16. Heres Life Africa

17. Forty Seven Media

18. Edege Point Chruch

19. Bristol Archive Records

20. Hutch House

21. Komodo Media

22. Matt

23. Mr Diggles

24. Nortehren Classic

25. Seed huinter

26. Spilt da diz

27. The Brads

28. Bits & Pixels

29. US Trendy

30. Viget


 


VANDELAY DESIGN에서 추천하는 25개의 인상깊은 블로그푸터(25 Impressive Blog Footers) 들도 들러보길 바란다.









Post by 넥스트리소프트 데꾸벅(techbug)
, |

프로젝트를 하다가 보면 여러명의 퍼블리셔들과 작업을 할때가 있다. 웹디자이너가 작업해놓은 PSD 작업물을 HTML/CSS로 분리하여 작업하는걸 보면 답답함을 감추지 못할때가 있는데 역량차이에 의한 문제도 있겠거니와 작업방식의 차이가 많이 난다는것을 느끼곤 했는데 포토샵파일을 HTML/CSS로 만들어주는 사이트가 있어서 소개해 볼까 한다.

원문사이트 : dzineblog




1.  The Design Lab: PSD Conversion


2. From PSD to HTML, Building a Set of Website Designs Step by Step


3.  Coding: Design Lab TV Styled Layout


4. PSD to CSS/HTML in Easy Steps - Part 1


5. Slice and Dice that PSD


6.  Converting a Photoshop Mockup: Part Two, Episode One


7.  Build a Sleek Portfolio Site from Scratch


8. Portfolio Layout - Learn To Code It


9. Converting a Design From PSD to HTML


10.  How to Convert a PSD to XHTML


11. How to Convert PSd to Html


12.  Creating a CSS Layout from scratch


13. PSD > HTML/CSS


14. Encoding a Photoshop Mockup into XHTML & CSS


15.  Css Template Tutorial


16. Portfolio Layout 4: The Code


17. Tutorial Coding a Layout


18.  Converting a Photoshop Mockup


19.  Killer site - From Illustrator to Xhtm to Drubal


20.  From PSD to HTML


21.  Coding a Car Sales Layout


Post by 넥스트리소프트 데꾸벅(techbug)
, |

최근 들어 포토샵 브러쉬를 상당히 많이 올리게 되네요~
가끔씩 여성스런 웹사이트나 간지사이트 만들때 백그라운드나 텍스쳐로 사용해도 될듯 합니다.

출처 : Best Design Option
사용제한 : 비상업적 용도로만 사용하셔야 합니다. (non-commercial OK?)








Post by 넥스트리소프트 데꾸벅(techbug)
, |

Ajax Framework 분석

Scripter/AJAX / 2009. 5. 4. 11:45


ajax framework 선택시 Matt Raible씨가 그의 고객에게 했던 분석을 그의 블로그에 포스팅 하였다. 항상 ajax framework선택시 어떠한 프레임웍을 선택할지 고민이 많이 된다. 재미있는것은 ajaxian 포스팅에 보면 다트판을 그려놓고 선택한다는 농담이.. ㅡ.,ㅡ;

여러분도 이 다트판을 돌려 선택하나요? 사실 일전에 데꾸벅이 포스팅한 ajax framework고르는법 글도 사내 프로젝트에 사용할 프레임웍을 고민하다 만든 포스팅이였는데 같은 고민을 하는데도 질이 틀리네요.. 한번씩 참조하시는것도 괜찮을듯 싶어 포스팅합니다.

아래표는 Matt Raible씨가 모든 프레임웍으로 직접 프로토타입형태의 애플리케이션을 만들어보고 중요한 기준이 되는 특징들로 도식화한 것입니다.

참조 : ajaxian, indeed, google doc




아래 그래프는 결론적으로 모든 ajax framework들이 웹애플리케이션을 만들기에 손색이 없었다고 합니다. 거의 대부분의 프레임웍들이 이제는 거의 비슷하게 성능평가가 나오고 있습니다. 정말로 다트판을 던져 고른다는 농담이 그냥 나온 얘기는 아니였네요.

아래는 각각의 프레임워크를 동일 가중치를 주어 평가한 그래프입니다.



여기서 비교된 프레임워크는 가장 인기있는 프레임웍을 대상으로 했다고는 하지만 jquery는 빠져있네요.

 

indeed 에서 검색한 결과 위 그래프와 같이 jQuery가 짧은 기간에 급상승하고 있네요.. 여기서는 dojo, yui, gwt, extjs, jquery,prototype.js까지 비교하고 있습니다. qooxdoo나 mootools는 빠져있네요 ㅡ.,ㅡ;


대부분의 ajax framework들이 prgressive enhancement하다고 합니다.  점점더 많은 요구와 사용자 committer들, 다양한 플러그인들, 각 프레임웍마다의 기능들을 서로 보완해 나가고 있습니다.
얼만전 ext3.0 core beta에서와 마찬가지로 서로의 장단점들을 보완해 가며 서서히 하나의 완전한 프레임웤들로 자리매김 하고 있네요~

하나의 프레임웍만 제대로 익힌다면 다음 프레임웍은 떡 주물듯이~ 가능할까요?









'Scripter > AJAX' 카테고리의 다른 글

CSSHttpRequest  (0) 2008.11.12
HTTP Header에 대하여  (0) 2008.11.08
AJAX에서 즐겨찾기와 뒤로가기를 다루는 방법  (0) 2008.09.24
100라인 Ajax Wrapper  (0) 2008.04.19
어떤 AJAX Framework를 선택할 것인가.  (0) 2008.03.14
Post by 넥스트리소프트 데꾸벅(techbug)
, |


그룹웨어형식의 웹애플리케이션을 퍼블리싱하다가 보면 테이블들을 많이 사용하는데
코딩할때 마다 테이블들의 스타일시트들을 생성해줘야 할때가 있다.
귀찮아서 만들어놓은 CSS를 사용하고는 하는데 혹시나 괜찮은 CSS를 찾아보다가 CSS TABLE GALLERY를 찾았다.

CSS하나 하나 다운로드 받아 처리하기 귀찮아서 정리해서 올려본다.

[마크업]

<table summary="This table lists all the flights by XYZ Air leaving London today.">
  <caption>Flight Schedule</caption>
  <thead>
    <tr>
       <th id="fn" scope="col">Flight Number:</th>
      <th id="fr" scope="col">From:</th>
      <th id="to" scope="col">To:</th>
      <th id="dp" scope="col">Departure:</th>
      <th id="ar" scope="col">Arrival:</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="5">Total: 3 flights</td>
    </tr>
  </tfoot>
  <tbody>
  <tr>
    <th scope="row">BA 3451</th>
    <td>Heathrow</td>
    <td>Nuremberg</td>
    <td>19:20</td>
    <td>19:50</td>
  </tr>
  <tr class="odd">
    <th scope="row">BA 1254</th>
    <td>Luton</td>
    <td>Alicante</td>
    <td>19:40</td>
    <td>20:50</td>
  </tr>
  <tr>
    <th scope="row">LH 331</th>
    <td>Heathrow</td>
    <td>Hamburg</td>
    <td>20:00</td>
    <td>20:20</td>
  </tr>
  </tbody>
</table>




[CSS]

table {border-collapse: collapse;border: 1px solid #38160C;font: normal 11px verdana, arial, helvetica, sans-serif;color: #F6ECF0;background: #641B35;}
caption {text-align: left;font: normal 11px verdana, arial, helvetica, sans-serif;background: transparent;}
td, th {border: 1px dashed #B85A7C;padding: .8em;color: #F6ECF0;}
thead th, tfoot th {font: bold 11px verdana, arial, helvetica, sans-serif;border: 1px solid #A85070;;text-align: left;background: #38160C;color: #F6ECF0;padding-top:6px;}
tbody td a {background: transparent;text-decoration: none;color: #F6ECF0;}
tbody td a:hover {background: transparent;color: #FFFFFF;}
tbody th a {font: normal 11px verdana, arial, helvetica, sans-serif;background: transparent;text-decoration: none;font-weight:normal;color: #F6ECF0;}
tbody th a:hover {background: transparent;color: #FFFFFF;}
tbody th, tbody td {vertical-align: top;text-align: left;}
tfoot td {border: 1px solid #38160C;background: #38160C;padding-top:6px;}
.odd {background: #7B2342;}
tbody tr:hover {background: #51152A;}
tbody tr:hover th,
tbody tr.odd:hover th { background: #51152A;}

 

소스다운로드 :




















Table designs
Design Name Author Country Comment Download
Total 98 designs
TagBox TagBox Deutschland Table design based on the fresh TagBox style. Download
Maniac Merchants Marten Willberg Germany A Georgia headline with a green-blue body. Download
Acuity Design Style Acuity Internet Marketing Brazil Black Style, with smooth grey and green elements. Download
Aqua Matthias Richter Germany Have fun! Download
Smooth Taste Thomas Opp Germany Smooth style with my favourite colours. Enjoy! Download
Stainless Steel Stenli Bulagaria Use cellspacing="1" for better feel. Download
Sky is no heaven Michael Schmieding Germany My new Design colors. Download
Foggy Country Straussennest South Africa Foggy Country - Green Trees planted on brown sugared ground. Download
Blue gradient Mihalcea Romeo Romania Nice table design based on a very subtile blue gradient. Download
desert Marc Bodon Germany brown, red, grey and white... simply smooth ;-) Download
orange and grey Christoph Plessner Germany Download
serif my love Frank Schnappenberger Germany A clean and simple table design with serif font Download
REDandBLACK Martin Paffenholz Germany Style like our website. Best viewed in Mozilla Firefox. Download
UV Green Kunimichi Takahashi USA Let me know what you think. Download
BakeSale admin Matti Putkonen Finland Table model used in BakeSale shopping cart admin interface. Download
The OC Rodolfo Marin Chile Table based in the color table from one of my latest design, overclockers.cl Download
blue like ice Erik Ginnerskov Denmark Nice and clean. No fancy stuff. Download
Dark Night Michael Schmieding germany That's my design with my favorite colors. I hope you like it. Download
mediagroove mayumi takami Japan i like this type of design. Download
chives' tables chives Germany Clean and spicy design from chives-team Download
table red-white Jens Germany Inspired by the original 'Assischale' and dedicated to 'Kollesche' ;-) Best wishes to everybody! Download
Candy Stefan Bihl Germany Hi, I hope this CSS File is not to pink ;-) Regards Stefan Download
Simple and Clean Leandro Pessoa Brazil My model! ;) Download
Blue Newton de Góes Horta Brasil Minimalist design in blue Download
Infected Infected-FX Mexico Minimal and clean design for next tutorial, mooflex inspired colors, icons by fam fam fam. ^^ Download
Azulon Joorge Epunan Chile Just playing with the ccode. I like the blue, and how it combines with other elements Looks pretty nice. Download
Casablanca Rodrigo Castilho Galvao Ferreira Brazil Inspired by Casablanca Web Standards Template existing in Template Design Competition, WESTCIV. Download
Salmon Ricardo Aroca Chile Orange colors. Style inspired in salmon, the main product of my city, Puerto Montt. Some advanced selectors (hover, after, before) and properties (content). Best viewed in modern browsers. Download
Clear Blue Robert Hartl Germany It's a clear but individual white-blue design with subdued hover-effects for modern browsers. Download
Blix Theme Newton de G—es Horta Brasil Table design based on Sebastian Schmieg's Blix Theme for Wordpress 2.0. Icons by Kevin Potts Download
iCubed Lar Veale Ireland Nice clean table with small gradient images. Row hover in Firefox gives another gradient effect. Download
Jacob Emiliano ESB Brasil Web Usability useit.com: usable information technology Download
Go Jamaica Hern‡n Argentina Jamaica, A Good place! Download
Poetry For Browser Monika Thon-Soun Austria Code is Poetry. Internet Explorer you can't show us arrows and hover effects. You can't show us correct borders. It looks like that you can't understand poetry. Don't be jealous of browsers. It is simply:Learn to be a browser and everything is going to be alright. Download
Red Body Jarek Karczewski Poland Red Body is my first style. I hope you like it :-) I'll try to do another style, maybe ... Enjoy Download
Like Adwords Cleiton Francisco Brazil A simple style like Google Adwords list. Download
Pretty In Pink Viktor Persson Sweden Smooth, pretty and pink. Best viewed in Mozilla Firefox. Download
Two times table Stu Nicholls England A very basic table for all Internet Explorer users but something VERY different for understanding browsers :o Hope you like it. Download
Brazilian taste DvD Franco Brazil Pleasant design with happy colours, readable data and a bonus: a little effect playing with the caption text and image background. Download
bluish Stefan Herzig Germany Blue style with a hint of Amiga Download
Second Revolution Henrique Costa Pereira Brazil Flexible glass button style. Feel free to resize the font! Download
BluInBlock JuanMa Argentina It is a good blue style that contains block properties with any background images. I hope you like it :) Download
pop.pop.star Timo Wirth Germany Inspired by Andy Warhol, this bold and simple table emphasizes the table rows (rather than the columns). Download
Tabular tables Stu Nicholls England A simple table using a little border art for mouseovers. Download
The Sky Is Blue Eric Pui Malaysia The sky is blue... Download
Sea Glass Stephanie Leary US Subtle and green. Download
Orange Brownie Cody Lindley US Nice idea, the site that is. Download
Blaugrana Choan C. G‡lvez Spain Alternating row and link colors. Enhancements (hover, image replacement) for modern browsers. Download
Soft Table Newton de G—es Horta Brazil A simple table style with the use of the soft brown color Download
Innocent Flowers Christine Kirchmeier Germany Simple, friendly design in blue Download
Shades of Blue Velizar Garvalov Bulgaria Simple blue design with some :hover effects Download
Gmail scrolling Mauricio Samy Silva Brazil A look-alike theme with fixed height for the table container DIV and vertical scroll bar. There is an :hover behavior on caption background image. Download
Shades of Purple Demetrius Francis Bahamas Basic styles with a purple scheme. Download
Turkish Delight Paul Brownsmith UK Raspberry shades with chocolate rollovers for compliant browsers. Clean, clear and choco-sweet. Download
Grayed Out Terence Ordona US A simple look and feel that improves with the quality of your browser's CSS support. Shows possible use of a la Excel styling. Download
Nimbupani Divya Singapore A minimalist style that explores the relative weights of the lines that differentiates one element from the other. The same design elements has also been used on this site http://jflickruploader.blogspot.com Download
Trekkish Violets Patryk Zawadzki Poland Well... a bit trekkish I guess (but not really inspired by holodeck). Blues and violets here and there. Looks best when viewed in Firefox. Download
Golden style Michael Horn Germany Golden coloured style, with hover effects in modern browsers (Firefox, Opera). Download
Oranges In The Sky Krasimir Makaveev Bulgaria Just a simple table design with orange and blue links! Download
Rockstar Jens Wedin Sweden Simple classic design with advanced stuff for standard compliant browsers. Download
Greyscale Two Plus Four UK Minimalist design in black, white and shades of grey. Resizeable text and CCS2 enhancements for those that know. Download
Coffee with milk Roger Johansson Sweden Clean, no-nonsense design with a latte-ish colour palette. Some extra design features in modern browsers. Download
Clean and crisp Mats Lindblad Sweden Clean and Crips table style, with a little MS feel to it. Although it works best in Firefox. Download
classic mitch uk no comment, just some damn good table styling! Download
Winter Blues Gunta Klavina Latvia Blue pastel coloured style. Download
Green Life Vitaly Friedman Germany A Fresh, Warm and Readable Table Download
Breathing Space Kevin Leitch UK Lots of padding on the default design. Contains enhancments for selector-enabled browsers. Download
Warm Fall Mya Leigh USA Warm fall colors with easy to read text. Download
iTunes John Lawrence UK Table design based on Apple's iTunes software. Download
MintGreen Taimar Teetlok Estonia Warm and friendly mint-green presentation. Download
Heaven is Closer Niko Neugebauer Portugal A simple style that improves with the quality of your browser's CSS support Download
Table on a Table C Montoya USA Pastel blue and yellow, and a nifty background. Behaves decently in IE. Images are table_oil2.jpg and table_oil3.jpg. Download
Cygenta Tim Baker Canada Monospaced with a painful palette. Download
Spread Firefox! Thierry Koblentz USA Best experience in Firefox! ;-) Download
Table Sprite Parker Torrence USA This design employs a single graphic for both the caption title and the background effects. Download
Muted Dan Champion Scotland Grey and beige, clean and simple. Minimal use of CSS2 fancy bits like :after and tr:hover. Download
Chocolate Phil Thompson UK A simple table style with a sexy chocolate-inspired colour scheme. Lots of room for the table data to breathe. Download
Smilies AndrŽ Mendona Brasil Green table with alpha transparency, lots of smilies and shadows. Download
Inset cells Mauricio Samy Silva Brazil A table with inset cells and the use of adjacent-sibling selectors and border-spacing propertie for compliants browsers. Download
Shaded Colour Erik A. Drabl¿s Norway Dark table design using alternating link colors. Download
Revolu‹o Etc Henrique Costa Pereira Brazil Nice warm coloured table with small, but resizable, text. Download
Lab Report Louise Dade UK Clear, simple and informative data display for a scientific paper. Includes a background image, download icon and a "faux alpha transparency" rollover effect (a tiny tile with every other pixel transparent). Fully commented CSS file. Download
MSIE hover Mirek Kom‡rek Czech Republic Really simple one with hover in MSIE (using JavaScript via expression()) Download
Kashual Khaki Shane Shepherd USA You'll look great in Kashual Khaki! Be ready for fun when your lookin' snappy in khaki! Download
Orange You Glad Randy Peterman USA There is an image required for standards compliant browsers to get a 'bonus' download arrow for the download links. Download
Matrix? Christian Roque G. Peru using black and green, remove the red and bigger letter. Download
10 minutes Richard Grevers New Zealand Minimalist, using separated borders and spacing with a four-colour pallette. Download
Spearmint tints Ben Boyle AUS Simple coloured style with a minty theme. Download
Table structure Ben Boyle AUS Contrasts headings and cells, displays heading scope and summary (where supported). Download
City Mouse Janie Hadsel USA A tab with image text is placed in the caption background; caption text is hidden, but remains accessible to non-graphical browsers and screen readers. A simple table background image is dressed up by layering a transparent gif placed in the odd table rows. Download
Alpha transparency Mauricio Samy Silva Brazil Simulating alpha transparency with CSS Download
Grey suits you sir Stuart Colville UK Smart grey table with hover effect. Download
Cusco Sky Braulio AndrŽs Soncco Pimentel Perœ Soft blues like Cusco Sky Download
Roll Over from Down Unda Jason M Roehrig AUS A very sophisticated table showing many rollover effects on CSS2-abled browsers Download
Blue On Blue Glenn Slaven AUS A serif font table with a bit of colour to define the cells. Download
Chrome de la chrome Chris Heilmann UK Using gradient backgrounds to create chrome effects Download
Minimalist Chris Heilmann UK As minimal as you can get, only lines around the body cells Download
Plain old table Chris Heilmann UK Tried and true, boring grey table with a one pixel line Download
Post by 넥스트리소프트 데꾸벅(techbug)
, |
Post by 넥스트리소프트 데꾸벅(techbug)
, |



그라피티나 좀더 젊고 역동적인 사이트를 디자인 하다가 보면 먹물튀기기 효과나 화려한 그래픽을 원하는 경우가 많다. 이럴경우 사용하기 위한 포토샵 브러쉬를 공개한다.


0123456789101112131415161718192021222324


데꾸벅 주 : 저작권이 걸려있으므로 사용시 주의바랍니다.  상업적 용도로만 사용하지 않으시면 됩니다.











Post by 넥스트리소프트 데꾸벅(techbug)
, |


클라이언트에게 지속적인 관심을 가지게 하거나 알리기 위해 명함을 사용한다.
보통 명함들은 간결하게 만드는 경우가 있는데 간결하다고 평범한것이 아니다(Simplicity doesn’t equal plain)
데꾸벅이 명함디자인을 할때 참고했던 사이트에서 우아한 명함디자인 샘플 30개를 올려본다.

 

 










Post by 넥스트리소프트 데꾸벅(techbug)
, |


50 Sites That Will Help You To Become a Better Designer


이곳(dzineblog)에 가면 더 많은 디자인 리소스 정보와 지식들, 그리고 디자인시 영감을 제공할 사이트들을 제공하며,
디자이너의 스킬을 향상시키는 도움이 될만한 목적으로 디자이너들이 가장 많이 사용하는 디자인 리소스 목록들을 잘 정리해 놓았다.
작성자인 yugu는 초보디자이너들에게 항상 리스트업된 사이트를 시간될때 마다 둘러보는것이 도움이 된다고 말하고 있다.

데꾸벅 북마크에도 포함되어있는 사이트가 많은데.. 제대로 보지는 못했던거 같다..
더많은 공부가 필요할듯...





Site To Check For Quality Tutorials

1. PSD Tuts


2. Tutorial9

3. Pixel2life

4. Vector Tuts

5. PS Hero

6. PSD Fan

7. Good Tutorials

8. Photoshop Lady

9. Vectips

10. Veerl’s Blog

11. N Design Studio

12. Spoon Graphics

13. Go Media Zine

14. PSD Vault

15. HV Designs

16. Tutorial Dog

17. Tutzor

18. Photoshop Star

19. Photoshop Support

20. PSD RockStar








 

Design Forums To Join

1. Designers Talk


2. Graphic design forum

3. Sitepoint

4. Pixel2life Forum

5. Digital Point Forum








Community To Check

1. DepthCore


2. Behance Network

3. Humble Voice

4. Deviant Art

5. Carbonmade









Design Blogs To Follow

1. Smashing magazine


2. Design Melt Down

3. A list Apart

4. Noupe

5. Vandleay Design

6. Design Mag

7. Just Creative Design

8. David Dairey

9. Specky boy

10. Abduzeedo

11. WebDesgin Ledger

12. UX Booth

13. I Love Typography

14. Web Designer Wall

15. Bitbox

16. Designer Daily

17. Six Revisions

18. Web Designer Depot

19. 1st Web Designer

20. Fuel your Creativity


 


Post by 넥스트리소프트 데꾸벅(techbug)
, |

01 |  웹표준


 

 
[이미지출처 : 디자인정글]

    오페라 소프트웨어 웹 표준 커리큘럼 을 번역한 자료입니다. 시간나실때 한번씩 읽어 보세요~
    좋은 내용들이 많네요 

    웹표준커리큘럼의 소개와 차례

  

 

02 | 웹실무 프로젝트(웹표준 & UI/UX  개발 프로세스



[이미지출처 : 디자인정글]

 

    과정을 들으라는 내용이 아니라 커리큘럼을 살펴보면 어떠한 것이 프리젠테이션개발자에게 필요한 내용들인지
    확인할수 있습니다.
    요즘 프리젠테이션 개발자를 일컫는 User Interface에서 User란 단순 사용자가 아니라  
    시스템 vs. 솔루션,   
    개발자 vs. 개발자
    고객    vs. 개발자 등, 무수히 많은 개념을 포함하고 있습니다.
    이러한 이질적인 개념들을 통합(Integrate) 혹은 연계(Interface)하는것입니다.   

 

    "당신이 생각하는 디자인DESIGN이란 무엇입니까? 단순히 표현EXPRESSION인가요?
    그렇다면, 구조STRUCTURE는 고려하였는지요?"    
 

    OOO정글 아카데미 과정소개

 

  

데꾸벅, 피곤에 쩌든 어느저녁에.. 그냥 함 끄적여 보다..

 

 

 

 

Post by 넥스트리소프트 데꾸벅(techbug)
, |

HTML5 Gallery

Publisher/HTML/HTML5 / 2009. 4. 10. 20:18


아직 Editors Draft (2009년 4 월 8일) 중인 HTML5로 된 사이트를 한곳에 모아둔 사이트가 있어서 소개한다.
(데꾸벅 주: 헉 아직 Working Draft상태인줄 알았는데 이 포스트를 작성하다가 링크를 걸기위해 찾아갔더니만 Editor's Draft 상태이다. W3C의 고무줄 스케줄:로드맵 에 따르면 이미 권고안으로 확정되어야 하지만 최소한 Working Draft상태가 올해안에 안끝날줄 알았는데....  조만간.. HTML5로 또 한번 IT쪽이 떠들썩 하겠군~~~)

사이트 주소 : http://html5gallery.com/






구글크롬, IE8, 7, Firefox3, Opera 에서도 깨짐없이 잘 보이고 있다.
HTML소스를 열어보니 <section>, <nav>, <header> 태그들이 보이고 CSS는 3.0 스펙으로 처리되어 있다.
한가해 질때 각각의 사이트 소스를 분석해 보는것도 괜찮을듯 하다.




아래사이트는 HTML5 스펙으로 구성된 사이트들이다... 즐감 하시길...
http://www.tableless.com.br/
http://jacobrask.net/
http://willworkforart.net/
http://a.deveria.com/
http://www.codedread.com
http://www.thatstandardsguy.co.uk/
http://openscriptures.org/
http://www.thewatchmakerproject.com
http://theccaa.net
http://rebathoregon.com/
http://shepherd-interactive.com/
http://weston.ruter.net/
http://richclarkdesign.com
http://chipbarm.com
http://camendesign.com/
http://www.aneventapart.com/
http://www.uxlondon.com/
http://intertwingly.net/blog/

가까운 시일내에 데꾸벅 블로그도 HTML5 + CSS3로 도배를.. 크크~








'Publisher > HTML/HTML5' 카테고리의 다른 글

[HTML5] Progress Bar CSS입히기  (2) 2013.03.04
SVG와 CANVAS사이의 선택  (16) 2010.03.09
웹페이지 소스보기 금지  (0) 2008.08.19
Post by 넥스트리소프트 데꾸벅(techbug)
, |