데꾸벅의 생각들

CSS3의 구조적인 가상선택자

데꾸벅 — Thu, 21 Mar 2013 18:12:44 +0900

요즘 front-end 개발자들은 CSS를 "어떻게" 쓰는지에 대해 이해할 필요가 없으나 얼마나 "효과적"으로 쓰는지에 대해서 알 필요가 있습니다. 여기서 "효과적"이라는 것은 프로젝트나 환경에 따라 의미하는것이 다릅니다. 만약 여러명의 웹퍼블리셔들과 함께 작업하고 있거나 id나 class없이 기존 시스템을 작업한다거나, 규모가 큰 웹사이트의 속도를 높이기 위한 최적화작업을 위한 협업을 위해 가장 효과적인 방법이 필요할것입니다.

대부분의 개발자들이 id나 class 선택자에는 친숙하나 조금 더 편안한 작업을 위해 가상선택자(psuedo seletor)에 대해 알아보도록 합니다.

CSS3스펙에는 조금 더 다양한 가상선택자들을 제공하고 있으나 현재 이 글을 작성하고 있는 시점에는 아직 많은 브라우저들이 지원을 하고 있지는 않습니다. 그러나 다양한 자바스크립트 라이브러리나 프레임웍에서 지원하고 있으며 앞으로 브라우저 벤더들도 지원할 예정이니 미리 봐두는것도 좋을 듯 싶습니다.

CSS2 스펙도 현재 진행중인 상태에서 여러분은 이미 CSS2의 선택자를 미리 사용하고 있는 것처럼 브라우저에서 지원하는 CSS3는 지금도 사용할 수 있겠죠..

만약 지원하지 않는 CSS3의 가상선택자를 굳이(?) 사용하고자 하신다면 다음 라이브러리 ( http://selectivizr.com/ )를 사용하시는것도 좋을듯 싶습니다.

selectivizr-1.0.2.zip

CSS선택자가 뭔지 모르는 분들은 다음글 CSS 선택자 이해하기 글도 한번 참조해 보세요 ^^

가상선택자란

CSS의 가상클래스 혹은 가상선택자 (Pseudo-class)는 id 선택자나 class 선택자와 같이 간단하게 혹은 결합하여 쓸수 없는 요소들을 선택하는 선택자 입니다. 여러분은 마크업 요소의 속성값, 상태, 상대적위치등을 이용하여 각 요소들을 선택할 수 있습니다. 예를 들어 가장 익숙한 가상선택자에는 다음과 같은 것들이 있습니다.

:link

:visited

:hover

:active

:focus

CSS3 스펙에 새롭게 추가된 가상클래스는 DOM Tree상에서의 요소의 위치값, 다른 요소와의 상대적인 위치에 따라 설정되는 "구조적인 선택자"입니다

:root

: only-child

:empty

:nth-child(n)

:nth-last-child(n)

:first-of-type

:last-of-type

: only-of-type

:nth-of-type(n)

:nth-last-of-type(n)

:first-child

:last-child

<참조: CSS Selectors by clearboth>

Pattern	Meaning	S5	C8	F3.6	O11	I9b	I8	I7	I6
#id	id로 지정된 요소 선택	O	O	O	O	O	O	O	O
.class	class로 지정된 요소 선택	O	O	O	O	O	O	O	O
E	E 요소를 선택	O	O	O	O	O	O	O	O
E:link	방문하지 않은 E를 선택	O	O	O	O	O	O	O	O
E:visited	방문한 E를 선택	O	O	O	O	O	O	O	O
E:hover	마우스가 올라가 있는 동안 E를 선택	O	O	O	O	O	O	O	O
E:active	마우스 클릭 또는 키보드(enter)가 눌린 동안 E를 선택	O	O	O	O	O	O	O	X
E:focus	focus가 머물러 있는 동안 E를 선택	O	O	O	O	O	O	X	X
E:first-line	E 요소의 첫 번째 라인 선택	O	O	O	O	O	O	O	X
E:first-letter	E 요소의 첫 번째 문자 선택	O	O	O	O	O	O	O	X
*	모든 요소 선택	O	O	O	O	O	O	O	O
E[foo]	‘foo’ 속성이 포함된 E를 선택	O	O	O	O	O	O	O	X
E[foo="bar"]	‘foo’ 속성의 값이 ’bar’와 일치하는 E를 선택	O	O	O	O	O	O	O	X
E[foo~="bar"]	‘foo’ 속성의 값에 ’bar’가 포함되는 E를 선택	O	O	O	O	O	O	O	X
E[foo\|="en"]	‘foo’ 속성의 값이 ’en’ 또는 ’en-’ 으로 시작되는 E를 선택	O	O	O	O	O	O	O	X
E:first-child	첫 번째 자식 요소가 E라면 선택	O	O	O	O	O	O	O	X
E:lang(fr)	HTML lang 속성의 값이 ’fr’로 지정된 E를 선택	O	O	O	O	O	O	X	X
E::before	E 요소 전에 생성된 요소 선택	O	O	O	O	O	O	X	X
E::after	E 요소 후에 생성된 요소 선택	O	O	O	O	O	O	X	X
E>F	E 요소의 자식인 F 요소 선택	O	O	O	O	O	O	O	X
E+F	E 요소를 뒤의 F 요소 선택	O	O	O	O	O	O	O	X
E[foo^="bar"]	‘foo’ 속성의 값이 ’bar’로 정확하게 시작하는 요소 선택	O	O	O	O	O	O	O	X
E[foo$="bar"]	‘foo’ 속성의 값이 ’bar’로 정확하게 끝나는 요소 선택	O	O	O	O	O	O	O	X
E[foo*="bar"]	‘foo’ 속성의 값에 ’bar’를 포함하는 요소 선택	O	O	O	O	O	O	O	X
E:root	문서의 최상위 루트 요소 선택	O	O	O	O	O	X	X	X
E:nth-child(n)	그 부모의 n번째 자식이 앞으로부터 지정된 순서와 일치하는 E 라면 선택	O	O	O	O	O	X	X	X
E:nth-last-child(n)	n번째 자식이 뒤로부터 지정된 순서와 일치하는 요소가 E 라면 선택	O	O	O	O	O	X	X	X
E:nth-of-type(n)	E 요소 중 앞으로부터 순서가 일치하는 n번째 E 요소 선택	O	O	O	O	O	X	X	X
E:nth-last-of-type(n)	E 요소 중 끝으로부터 순서가 일치하는 n번째 E 요소 선택	O	O	O	O	O	X	X	X
E:last-child	E 요소 중 마지막 자식이라면 E 선택	O	O	O	O	O	X	X	X
E:first-of-type	E 요소 중 첫번째 E 선택	O	O	O	O	O	X	X	X
E:last-of-type	E 요소 중 마지막 E 선택	O	O	O	O	O	X	X	X
E:only-child	E 요소가 유일한 자식이면 선택	O	O	O	O	O	X	X	X
E:only-of-type	E 요소가 같은 타입이면 선택	O	O	O	O	O	X	X	X
E:empty	텍스트 및 공백을 포함하여 빈 자식을 가진 E를 선택	O	O	O	O	O	X	X	X
E:target	E의 URI의 대상이 되면 선택	O	O	O	O	O	X	X	X
E:enabled	활성화된 폼 컨트롤 E요소 선택	O	O	O	O	O	X	X	X
E:disabled	비활성화된 폼 컨트롤 E요소 선택	O	O	O	O	O	X	X	X
E:checked	선택된 폼 컨트롤(라디오버튼,체크박스)을 선택	O	O	O	O	O	X	X	X
E:not(s)	s가 아닌 E 요소 선택	O	O	O	O	O	X	X	X
E~F	E 요소가 앞에 존재하면 F를 선택	O	O	O	O	O	O	O	X

가상선택자 문법

자세히 알아보기 전에 가상선택자를 사용하기 위한 문법들에 대해서 간단히 알아보도록 합시다

가상선택자는 가상클래스 이름앞에 콜론(:)을 사용합니다.

:pseudo-class {}

만약 특정 요소(SPAN)에 붙이고 싶다면 그 앞에 요소 타입을 적어 주시면 됩니다.

span:pseudo-class {}

또한 id 선택자나 class 선택자에 쓰려면 다음과 같이 작성하면 됩니다.

#id:pseudo-class {}

.class:pseudo-class {}

참~ 쉽죠~잉~

수치값

몇몇 가상선택자는 DOM Tree에서의 특정 위치값을 가진 요소를 선택할 수 있으며, 여러분은 수치값을 해당 요소를 선택할 수 있습니다. 다음과 같이 표현합니다.

:pseudo-class(n) {}

(n)값은 정수형으로 표현되며 선택하고자 하는 요소의 순서입니다. 만약 3번째 값을 선택시에는 다음과 같이 합니다.

:pseudo-class(3) {}

또한 "5번째 요소들 마다" 처럼 공식을 사용할 수 있을때는 다음과 같이 사용합니다.

:pseudo-class(5n) {}

추가적으로 더하기(+), 빼기(-) 값을 이용하여 기준공식을 정할 수 있습니다. 예를 들어 아래와 같이 5n+1 이면 5번째 요소가 첫번째 요소가 된다는 뜻입니다.

:pseudo-class(5n+1) {}

또는 홀수(odd) 짝수(even)와 같이 지정할때는 다음과 같은 표현식이 가능합니다.

:pseudo-class(odd) {}

가상선택자 사용하기

지금까지 가상선택자 사용하기를 간단하게 알아봤고 좀더 상세하게 css3에 추가된 가상클래스에 대해서 알아보도록 합시다.

:root

html의 최상위 대상 요소를 지정하는 것으로 IE hack으로 많이 사용했던 부분이 css3 스펙 표준으로 지정되었습니다.

만약 html 요소와 body요소를 다르게 표현할때 최상위 요소인 html을 백그라운드를 틀리게 표현할때 표현합니다.

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

:root{

background-color: rgb(56,41,48);

}

body {

background-color: rgba(255, 255, 255, .9);

margin: 0 auto;

min-height: 350px;

width: 700px;

}

body부분의 색깔을 달리 표현하고 width값을 700픽셀로 두었을때 최상위인 html 요소부분의 백그라운드 색깔을 바꾸는 소스입니다.

다음과 같이 표현되겠죠..

:only-child

부모객체 자식요소중에 유일한 요소에만 스타일을 지정할때 쓰는 요소입니다.

예를 들어 아래와 같이 표현할때

위의 붉은색을 처리할때 다음과 같이 마크업을 합니다.

<h2>

<b>유일한 bold요소</b>

헤딩요소에 들어가는 텍스트입니다.

</h2>

h2 {

background: rgb(255, 255, 255) url(zombies.png) no-repeat 97% 4%;

border: 1px solid rgba(125, 104, 99, .3);

border-radius: 10px;

color: rgb(125,104,99);

font: normal 20px Georgia, "Times New Roman", Times, serif;

padding: 20px 20px 20px 60px; position: relative; width: 450px;

}

b:only-child {

background-color: rgb(156,41,48);

color: rgb(255,255,255);

display: block;

font: bold 12px Arial, Helvetica, sans-serif;

font-weight: bold;

letter-spacing: 1px; padding: 10px;

text-align: center;

text-transform: uppercase;

-moz-transform: translate(-70px) rotate(-5deg) matrix(1, -0.2, 0, 1, 0, 0);

-moz-transform-origin: 50px 0;

-webkit-transform: translate(-70px) rotate(-5deg) matrix(1, -0.2, 0, 1, 0, 0);

-webkit-transform-origin: 50px 0;

-o-transform: translate(-70px) rotate(-5deg) matrix(1, -0.2, 0, 1, 0, 0);

-o-transform-origin: 50px 0;

-ms-transform: translate(-70px) rotate(-5deg) matrix(1, -0.2, 0, 1, 0, 0);

-ms-transform-origin: 50px 0;

transform: translate(-30px) rotate(-5deg) matrix(1, -0.2, 0, 1, 0, 0);

transform-origin: 50px 0 0; width: 150px;

}

:empty

해당 요소의 자식요소로 어떠한 요소나 텍스트요소가 없는 빈 요소를 지정할때 사용됩니다. td의 빈 테이블일때 사용해도 좋겠죠... empty-cells 속성과 같은 용도로 사용할 수 있습니다.

<p></p>

:empty {

background-color: red;

}

td:empty {

background-color: red;

}

위의 td 내용은 아래와 같이 쓸수도 있습니다.

td {

empty-cells: background-color:red;

}

:nth-child(n)

부모객체를 기준으로 상대적으로 자식요소가 n번째 오는 요소를 찾는 방식으로 아래와 같이 댓글을 달때 짝수부분만 처리할때 많이 사용합니다.

<ol>

<li>

</li>

<li>

</li>

<li>

</li>

</ol>

일반 적으로 위 마크업에서 li 부분만 CSS를 입힌다면 다음과 같이 CSS를 작성합니다.

li {

background-color: rgba(194, 181, 158, .5);

background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(194, 181, 158, .7))
, to(rgba(194, 181, 158, 0)));

background-image: -moz-linear-gradient(top, rgba(194, 181, 158, .7), rgba(194, 181, 158, 0));

background-image: -o-linear-gradient( rgba(194, 181, 158, .7), rgba(194, 181, 158, 0));

border: 1px solid rgb(194, 181, 158);

border-radius: 10px;

margin: 15px 0;

padding: 25px;

}

그러면 동일하게 li 부분의 스타일이 적용되지만 li 중에 짝수(even)에 해당하는 줄을 넣고자 한다면 아래와 같이 CSS를 더 추가해 줍니다.

li:nth-child(even){

background-color: rgba(242, 224, 131, .5);

background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(242, 224, 131, .7))
, to(rgba(242, 224, 131, 0)));

background-image: -moz-linear-gradient(top, rgba(242, 224, 131, .7), rgba(242, 224, 131, 0));

background-image: -o-linear-gradient( rgba(242, 224, 131, .7), rgba(242,224, 131, 0));

border: 1px solid rgb(242, 224, 131);

}

:nth-last-child(n)

위의 :nth-child(n)과 마찬가지로 상대적인 순서가 뒤에서 부터 n 번째 인 요소를 찾을때 사용됩니다.

위의 마크업중 li 태그의 자식요소로 여러개의 p 요소가 들어가는데 뒤에서 2번째 p 요소에 스타일을 적용시킬때는 다음과 같이 스타일을 적용합니다.

p:nth-last-child(2) {

clear: left;

float: left;

font-size: 12px;

margin-top: 5px;

text-align: center;

width: 80px;

}

그럼 아래와 같이 두번째 p 요소에 float:left 속성이 적용되어 다음 p 요소가 위로 와서 붙겠죠...

:first-of-type

부모요소 안에서 특정한 타입요소(태그) 중 첫번째 요소를 선택하는 가상선택자로 사용됩니다. 위 샘플중 리스트 목록요소의 첫번째 p 태그(타입요소)에 대해서만 스타일을 적용한다면 다음과 같습니다.

p:first-of-type {

border-bottom: 1px solid rgba(56,41,48, .5);

float: right;

font-weight: bold;

padding-bottom: 3px;

text-align: right;

width: 560px;

}

:last-of-type

:first-of-type과 마찬가지로 같은 부모요소안의 가장 마지막 타입요소를 선택하는 가상선택자 입니다.

p:last-of-type {

font-style: italic;

margin: 50px 10px 10px 100px;

}

:only-of-type

하나의 같은 부모요소안에 단 하나의 타입요소를 선택하는 가상선택자로 반드시 부모객체에 해당 태그(타입요소)가 하나만 존재해야 합니다.

<li>

</li>

img:only-of-type{

background-color: rgb(255, 255,255);

border: 1px solid rgba(56,41,48, .5);

float: left;

padding: 3px;

}

:nth-of-type(n)

같은 부모 밑에 상대적인 순서로 n 번째 오는 타입요소를 선택합니다.

:nth-last-of-type(n)

:first-child

:last-child

Reference site

webappers.com : http://www.webappers.com/2013/03/12/css3-selectors-structural-pseudo-classes-part-1/
CSS3를 이용한 토글스위치만들기 : 요기
CSS 선택자의 종류 : http://www.clearboth.org/css3_1_by_isdn386/
O11 – Opera 11
Selector – W3C
F3.6 – Mozilla FireFox 3.6.x

보석같은 CSS3 함수 calc()

데꾸벅 — Mon, 11 Mar 2013 20:44:40 +0900

들어가기 앞서

보통 웹퍼블리싱을 하다 보면 가변적으로 변하는 페이지나 반응형 웹디자인(responsive webdesign) 시 %(percentage)로 등분할된 width값을 주기가 까다로운 것들이 존재합니다.

정확하게 나누어 떨어질 경우(예: 100% / 4 = 25%)는 크게 문제가 되지 않으나 그렇지 않을 경우(예:100% / 3 = 33.3333..%) 에는 float 속성시 퍼블리셔들의 애를 먹이곤 합니다. 이를 해결하기 위해 몇겹으로 div를 이용하여 둘러싸거나 정확히 픽셀값을 지정하여 계산한다던가, float 대신 absolute positioning으로 문제를 해결합니다.

사실 LESS나 SASS 같은 경우 이와 같은 것을 처리할때 CSS내의 함수를 이용하여 쉽게 처리할 수 있습니다. 그러나 이러한 함수를 CSS3 Spec 에서도 지원해 줄수 있는 방법이 여럿 있습니다.

아래 calc 함수 뿐만 아니라 column-count, display:table 등과 같은 방법으로 처리할 수 있으나 현재 글을 쓰고 있는 이 시점에서는 column-count보다 calc() 함수를 대부분이 많이 지원합니다.

그럼 CSS3의 보석과 같은(?) calc() 함수에 대해서 알아보도록 합시다.

calc()함수 사용하기

위에서 언급했던것 처럼 calc() 함수는 width, height, font-size, margin, padding 값의 길이를 계산할때나 각도, 수치, 변형(transition), 사운드 재생 횟수, 애니메이션 처리시 사용하는 함수 입니다. 이를 표현하기 위해서는 더하기, 빼기, 곱하기, 나누기등 사칙연산자를 이용하여 표현할 수 있습니다.

Markup

</div>

위와 같이 wrapper 클래스로 둘러싸인 3개의 div.col 태그들을 정확히 3등분 하기 위해 다음과 같이 calc()함수를 이용하여 쉽게 처리할 수 있습니다.

CSS

.wrapper .col {

width: calc(100% / 3);

padding: 0 10px;

}

조금 더 호환되게 작성하기 위해서는 vendor-prefix를 이용하여 다음과 같이 표현합니다.

.wrapper .col {

width: -webkit-calc(100% / 3);

width: -moz-calc(100% / 3);

width: calc(100% / 3);

float: left;

height: 100%;

text-align: center;

font-size: 50px;

color: #fff;

line-height: 300%;

font-weight: bold;

}

오페라 prefix를 사용하지 않은 이유는 글쓰는 현재 오페라 브라우저는 지원하지 않기 때문입니다.

현재는 IE9 이상, webkit 계열, 모질라계열이 calc()함수를 지원합니다.

전체소스

<!doctype html>

<html>

<head>

<title>CSS3 calc() function</title>

.wrapper {

width: 700px;

margin: 50px auto 0;

height: 500px;

}

.col {

width: -webkit-calc(100% / 3);

width: -moz-calc(100% / 3);

width: calc(100% / 3);

float: left;

height: 100%;

text-align: center;

font-size: 50px;

color: #fff;

line-height: 300%;

font-weight: bold;

}

.col.one {

background-color: #3b3140;

}

.col.two {

background-color: #bfb8a3;

}

.col.three {

background-color: #f2e0c9;

}

</style>

</head>

<body>

</div>

</body>

</html>

전체 너비에서 중간에 60px 만 띄우고 싶을 경우

#element1, #element2 {

float: left;

width: calc(50% - 30px);

}

#element2 {

margin-left: 60px;

}

각 요소 사이에 글꼴의 4배(4em) 만큼 간격을 두고 싶을때

#element1, #element2 {

width: calc(50% - 2em);

}

두 요소를 2px의 테두리로 둘러싸고 싶을때

#element1, #element2 {

width: calc(50% - 2em - 4px);

border: 2px solid #000;

}

복잡한 연산공식을 사용하고 싶을때

#element1, #element2 {

width: calc((50% + 2em)/2 + 14px);

}

calc()함수와 같은 CSS3의 min(), max()함수 사용법

#myelement {

width: max(300px, 30%, 30em);

font-size: min(10px, 0.6em);

}

쉼표(,)에 의해 구분되는 min, max함수도 flexible한 글꼴 처리나 responsive layout에 유용하게 사용될듯 하나 불행히도 현재는 지원하는 브라우저가 존재하지 않습니다. 차차 되겠죠... ^^*

몇가지 짚어봐야 할것들

calc()함수 사용시 유용한 몇가지 팁에 대해 알아보면..

무엇보다 모든 계산은 왼쪽에서 오른쪽으로 진행되며
사칙연산과 마찬가지로 곱하기, 나누기가 제일 먼저 연산되며
calc()함수는 현재 오페라 브라우저와 IE9 미만의 브라우저에서는 지원되지 않으며
호환성을 위해 -moz, -webkit 과 같은 vendor-prefix를 먼저 작성해야 하며
예를 들어 calc(50% - 10px) 과 같이 연산시 다른 단위값들을 사용할 수 있으며
calc(100% - 20px)과 같이 더하기(+), 빼기(-) 연산자의 경우 앞뒤 공백이 반드시 들어가야 하나 곱하기(x), 나누기(/)는 공백이 필요하지 않습니다.

현재 지원 브라우저

결론

CSS3 이전에는 항상 고정된 값을 이용하여 계산을 해 왔으나 calc()함수를 이용하여 좀더 스마트한 방법으로 처리할 수 있수 있어서 개발시 상당히 편리하게 사용될 것입니다. 다만, 지원하지 않는 브라우저에 대해서는 좀더 다양한 방법으로 호환되게 작성해야 한다는 점..... ( 귀찮니즘 !!! )

참조:

http://www.hongkiat.com/blog/css3-calc-function/
http://www.sitepoint.com/css3-calc-function/
W3C: http://www.w3.org/TR/css3-values/#calc
calc() 브라우저 지원현황 : http://caniuse.com/calc
CSS3 브라우저 지원현황 : http://www.quirksmode.org/css/contents.html
CSS 속성값들 색인 : http://meiert.com/en/indices/css-properties/

[HTML5] Progress Bar CSS입히기

데꾸벅 — Mon, 4 Mar 2013 17:09:04 +0900

<progress> 요소는 HTML5 에 새로이 추가된 시맨틱 태그입니다.

각 브라우저별로 별도로 디스플레이되는 관계로 디자인 하기가 까다로운것이 사실입니다.

이번에는 이러한 Progress 요소에 CSS를 입히는 방법에 대해서 알아보도록 하겠습니다.

그전에 디자이너라면 알아두어야할 Progress Bar 디자인 35 를 먼저 읽어 보시길 권합니다.

간단한 방법

원본: http://www.hongkiat.com/blog/html5-progress-bar/

마크업

Progress 요소는 다음과 같이 마크업을 작성합니다.

<strong>Progress : 10% </strong>

</progress>

일반적으로 위와같이 작성하였을 경우 윈도우와 OS X에서 보이는 화면은 다음과 같이 브라우저 디폴트로 저장됩니다.

굵게 표현된 부분은 Progress Bar의 fall back (대체) 요소로 사용합니다. Progress bar를 지원하지 않는 브라우저를 위한 것인것은 대부분들 다 아시죠?

스타일시트 작성

progress {

background-color: #f3f3f3;

border: 0;

height: 18px;

border-radius: 9px;

}

그러나 위와 같이 작성하여도 아래와 같이 각 브라우저별로 다르게 화면에 출력됩니다.

파이어폭스에서는 Progress Bar에 스타일은 적용되나 애니메이션이나 Progress Bar의 Value에는 스타일이 적용되지 않으며, 크롬브라우저와 사파리 브라우저는 브라우저의 기본 스타일 및 OS플랫폼의 스타일이 제거되고 Webkit Style이 적용됩니다.

웹킷계열의 브라우저에서는 위의 마크업이 다음과 같이 본연의 요소와 값 요소로 해석됩니다.

┗ <div> ::-webkit-progress-bar

┗ <div>::-webkit-progress-value

따라서 스타일시트도 다음과 같이 Progress 본연의 스타일과 Value값을 별도로 작성해 주셔야 합니다.

progress::-webkit-progress-bar {

/* style rules */

}

progress::-webkit-progress-value {

/* style rules */

}

파이어폭스의 경우에는 웹킷계열과 같게 Vendor-prefix 및 가상선택자를 사용하지만 아래와 같이 하나만 쓰는것이 다릅니다.

progress::-moz-progress-bar {

/* style rules */

}

결론적으로 Progress Bar의 스타일시트를 바꾸시려면 다음과 같이 작성합니다.

progress {

/* style rules */

}

progress::-webkit-progress-bar {

/* style rules */

}

progress::-webkit-progress-value {

/* style rules */

}

progress::-moz-progress-bar {

/* style rules */

}

애니메이션 처리

애니메이션 처리의 경우 Progress bar의 min 값과 max값을 계산하여 자바스립트로 구현합니다.

jQuery라이브러리를 이용하여 구현할 경우 다음과 같이 마크업을 작성합니다.

0에서 시작하여 max=100 까지 애니메이션을 구현합니다.

스크립트는 setInterval을 이용하여 부드러운 효과를 주기위해 (1000 / max) * 5 ms 마다 구현하도록 합니다.

$(document).ready(function() {

var progressbar = $('#progressbar'),

max = progressbar.attr('max'),

time = (1000/max)*5,

value = progressbar.val();

var loading = function() {

value += 1;

addValue = progressbar.val(value);

$('.progress-value').html(value + '%');

if (value == max) {

clearInterval(animate);

}

};

var animate = setInterval(function() {

loading();

}, time);

};

최종소스 다운로드 :

source.zip

Progress bar 지원브라우저 현황

CanIUse.com, 에 따르면 HTML5 progress 요소는 아래 브라우저에서 지원합니다: Firefox 16+, Chrome 8+, Safari 6+ and Opera 11+.

고급 CSS 먹이기

출처: http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth/

소스다운로드:

progressbar.zip

Reference Site

HTML5의 FileAPI 과 Drag and Drop, XMLHttpRequest 2 를 이용한 파일업로드, 다운로드시 유용하게 사용하시길 바랍니다. ^^*

Height 100% 2~3단 컨텐츠 레이아웃잡기

데꾸벅 — Tue, 27 Jul 2010 19:43:26 +0900

기존 100% 레이아웃잡을때 중간에 들어가는 컨텐츠를 항상 height:100% 로 표시하여 header와 footer의 높이만큼 margin-top, margin-bottom 처리하는곳에서 착안하여 Flexible한 100% layout 을 표준모드로 구현해 보았다.

지원하는 Doctype

표준모드와 비표준모드에서 모두 테스트해본 결과 잘나온다.. ^^;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html>

지원 브라우저

IE 5.5, 6,7,8,9 사파리 5.0 , 오페라 10.60, 파폭3.6 , 크롬5.0 에서 테스트 해본결과 잘나온다

2단 소스

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

* {

padding:0;

margin:0

}

html,body{

height:100%;

}

#header{

position:absolute;

top:0;left:0;

width:100%;

height:70px;

background:gray;

overflow:hidden;

}

#footer {

position:relative;

clear:both;

height:50px;

background:green;

}

#container{

min-height:100%;

margin-left:200px; /*왼쪽 영역 만큼 뛰기*/

background:blue;

margin-bottom:-50px; /*푸터height만큼 마진값*/

}

* html #container{height:100%;} /* IE7 hack*/

/*왼쪽 영역 백그라운드 처리는 body부분에서 처리*/

body {

background:yellow;

}

#left {

position:relative;

width:200px;

float:left;

margin-left:-200px;

}

#headHeight{height:70px;} /*컨텐츠영역 상단 보정(header height만큼 고정*/

#footerHeight{clear:both;height:50px;width:100%;} /*컨텐츠영역 하단 보정(footer height만큼 고정*/

#content {

position:relative;

z-index:1;

}

/* IE3pixel 버그를 위한것 */

* html #content {

height:1%;

}

</style>

</head>

<body>

왼쪽<br />

</div>

중앙 컨텐츠<br />

</div>

</div>

</body>

</html>

3단소스

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

* {

padding:0;

margin:0

}

html,body{

color: #000;

height:100%;

}

#header{

position:absolute;

top:0;left:0;

width:100%;

height:70px;

background:gray;

overflow:hidden;

}

#footer {

position:relative;

clear:both;

height:50px;

background:green;

}

#container{

min-height:100%;

margin-left:200px; /*왼쪽 영역 만큼 뛰기*/

margin-right:100px;

background:blue;

margin-bottom:-50px; /*푸터height만큼 마진값*/

}

* html #container{height:100%;} /* IE7 hack*/

/*왼쪽 영역 백그라운드 처리는 body부분에서 처리*/

body {

background:yellow;

}

#left {

position:relative;

width:200px;

float:left;

margin-left:-200px;

}

* html #left {margin-right:-3px;padding-bottom:50px}

* > html #left {padding-bottom:0}

#right {

position:relative;

width:100px;

float:right;

margin-right:-100px;

}

#headHeight{height:70px;} /*컨텐츠영역 상단 보정(header height만큼 고정*/

#footerHeight{clear:both;height:50px;width:100%;} /*컨텐츠영역 하단 보정(footer height만큼 고정*/

#content {

position:relative;

z-index:1;

}

/* IE3pixel 버그를 위한것 */

* html #content {

height:1%;

}

</style>

</head>

<body>

왼쪽<br />

</div>

오른쪽<br />

</div>

중앙 컨텐츠<br />

</div>

</div>

</body>

</html>

소스다운로드

flexible_layout.zip

참고적으로 위 방법은 쓸데없는 마크업이 많이 들어가는 이유로 개인적으로는 잘 쓰지 않는 방법입니다.
좀더 깔끔한 소스를 원하신다면.. 신현석님의 "CSS절대 위치를 사용한 프레임효과" 를 참조하세요..

간단한 CSS Reset

데꾸벅 — Mon, 24 May 2010 11:49:29 +0900

모든 브라우저마다 CSS가 동일하게 적용되는것은 아니다.

CSS Reset 기능은 이러한 각 브라우저마다 동일한 효과를 주기위해 가장 기본이 되는 CSS를 말한다.

보통 구축하는 웹페이지마다 최초 base.css 나 reset.css 를 두어 전체 웹페이지에 적용되는 CSS를 두기 마련인데 이러한 것이 CSS Reset이라고 보면 된다. 특히 웹퍼블리셔들이 여러 프로젝트를 뛰면서 축적된 경험을 바탕으로 항상 가지고 다니는 CSS들이 대부분 이러한 CSS Reset파일들이나 각 요소들, 예를 들어, 테이블, 탭, 버튼 등 프로젝트 특성을 타지 않는 CSS파일들은 어느 프로젝트나 적용시킬수 있다.

일례로 데꾸벅의 경우는 CSS Reset 파일이 항상 base.css로 만들어 놓고 @import 구문을 이용해서 사용한다.

참고적으로 많이들 사용하는 CSS Mini Reset 파일들을 공개한다.

Eric Meyer's CSS Reset
YUI Reset
Russ Weakley's CSS Reset - a simpler option
기타
emastic - CSS 프레임웍
The Golden Grid - 각 레이아웃에 대한 CSS 프레임웍 - 화면 분할 및 레이아웃관련 그리드 시스템

이외에 CSS를 인터프리터언어와 같이 프로그래밍언어처럼 사용하는 여러 CSS프레임웍들이 존재하나 아직은 많이 사용되고 있지는 않다.

Eric Meyer's CSS Reset

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, font, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-weight: inherit;

font-style: inherit;

font-size: 100%;

font-family: inherit;

vertical-align: baseline;

}

/* remember to define focus styles! */

:focus {

outline: 0;

}

body {

line-height: 1;

color: black;

background: white;

}

ol, ul {

list-style: none;

}

/* tables still need 'cellspacing="0"' in the markup */

table {

border-collapse: separate;

border-spacing: 0;

}

caption, th, td {

text-align: left;

font-weight: normal;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: "";

}

blockquote, q {

quotes: "" "";

}

YUI Reset


body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}

죽여주는(?) CSS Reset 스타일 모음

Tripoli is a generic CSS standard for HTML rendering.

This program is free software: you can redistribute it and/or modify

it under the terms of the GNU General Public License as published by

the Free Software Foundation, either version 3 of the License, or

(at your option) any later version.

This program is distributed in the hope that it will be useful,

but WITHOUT ANY WARRANTY; without even the implied warranty of

MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the

GNU General Public License for more details.

You should have received a copy of the GNU General Public License

along with this program. If not, see <http://www.gnu.org/licenses/>.

* {

text-decoration: none;

font-size: 1em;

outline: none;

padding: 0;

margin: 0;

}

code, kbd, samp, pre, tt, var, textarea,

input, select, isindex, listing, xmp, plaintext {

white-space: normal;

font-size: 1em;

font: inherit;

}

dfn, i, cite, var, address, em {

font-style: normal;

}

th, b, strong, h1, h2, h3, h4, h5, h6 {

font-weight: normal;

}

a, img, a img, iframe, form, fieldset,

abbr, acronym, object, applet, table {

border: none;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

caption, th, td, center {

vertical-align: top;

text-align: left;

}

body {

background: white;

line-height: 1;

color: black;

}

q {

quotes: "" "";

}

ul, ol, dir, menu {

list-style: none;

}

sub, sup {

vertical-align: baseline;

}

a {

color: inherit;

}

hr {

display: none;

}

font {

color: inherit !important;

font: inherit !important;

color: inherit !important; /* editor's note: necessary? */

}

marquee {

overflow: inherit !important;

-moz-binding: none;

}

blink {

text-decoration: none;

}

nobr {

white-space: normal;

}

CSS Mini Reset

html, body, ul, ol, li, form, fieldset, legend

{

margin: 0;

padding: 0;

}

h1, h2, h3, h4, h5, h6, p { margin-top: 0; }

fieldset,img { border: 0; }

legend { color: #000; }

li { list-style: none; }

sup { vertical-align: text-top; }

sub { vertical-align: text-bottom; }

table

{

border-collapse: collapse;

border-spacing: 0;

}

caption, th, td

{

text-align: left;

vertical-align: top;

font-weight: normal;

}

input, textarea, select

{

font-size: 110%;

line-height: 1.1;

}

abbr, acronym

{

border-bottom: .1em dotted;

cursor: help;

}

SVG와 CANVAS사이의 선택

데꾸벅 — Tue, 9 Mar 2010 21:45:52 +0900

HTML5에 대한 내용을 정리하기로 마음 먹으면서 하나하나씩 정리해 갑니다.

오늘은 오페라개발자센터에서 작성한 <Canvas>와 <SVG>관련 포스트를 참조하여 SVG와 Canvas태그에 대해서 알아보도록 하겠습니다.

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

HTML5 Canvas와 SVG 두 웹기술은 브라우저안에서 풍부한 그래픽을 만들어내는 것이나 이 두개는 근본적으로 서로 다릅니다. 이 포스트에서 서로 다른점에 대해서 밝혀보고, 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"을 참조하세요.

<defs>

</radialGradient>

</defs>

</ellipse>

</svg>

HTML5 Cavas

HTML5 Cavas스펙에서는 다양한 자바스크립트 드로잉 API 들을 제공합니다. <canvas>태그요소만으로 HTML페이지에 원하는 그래픽을 드로잉 할 수 있습니다. 실제로 드로잉하기 위해서는 다른 옵션을 사용합니다.

전자인 2D드로잉 컨텍스트는 IE를 제외한 최근 웹브라우저에서 지원가능합니다. 후자인 3D드로잉 컨텍스트는 아직 표준화 작업중이며 손을 봐야 할 부분들이 남아있습니다.

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

아래는 canvas를 이용한 드로잉 예제입니다.

소스다운로드 :

canvas.html

HTML5로 구현한 canvas

<!DOCTYPE html>

<head>

<title>Canvas animation example</title>

<!--

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.rar

기본적인 Canvas 를 배우시려면 오페라 개발자센터의 "HTML5 Canvas"를 참조하세요

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

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

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

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

이미지 히스토그램 소스 :

imageHistogram.rar

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)의 차이점에 대해 알아봤습니다. 각각의 기술의 강점과 단점을 있으므로 여러분은 적절하게 잘 사용하셔야 겠죠. 종종 이러한 하나의 웹애플리케이션에 두개의 기술을 적절히 혼합하면 좋은 결과를 수확할수도 있습니다.

CSS 최적화 기법

데꾸벅 — Mon, 8 Mar 2010 01:25:10 +0900

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

그래서 아래 몇가지 CSS 를 최적화 할수 있는 방법을 소개한다.

1. CSS 를 구조화하라

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

마크업

<html>

</html>

기본.CSS

@charset "UTF-8"

@import url("base.css"); /*CSS Reset & overrides*/

@import url("table.css"); /* table관련속성*/

@import ulr("link.css"); /* 링크관련 속성*/

와 같이 구성하거나 기본 base.css에서 다음과 같이 작성한다. 먼저

CSS Resets 이나 overrid된 속성들
Link 와 type
Main layout
Sub layout structures
Form 요소
기타

과 같은 순서대로 구성한다.

/*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 를 제거했을때도 문서의 흐름과 마크업만으로도 의미 전달을 할 수 있어야 한다. 이런 점에서 국내의 현실이 안타깝기 그지 없다.

지금 바로 쓸수 있는 CSS3

데꾸벅 — Sun, 7 Mar 2010 22:24:20 +0900

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 이상

css3_sample.zip

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 에 대한 흥미로운 포스트가 있어 소개합니다.

Future of CSS

Firefox에서 링크 점선 없애기

데꾸벅 — Sat, 6 Mar 2010 02:49:36 +0900

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

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

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

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;

}

샘플파일

test.html

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

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

인터넷 익스플로러 버그 95가지

데꾸벅 — Tue, 2 Mar 2010 14:26:33 +0900

http://www.gtalbot.org/BrowserBugsSection/MSIE6Bugs/

폰트버그

http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/EM-font-resizing-bug.html

http://www.gunlaug.no/contents/wd_additions_13.html

HTML5

데꾸벅 — Tue, 2 Mar 2010 14:26:10 +0900

HTML5 강의자료입니다.

웹표준 관련 추천책

웹표준교과서

CSS 마스터전략

실용예제로 배우는 웹표준

웹2.0을 이끄는 방탄웹

웹표준 Ajax DOM 스크립팅

For Presentation Developer

For UI/UX

For Web Publisher

For Javascript & Ajax Integrator

For FLEXer

Flex3 in Action(Manning)
Adobe FLEX3 실전트레이닝북(위키북스)
ActionScript3.0 Cookbook(한빛미디어)
Programming Flex3 : RIA개발을 위한 완벽가이드(ITC)
비주얼 플렉스 UX 디자인(에이콘)

etc & Misc

offsetParent의 모든것!

데꾸벅 — Thu, 4 Feb 2010 13:54:47 +0900

이전에 getBoundingClientRect()에 대해서 포스팅한적이 있다. 이 함수는 객체의 페이지내의 위치값과 너비, 높이값을 반환한다. 편리하게 사용했었는데 오늘 역시 이부분을 짚고 넘어가야할 문제에 봉착했다.

기존에 데꾸벅이 2002년도에 제작해 지금껏 수정하면서 써오고 있는 캘린더가 IE8에서 동작하지 않는것이다. 문제는 각 브라우저에서 객체의 offsetParent 값을 계산하는 방법이 틀려서 생긴 문제였다. 특히 IE8....

처음에는 body를 못찾는 문제인줄 알았는데 IE에서의 객체 위치값을 표현하는 offsetParent값에 문제가 있다는 것을 알게되었다. 관련내용을 찾다가 아주 좋은 글을 발견(?)하여 포스팅한다.

아래는 HappyFriday님의 글을 인용한것임을 밝힌다.

언제나 그렇지만 항상 IE가 문제다.
크로싱을 위한 최고의 난적은 대부분 IE이다. 일단 offsetParent는 무엇일까? 말그대로 현재 대상 엘리먼트를 transform 하는 상위 엘리먼트를 참조하는 속성이다. 일반적으로 parentNode와는 다른 개념으로 이것은 concatenate 가 적용되는 부모 엘리먼트에만 유효하기 때문에...꼭 대상 엘리먼트의 상위엘리먼트를 의미하지는 않는다.
일반적으로 이 속성에 대한 설명이 자식을 offset하는 엘리먼트라고 나와있는데.. 이해하기가 난해하므로... 자식엘리먼트의 위치에 영향을 미치는 상위 엘리먼트를 치칭 하는것으로 이해하면 되겠다.
그렇다면 자식엘리먼트에 영향을 미친다는건 무엇일까? 바로 position 속성이다. 모든 엘리먼트의 position속성은 기본이 static이다. 즉 정적상태를 유지하는것... 따라서 position이 relative / absolute가 되었을때 바로 자식엘리먼트에 영향을(좌표상으로) 미치게 됨으로offsetParent를 반환하는 대상 엘리먼트는 반드시 position이 relative나 absolute가 되어야 한다.
즉 수식으로는 getStyle(obj, 'position) != 'static' 으로 표현될 수 있다.

일반적으로 offsetParent가 많이 사용되는 부분은 대상엘리먼트를 글로벌 좌표포지션으로 변환한 후 이값을 활용하는 곳들이다.
그런데..IE브라우져(ie8 이하)의 경우 상위 엘리먼트의 position이 'relative' 일때 자신의 offsetLeft가 0이 되어야 하는데 디폴트로 최상위 엘리먼트의 padding (paddingLeft/paddingTop)값을 취하도록 설계되어 있다. 이해를 돕기 위해서 다음 코드를 보자.

위의 노드중 d의 입장에서는 부모 position이 relative이기 때문에 당연 자신의 offsetLeft는 0이어야 한다.
왜냐면 상대경로로 다시 초기화 되었으니..부모입장에서 padding값이 들어간게 아니니까... 만약 부모의 position이 relative가 아니면 그제서야 부모 offsetParent가 static이 됨으로 그때는 자신이 30의 값을 가져야 한다. 그런데 IE7는 무조건 30의 값을 가지고 시작한다. 즉 최상위 a의padding(padding-left)이 30임으로 그값에 영향을 받아서 표시를 하게된다. 바로 이게 문제다. 이 문제로 인해 최종 글로벌 포지션의 left는30이어야 함에도 불구하고 60이 되어버린다. 결국 이중값이 들어간다는 말이다.
따라서 IE7의 경우에는 바로 이 최상위 엘리먼트, 즉 body바로 밑의 엘리먼트를 구한후 (이것은 해당 엘리먼트가 position이 relative나absolute가 아닌경우 반환하지 않으므로) 해당 엘리먼트의 padding값을 빼줘야 한다.

참고적으로 캘린더 소스 :
(이미 다른 자바스크립트 라이브러리를 사용하는 중이라.. 별~)

nexCalendar.js

CSS로 만든 3D입체 이미지

데꾸벅 — Thu, 31 Dec 2009 13:11:45 +0900

오늘자 ajaxian을 보다가 굉장한 CSS 애니메이션을 보게되서 함 분석해 봅니다.

이미지 3개와 background-position프로퍼티와 :hover 가상클래스를 사용하여 3D입체 이미지를 구현했군요~

고생꽤나했을듯~ ㅠ.,ㅠ; 이런거 보면 대단하다 보다는 고생이 먼저 떠오르는 이유는 뭘까요?

iframe을 지원하지 않습니다.

사용한 이미지

사용된소스 : 원본

원본소스다운로드 :

test.rar

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

원본출처 : http://www.cssplay.co.uk/menu/streaker

위 영역에 마우스를 올려보세요 ^^

이전에 포스팅한 CSS Sprites에서도 언급한 CSS background-position을 이용한 애니메이션입니다

사용된 이미지

소스

동적 호스트도메인 사용하기 (apache2+tomcat6.0)

데꾸벅 — Tue, 22 Dec 2009 13:38:23 +0900

멀티도메인(여기서는 호스트도메인)이 가능하게 아파치와 톰캣연동을 하려한다.

예를 들어 aaa.techbug.com 과 bbb.techbug.com 으로 들어와도 톰캣의 하나의 컨텍스트로 넘어오게 하기 위한 목적으로 서버 셋팅을 해야한다.

PHP라면 간단한 일이 되겠지만 톰캣과의 연동을 하려니 상당히 어려운 점이 많다.

팀원(병규야 수고했다..그리고 미안하다.. ^^) 을 시켜 셋팅한 것이지만.. 공유하려 한다.

설정

aaa.techbug.com ---> http://로컬머신/techbug

bbb.techbug.com ---> http://로컬머신/techbug

환경

Ubuntu10 + Apache2 + Tomcat6.0

필요한 모듈 :

mod_proxy,

mod_proxy_balancer,

mod_proxy_http

mod_proxy_html, mod_rewrite

모듈 설치 :

apt-get install libapache2-mod-proxy-html libxml2

설치 모듈을 enable상태로 변경

/etc/apache2/mods-avaliable 에서 확인

a2enmod를 이용한 아파치모듈 활성화

a2enmod proxy,

a2enmod proxy_html,

a2enmod proxy_balancer,

a2enmod rewite,

a2enmod proxy_http

활성화 여부 확인 : /etc/apache2/mods/mods_enables

Apache2 환경설정

1.VirtualHost 등록

/etc/apache2/sites-enabled/000-default에서 VirtualHost를 등록한다

2. 아파치 재시작 :

/etc/init.d/apache2 restart

3. 톰캣 시작(톰캣에 techbug이름으로 프로젝트가 배포되어 있다고 가정)

ServerName techbug.com

ServerAlias techbug.com *.techbug.com

proxyRequests Off

proxyPreserveHost On

<Proxy *>

Order deny,allow

Allow from all

</Proxy>

ProxyPass / http://localhost:8080/techbug/

ProxyPassReverse / /http://localhost:8080/techbug/

</VirtualHost>

http://aaa.techbug.com 입력하고 제대로 나오는지 확인하다

ProxyPass 에 설정 한 대로 톰캣의 주소로 이동하게 되고 index.jsp 가 가장 먼저 읽어진다

Mod_Proxy 설정 정보

ProxyPass를 사용하여 특정 디렉토리를 톰캣에서 처리

ProxyPass /admin/http://localhost:8080/techbug

ProxyPass /user/http://localhost:8080/techbug

ProxyPassMatch : ProxyPassMatch를 이용하여 특정 확장자를 가진 파일을 톰캣에서 처리

ProxyPassMatch ^/.*\.(jsp|do|action)$ http://localhostL8080/

LocationMathch : LocationMathch를 사용하여 접근보안 문제 해결

deny all

</Location>

Tomcat : web.xml

톰캣에서는 별다른 설정은 하지 않고 데이타리소스만 정리하였다.

<Resource name="UserDatabase" auth="Container"

type="org.apache.catalina.UserDatabase"

description="User database that can be updated and saved"

factory="org.apache.catalina.users.MemoryUserDatabaseFactory"

pathname="conf/tomcat-users.xml" />

<Resource name="jdbc/NEXFA_DS"

auth="Container"

type="javax.sql.DataSource"

username="유저네임"

password="패쓰워드"

driverClassName="com.mysql.jdbc.Driver"

url="jdbc:mysql://localhost:3306/techbugdb"/>

</GlobalNamingResources>

<Host name="localhost" appBase="webapps"

unpackWARs="true" autoDeploy="true"

xmlValidation="false" xmlNamespaceAware="false">

<Resource name="jdbc/TECHBUG_DS"

auth="Container"

type="javax.sql.DataSource"

driverClassName="com.mysql.jdbc.Driver"

username="유저네임"

password="패스워드"

url="jdbc:mysql://localhost:3306/techbugdb"/>

</Context>

</Host>

www가 안붙은 URL을 자동으로 붙이기

techbug.com 이라는 도메인을 주소창에 입력하였을 때 자동으로 www.techbug.com 으로 접속 시키는 방법이다.

ServerName techbug.com

ServerAlias www.techbug.com

DocumentRoot /home/techbug/public_html/

ErrorLog logs/error_log

CustomLog logs/sinvi-access_log combined env=!nosave

</VirtualHost>

이라는 가상 호스트 구문이 있을것이다. www 를 자동으로 붙이는 방법은 간단하다.위의 구문아래에 똑같은 구문을 복사하여 붙여 넣는다.

ServerName techbug.com

ServerAlias www.techbug.com

DocumentRoot /home/techbug/public_html/

ErrorLog logs/error_log

CustomLog logs/sinvi-access_log combined env=!nosave

</VirtualHost>

ServerName techbug.com

ServerAlias www.techbug.com

DocumentRoot /home/techbug/public_html/

ErrorLog logs/error_log

CustomLog logs/sinvi-access_log combined env=!nosave

</VirtualHost>

와 같이 될것이다. 이상태에서 아래와 같이 몇가지만 바꿔준다.

ServerName techbug.com

#ServerAlias www.techbug.com <=== 주석처리

RedirectMatch /(.*)$ http://www.techbug.com/$1 <==== 삽입

DocumentRoot /home/techbug/public_html/

ErrorLog logs/error_log

CustomLog logs/sinvi-access_log combined env=!nosave

</VirtualHost>

ServerName www.techbug.com <=== www 사이트 명시

#ServerAlias www.techbug.com <=== 주석처리

DocumentRoot /home/techbug/public_html/

ErrorLog logs/error_log

CustomLog logs/sinvi-access_log combined env=!nosave

</VirtualHost>

설명을 하자면 같은 페이지를 보여주되 접속 도메인은 개별화 시킨 것이다. 다시 말해, techbug.com을 주소창에 입력하게 되면, 우선은 윗쪽 가상호스트 설정에 의해 접속하게 되고, RedirectMatch /(.*)$ http://www.techbug.com/$1 행에 의해 다시 두번째 가상호스트 설정인 www.techbug.com 으로 접속하게 되는것이다.

마지막의 $1의 역할은 techbug.com/xxxxx/xxxx/xxxx...등의 x로 표시된 모든 문자를 $1로 치환하여 www를 붙인 www.techbug.com 도메인 뒤에 다시 반환해주는 역할을 한다.

즉, techbug.com 도메인의 메인 페이지 뿐만 아니라, 하위의 모든 페이지에 www가 붙게 되는것이다

참고 :

[Apache.org] 대량의 가상호스트 동적으로 설정하기

내 웹사이트의 속도를 빠르게!

데꾸벅 — Mon, 14 Dec 2009 19:53:36 +0900

처음 이바닥에 발을 들여놓은지 어언~ 십수년이 지나갑니다. 그러나 그때나 지금이나 웹페이지의 성능향상은 언제나 중요하게 생각되고 있습니다.

어느분이 방명록에 의뢰한 내용이 있어서 찾아보다가 우연히 찾게된 야후! 개발자 센터에서 정의한 웹사이트 최적화 방법입니다. 필요할것 같아 잠시 정리해봅니다.

참고적으로 이곳에서 더글라스 크록포트아저씨의 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은 이러한 기능을 지원하지 않는다.

프로젝트 관리자가 알아야할 97가지 사실

데꾸벅 — Tue, 8 Dec 2009 20:14:26 +0900

데꾸벅이 기거(?)하고 있는 회사에서 팀장들을 대상으로 아래 책(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장의 분량으로 편집됩니다.

우분투에 설치된 MySQL 접속

데꾸벅 — Tue, 8 Dec 2009 20:08:30 +0900

팀원이 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을 다시 실행하면 접속이 잘 된다..

보안상 특정아이피만 접근하도록 설정한거란다..

아무튼 다른분들은 삽질 하지 마시길..

자바스크립트 delete 연산자에 대한 고찰

데꾸벅 — Wed, 18 Nov 2009 00:21:34 +0900

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에서 메모리를 해제하게끔 만들어야 한다.

참조사이트 :

Mozillia Developement Center : Javascript delete operator
IE 메모리누수와 가비지컬렉션 : Douglas Crockfod, 행복한고니님의 블로그
브라우저에서 자바스크립트의 메모리관리(Mark and Sweep)

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;
}

CSS 이용한 Text를 이미지로 대체하기

데꾸벅 — Mon, 16 Nov 2009 09:30:52 +0900

요즘 부쩍 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:

<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로 작게 만들어서 사용한다. 단점으로는 글자색과 배경색이 다르면 아주 작게라도 나타난다는 문제점이 있다.

사족

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

Ext js 틀고정 그리드

데꾸벅 — Sun, 15 Nov 2009 18:19:52 +0900

국내환경에서 Ajax Library/Framework에서만 제공하는 기본 컴포넌트/위젯으로는 어려운 경우가 많은데 오늘 우연찮게 블로그 유입경로를 보다가 유난히 틀고정 그리드를 찾는 분들이 많아 포스팅한다.

Ext js 의 포럼글에서 우연찮게 찾아 북마킹해 놓은 것이 있어 공개한다. 아래 소스를 조금 수정하여 열고정, 행고정이 되는 그리드 컴포넌트를 만들어 보는것도 좋을듯....

Markup

<head>

<link rel="stylesheet" type="text/css" href="columnLock.css" />

<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 이상

LockingGridPanel-1.7.1.rar

Ext js 2.1~ 2.2 버전

LockingGridPanel_update5.zip

2010년 유행할 웹디자인 트렌드

데꾸벅 — Wed, 11 Nov 2009 23:36:21 +0900

미래를 예측한다는 것은 상당히 힘든일이다.

이 분야 일을 시작한지 어언 십수년이 지나가지만 자신만의 스타일을 고수하기 보다는 매년 트렌드를 따라 작업하다 보니 이런 것을 챙기지 않으면 트렌드를 따라가지 못한다는 강박관념(?)이 생겨버렸다. 트렌드를 쫓다보면 트렌드를 따라가지 못한다는 느낌이 많이 든다.

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

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

http://www.elysiumburns.com/

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/

CSS Float속성의 모든것 (All About Floats)

데꾸벅 — Sat, 7 Nov 2009 00:49:52 +0900

웹표준으로 개발하다보면 가장 큰 문제가 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

화면전체 배경이미지인 웹사이트 만들기

데꾸벅 — Wed, 4 Nov 2009 21:13:51 +0900

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

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

최종소스

최종.zip

원본출처 : CSS-Tricks

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

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

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

Technique #1

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

마크업






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;
}

IE8 웹조각(Web Slice) 만들기

데꾸벅 — Mon, 2 Nov 2009 17:09:34 +0900

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

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

최종 HTML소스

webSlice.rar

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

웹조각 추가하기

실제 적용예

웹조각 삭제하기

원본소스 나갑니다.

<div id="bugslice" class="hslice">
    <div class="entry-title">데꾸벅 웹조각 테스트 제목</div>
    <div class="entry-content">
         웹조각 내용이 들어가는곳입니다.<br />
         .entry-title을 display:none이나 화면에 필요한걸로 바꾸면 되겠죠<br />
         
         아이디값은 나중에 버튼으로 추가하려면 좋아요~
        </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>

이벤트핸들러로 달기

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)을 바꾸는 방법과 마찬가지로 아래와 같은 방법으로 바꿀수 있습니다.

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

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

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

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

다음글도 참조하세요 :

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

포토샵 액션 모음

데꾸벅 — Fri, 30 Oct 2009 20:32:30 +0900

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

deviantART Photoshop actions

원본 : Visual-Blast

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

photo-box.zip

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

Smooth skin.zip

- 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 -

Upd_Very_Vintage_6_by_Jenny.atn

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

다른 액션들

more Shutter Freaks Free Actions

Addicted to Design

Atncentral

Elated ActionKits

Mayhem Studios

웹디자인시 칼라선택하기

데꾸벅 — Sun, 18 Oct 2009 21:55:15 +0900

간만에 포스팅인것 같다! 네트웍이 되지 않은곳에 오래동안 프로젝트를 뛰다 보니 포스팅이 뜸하다!

간만에 맞는 한가한 주말에 포스팅해본다.

----

많은 웹디자이너가 디자인할때 가장 곤혹스러워 하는 부분이 칼라선택이다.

한 사이트의 칼라스키마는 사이트의 전체적인 느낌뿐만아니라 방문자에게도 가장 큰 영향을 줄 수 있는 요소다.

한 프로젝트에서도 올바른 칼라스키마를 찾는 방법은 수없이 많다. 이번 포스팅에서 여러가지 방법들을 살펴볼것이다.

고객의 자산에서 칼라 수집하기

이미 고객들은 자신들의 마케팅자료나 웹사이트로부터 자신들만의 칼라스키마를 가지고 있다.

어떤 경우, 고객들은 자신의 칼라를 바꿔주길 원하나 디자이너 대부분은 기존의 칼라 스키마를 가지고 작업에 활용하기를 원한다. 때때로 기본 칼라의 작은 변화가 영향을 주기도 하며 참신한 웹사이트 디자인을 그들의 회사이미지(identity)를 추가함으로써 작은 변화를 꾀하기도 한다.

만일 자신만의 칼라스키마가 없는 고객들과 함께 일할 경우는 아래 웹사이트를 참조하여 자신만의 올바른 칼라선택법을 가져보는것도 괜찮을듯 싶다.

온라인 칼라팔레트 리소스

아래는 칼라팔렛트를 선택할수 있는 온라인 툴들과 웹사이트들이다. 자신의 칼라 팔레트를 업로드하고 함께 공유하는 사이트는 많이 있다.

Adobe Kuler

COLOURlovers

ColorSchemer

ColoRotate

Others:

Copaso

Color Scheme Designer

Toucan

ColorMunki

The Color Wizard

Color Explorer

사진으로 부터 칼라축출하기

칼라소스에 가장 큰 영감을 주는것은 사진이다.

ColorSuckr

Pictaculous

What’s Its Color?

Others:

잡지나 인쇄물에서 칼라 축출하기

온라인소스는 단지 칼라스키마를 찾기위한 곳이 아니다. 잡지나 서적, 포스터, 브로슈어, 카드, 인쇄물 또한 칼라 선택하는 또다른 리소스이다.

웹디자인갤러리

웹에서 작업하기 가장좋은 칼라스키마를 찾는 방법중의 하나는 디자인갤러리를 통한 방법이다. 물론 좋은것이 특정 프로젝트에서 필요한것이 아닐지라도 종종 몇개의 칼라는 여러분의작업에 많은 아이디어를 제공할것이다.

inspired by other sites.

I Like Your Colors 은 URL을 입력하는것만으로 사용된 칼라의 헥사값을 축출해준다.

기본 칼라철학

칼라를 선택할때 고려해야할 한가지 요소가 바로 칼라철학이다. 아래는 칼라철학과 관련된 기사와 온라인 리소스목록이다.

자연에서 칼라축출하기

칼라는 자연에서 어디에서나 존재한다. 한발짝만 떨어져 주위를 돌아보면 여러분은 어디에서는 칼라에 대한 영감을 얻을수 있다. 항상 좋은 눈을 갖기를 원하며...

원본 출처 : VandelayDesign

32가지 환상적인 사진합성 디자인사이트

데꾸벅 — Thu, 7 May 2009 10:19:25 +0900

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

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

사이트바로가기

Ext.Updater 깜빡거림 방지

데꾸벅 — Wed, 6 May 2009 20:07:14 +0900

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>

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

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 에서 테스트결과

화면 가득 BG이미지 사용 웹디자인

데꾸벅 — Wed, 6 May 2009 13:43:43 +0900

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

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

Lanbruk’s Gunyah

Pixel Image

The Circumference

Not Your Average Joe

Montel Media Group

Hellenic Holidays

Elite Pre-Vestibular

Roar

August

NOFRKS Design Studio

BH Eurosong

Get London Reading

Longfellow Ranches

Beautiful Website Footer Design

데꾸벅 — Mon, 4 May 2009 17:31:34 +0900

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