블로그 이미지

카테고리

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

최근에 올라온 글

최근에 달린 댓글

'Publisher'에 해당되는 글 39건

  1. 2013.03.21 CSS3의 구조적인 가상선택자 1
  2. 2013.03.11 보석같은 CSS3 함수 calc() 3
  3. 2013.03.04 [HTML5] Progress Bar CSS입히기 2
  4. 2010.07.27 Height 100% 2~3단 컨텐츠 레이아웃잡기 18
  5. 2010.05.24 간단한 CSS Reset 4
  6. 2010.03.09 SVG와 CANVAS사이의 선택 16
  7. 2010.03.08 CSS 최적화 기법 7
  8. 2010.03.07 지금 바로 쓸수 있는 CSS3
  9. 2010.03.06 Firefox에서 링크 점선 없애기 2
  10. 2010.03.02 인터넷 익스플로러 버그 95가지
  11. 2009.12.31 CSS로 만든 3D입체 이미지 6
  12. 2009.12.14 내 웹사이트의 속도를 빠르게! 3
  13. 2009.11.16 CSS 이용한 Text를 이미지로 대체하기 3
  14. 2009.11.07 CSS Float속성의 모든것 (All About Floats) 18
  15. 2009.11.04 화면전체 배경이미지인 웹사이트 만들기
  16. 2009.11.02 IE8 웹조각(Web Slice) 만들기 5
  17. 2009.04.28 CSS로 Table 디자인 하기 15
  18. 2009.04.27 CSS Hack in IE8 9
  19. 2009.04.15 웹표준 UI/UX 그리고 프리젠테이션
  20. 2009.04.10 HTML5 Gallery 4
  21. 2009.01.12 Web 2008 통계
  22. 2008.12.14 Chap03. XForms Namespace
  23. 2008.12.14 Chap02. XForms Model
  24. 2008.12.13 Chap01. XForms 소개
  25. 2008.09.08 safari 및 google Chrome에서의 Fieldset CSS버그 2
  26. 2008.09.03 구글크롬 테스트 및 브라우저버전체크 스크립트 6
  27. 2008.08.19 웹페이지 소스보기 금지
  28. 2008.08.13 PNG(setPNG)를 이용시 이미지 토글 이벤트 먹는 경우 2
  29. 2008.08.02 CSS Hack(핵) 정리 및 IE6,7,FF3 CSS맞추기
  30. 2008.07.30 IE,Opera,Safari에서도 Firebug를 쓰자 2


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

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


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


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

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



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>

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





가상선택자 문법

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


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

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

    <title>타이틀</title>

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

        <p>2013-01-01</p>

        <p><a href="#">T-Dog</a></p>

        <p>dog dog dog dog </p>

    </li>

    <li>

        <p>2013-01-01</p>

        <p><a href="#">R-Cat</a></p>

        <p>cat cat cat cat </p>

    </li>

    <li>

        <p>2013-01-01</p>

        <p><a href="#">S-Pig</a></p>

        <p>pig pig pig pig </p>

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

    <p>2013-01-01</p>

    <p><a href="#"><img src="pig.jpg" alt="pig" /></a></p>

    <p>pig pig pig pig </p>

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














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

보석같은 CSS3 함수 calc()  (3) 2013.03.11
Height 100% 2~3단 컨텐츠 레이아웃잡기  (18) 2010.07.27
간단한 CSS Reset  (4) 2010.05.24
CSS 최적화 기법  (7) 2010.03.08
지금 바로 쓸수 있는 CSS3  (0) 2010.03.07
Post by 넥스트리소프트 데꾸벅(techbug)
, |



들어가기 앞서


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

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

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

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


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





calc()함수 사용하기


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


Markup

<div class="wrapper">

<div class="col one">A</div>

<div class="col two">B</div>

<div class="col three">C</div>

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


<style type="text/css">

.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 class="wrapper">

<div class="col one">A</div>

<div class="col two">B</div>

<div class="col three">C</div>

</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()함수를 이용하여 좀더 스마트한 방법으로 처리할 수 있수 있어서 개발시 상당히 편리하게 사용될 것입니다. 다만, 지원하지 않는 브라우저에 대해서는 좀더 다양한 방법으로 호환되게 작성해야 한다는 점.....  ( 귀찮니즘 !!! )



참조: 





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

CSS3의 구조적인 가상선택자  (1) 2013.03.21
Height 100% 2~3단 컨텐츠 레이아웃잡기  (18) 2010.07.27
간단한 CSS Reset  (4) 2010.05.24
CSS 최적화 기법  (7) 2010.03.08
지금 바로 쓸수 있는 CSS3  (0) 2010.03.07
Post by 넥스트리소프트 데꾸벅(techbug)
, |





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

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

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


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



간단한 방법

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



마크업

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


<progress value="10" max="100">

     <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이 적용됩니다.


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

<progress>  

    ┗ <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 까지 애니메이션을 구현합니다.


<progress id="progressbar" value="0" max="100"></progress>  


스크립트는 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 를 이용한 파일업로드, 다운로드시 유용하게 사용하시길 바랍니다. ^^*





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

SVG와 CANVAS사이의 선택  (16) 2010.03.09
HTML5 Gallery  (4) 2009.04.10
웹페이지 소스보기 금지  (0) 2008.08.19
Post by 넥스트리소프트 데꾸벅(techbug)
, |


기존 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 에서 테스트 해본결과 잘나온다
01234567





2단 소스

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="ko" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>데꾸벅 테스트</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<style type="text/css">

* {
    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>
<!-- header s -->
<div id="header">헤더영역</div>
<!-- header e -->


<!-- 메인 컨텐츠 영역 래퍼 s -->
<div id="container">
    <div id="headHeight"><!-- 상단고정영역 --></div>

    <!-- 왼쪽 s -->
    <div id="left">
        왼쪽<br />
        왼쪽<br />
        왼쪽<br />
    </div>
    <!-- 왼쪽 e -->

    <!-- 중앙 컨텐츠 s -->
    <div id="content">
        중앙 컨텐츠<br />
        중앙 컨텐츠<br />
        중앙 컨텐츠<br />
        중앙 컨텐츠<br />
    </div>
    <!-- 중앙 컨텐츠 e -->


    <div id="footerHeight"><!-- 하단고정영역 --></div>
</div>
<!-- 메인 컨텐츠 영역 래퍼 s -->


<!-- footer s -->
<div id="footer">푸터영역</div>
<!-- footer e -->

</body>
</html>





3단소스
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="ko" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>데꾸벅 테스트</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<style type="text/css">

* {
    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>
<!-- header s -->
<div id="header">헤더영역</div>
<!-- header e -->


<!-- 메인 컨텐츠 영역 래퍼 s -->
<div id="container">
    <div id="headHeight"><!-- 상단고정영역 --></div>

    <!-- 왼쪽 s -->
    <div id="left">
        왼쪽<br />
        왼쪽<br />
        왼쪽<br />
    </div>
    <!-- 왼쪽 e -->

    <!-- 오른쪽 s -->
    <div id="right">
        오른쪽<br />
        오른쪽<br />
        오른쪽<br />
    </div>
    <!-- 오른쪽 e -->

    <!-- 중앙 컨텐츠 s -->
    <div id="content">
        중앙 컨텐츠<br />
        중앙 컨텐츠<br />
        중앙 컨텐츠<br />
        중앙 컨텐츠<br />
    </div>
    <!-- 중앙 컨텐츠 e -->


    <div id="footerHeight"><!-- 하단고정영역 --></div>
</div>
<!-- 메인 컨텐츠 영역 래퍼 s -->


<!-- footer s -->
<div id="footer">푸터영역</div>
<!-- footer e -->

</body>
</html>



소스다운로드


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








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

CSS3의 구조적인 가상선택자  (1) 2013.03.21
보석같은 CSS3 함수 calc()  (3) 2013.03.11
간단한 CSS Reset  (4) 2010.05.24
CSS 최적화 기법  (7) 2010.03.08
지금 바로 쓸수 있는 CSS3  (0) 2010.03.07
Post by 넥스트리소프트 데꾸벅(techbug)
, |

간단한 CSS Reset

Publisher/CSS / 2010. 5. 24. 11:49


모든 브라우저마다 CSS가 동일하게 적용되는것은 아니다.
CSS Reset 기능은 이러한 각 브라우저마다 동일한 효과를 주기위해 가장 기본이 되는 CSS를 말한다.
보통 구축하는 웹페이지마다 최초 base.css 나  reset.css 를 두어 전체 웹페이지에 적용되는 CSS를 두기 마련인데 이러한 것이 CSS Reset이라고 보면 된다. 특히 웹퍼블리셔들이 여러 프로젝트를 뛰면서 축적된 경험을 바탕으로 항상 가지고 다니는 CSS들이 대부분 이러한 CSS Reset파일들이나 각 요소들, 예를 들어, 테이블, 탭, 버튼 등 프로젝트 특성을 타지 않는 CSS파일들은 어느 프로젝트나 적용시킬수 있다.
일례로 데꾸벅의 경우는 CSS Reset 파일이 항상 base.css로 만들어 놓고 @import 구문을 이용해서 사용한다. 

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





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


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




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




/*
    Tripoli is a generic CSS standard for HTML rendering. 
    Copyright (C) 2007  David Hellsing

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



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




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

보석같은 CSS3 함수 calc()  (3) 2013.03.11
Height 100% 2~3단 컨텐츠 레이아웃잡기  (18) 2010.07.27
CSS 최적화 기법  (7) 2010.03.08
지금 바로 쓸수 있는 CSS3  (0) 2010.03.07
Firefox에서 링크 점선 없애기  (2) 2010.03.06
Post by 넥스트리소프트 데꾸벅(techbug)
, |



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



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

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




SVG (Scalable Vector Graphics)

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

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

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



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




HTML5 Cavas

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

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

소스다운로드 : 

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


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

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


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

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


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

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

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







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


이미지 히스토그램 소스 : 

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





SVG와 Canvas 비교

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

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


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



어떤것을 선택할 것인가?

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

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

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

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

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




요약 

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























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

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

CSS 최적화 기법

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



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





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

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

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

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

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


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


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



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



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


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




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

  - 칼라 견본 -

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

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


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



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





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



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



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

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

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



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

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




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



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



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



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



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



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



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














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

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




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

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

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



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




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

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


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

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

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





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

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



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

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

CSS3

Mozilla

WebKit

border-top-right-radius

-moz-border-radius-topright

-webkit-border-top-right-radius

border-bottom-right-radius

-moz-border-radius-bottomright

-webkit-border-bottom-right-radius

border-bottom-left-radius

-moz-border-radius-bottomleft

-webkit-border-bottom-left-radius

border-top-left-radius

-moz-border-radius-topleft

-webkit-border-top-left-radius

border-radius

-moz-border-radius

-webkit-border-radius








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

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

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


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

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





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






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

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

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

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



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





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

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

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





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

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


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






정리하자면

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

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


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

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


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


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


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


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

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

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



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

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

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

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


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

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

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

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


샘플파일 


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

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






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

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


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


사용한 이미지

사용된소스 : 원본



 
 
 
 
 
 
 
 
 
 
 

	
  
원본소스다운로드 : 





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

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


사용된 이미지

소스






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




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



 

HTTP Request를 최소화하라!

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

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

파일 묶기(Combined Files)

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

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

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

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

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

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




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

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


 

Gzip 컴포넌트 사용

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


스타일시트는 최상위에

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



스크립트는 맨 밑에

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

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

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



CSS Expressions 피하기

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



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

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



DNS Lookup을 줄여라

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

 

 


프레임수를 최소화하라

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

<iframe> 써야 되는 이유:

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

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

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

 


 

DOM접근을 최소화하라

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

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


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

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

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

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

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



Filter사용을 피하라!

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

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



이미지를 최적화하라!

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

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



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

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



CSS Sprites를 사용하라

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

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

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

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

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

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

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

div#sidebar div#badges ul li {

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

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

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

출처 : 미남이's Blog




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

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

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


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

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



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

(Pack Compoents into a Multipart Docuement)

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







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


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


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


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


CSS기능을 사용한 CSSZengarden 




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







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

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

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

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

2. 새로운 방법

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

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

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


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



Technique #1

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


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



Technique #2

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


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

 


Technique #3

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


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



Technique #4

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


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


 

Technique #5

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


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

 



Technique #6

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

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

 


Technique #7

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


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

 

Technique #8

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


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



Technique #9

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


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



사족

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


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



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






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



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

 

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

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

#sidebar {
   float: right;
}

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

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


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

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




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

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

#footer {
   clear: both;
}

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


겹침문제

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


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

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

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

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

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


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



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

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

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

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

그외 참조

원본출처 : CSS-TRICK





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

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


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

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

최종소스


원본출처  : 
CSS-Tricks


 

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

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

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



Technique #1

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

마크업

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

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

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

#bg {

    position: fixed;
}

#bg div {

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

#bg td {

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

#bg img {

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

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

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

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

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


Technique #2

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

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

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

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

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

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

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

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






 

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


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

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


최종 HTML소스


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





웹조각 추가하기



실제 적용예



웹조각 삭제하기




원본소스 나갑니다.

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


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











이벤트핸들러로 달기

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


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

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


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

Feed용

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

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


북마크용

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



웹조각 아이콘 바꾸기


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

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




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

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



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

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











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











다음글도 참조하세요 :




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









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


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

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

[마크업]

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




[CSS]

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

 

소스다운로드 :




















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

CSS Hack in IE8

Publisher/CSS / 2009. 4. 27. 11:20


유입경로를 분석하다가 IE8용 CSS Hack을 찾는 분들이 많아 정리합니다.
지난 포스트(CSS Hack을 정리)에 이어 Full-Browsing을 위해서 아래와 같이 몇가지만 알면 CSS-Hack에 대한 모든것을 아실수 있을 겁니다. 

/***** 선택자 Hacks ******/
/* IE 6 및 하위버전 */
* html #uno  { color: red }
 
/* IE 7 및 하위버전 */
*:first-child+html #dos { color: red }
 
/* IE 7 및 최신브라우저(IE8포함) */
html>body #tres { color: red }
 
/* 최신브라우저 (IE7제외, IE8포함) */
html>/**/body #cuatro { color: red }
 
/* Opera 9.27 및 하위버전 */
html:first-child #cinco { color: red }
 
/* Safari */
html[xmlns*=""] body:last-child #seis { color: red }
 
/*safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
 
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }
 
/* saf3, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { background: #FFDECE; border: 2px solid #ff0000  }
}
 
 
/***** 어튜리브트 Hacks ******/
 
/* ie6 및 하위버전 */
#once { _color:blue }
 
/* ie7 및 하위버전 */
#doce { *color: blue } /* or #color:blue */
 


참조 : Paul Irish's Blog

모든 IE에 똑같이 적용할때 추천하는 방법으로는 body에 클래스 선택자를 이용해서 다음과 같이 작성할수 있다.

<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie8"> <![endif]-->
<!--[if !IE]>--> <body> <!--<![endif]-->

다음과 같이 .ie처럼 만들어 준다. 위의 예제파일을 참조하세요 

div.foo { color: inherit;}
.ie div.foo { color: #ff8000; }

 

dbloom blog를 보면 다음과 같이 IE8에서의 CSS-Hack을 추천한다.

IE8 표준모드 Only:
.test { color /*\**/: blue\9 }

IE8을 포함한 IE버전
.test { color: blue\9 }








 

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

01 |  웹표준


 

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

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

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

  

 

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



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

 

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

 

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

    OOO정글 아카데미 과정소개

 

  

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

 

 

 

 

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

HTML5 Gallery

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


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

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






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




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

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








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

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

Web 2008 통계

Publisher/WEB2.0 / 2009. 1. 12. 11:05


오늘자(2009/01/09) Ajaxian 포스트중에 2008년 Web에 대한 통계에 대한것을 정리하다.

John Allsopp씨는  extensive state of the web 2008 survey에서 전세계, 다양한 분야의  1,200명의 웹전문가를 대상으로 사용하는 브라우저,OS, 웹사이트 개발시 사용한 기술들에 대해서 정리하였다.

해당 포스트를 보면, 국내사용자를 대상으로 한 설문조사가 아니라서 국내환경과는 조금은 맞지 않는 부분이 있긴 하지만 대부분이 인식하고 있는 부분이라 결과에 대해서는 어느정도 공감하고 있으리라 생각한다.
예상했던 대로 2008년 한해는 UI기술에 대해서 획기적으로 많은 변화와 웹의 미래를 엿볼수 있는 한해가 아니였나 싶다.

비윈도우즈 계열이 50%에 육박했으며 윈도우즈XP는 여전히 무거운 Vista보다 단지 1/4 의 유저많이 사용하고 있었다.
단지 기본브라우저로 IE를 사용하고 있는 사용자는 극히 드물었으며, Firefox가 50%의 시장점유율을 보였으며, Safari3 이 21%, 크롬은 단지 4%의 시장점유율을 보였다.   

웹개발 기술로써는 응답자의 3%는 전혀 웹유효성검증을 하지 않았으며 70%가 항상 유효성 검증을 하고 있었으며 10%의 응답자만이 table로 layout을 그리고 있었으며 90%가 CSS Style을 이용하여 페이지를 그리고 있었다.
자바스크립트 라이브러리에서는 JQuery가 60%로 압도적으로 우세하였다.

플러그인 기술로는 Flash가 60%를 Silverlight가 2%, 애플의 QuickTime이 놀랍게도 20%를 차지하고 있었다. 
개발기술로는 PHP가 63%, Javascript가 55% ASP.NET이 17%, Pythondl 15%, Ruby가 14%로 그 뒤를 잇고 있다.

모바일웹의 도래
기본 레거시 브라우저에 다른 브라우저를 고려한다면 어떤 브라우저를 고려하는가에 대한 응답에 대해서 20%가 모바일에 대해서 고려하고 있었다. 전통적인 래탑이나 데스탑에서 모바일로서 웹이 이동해 가고 있다는 뜻은 아닐까?


설문대상자
응답자중 33%가 디자이너, 거의 반인 48.5%가 개발자이며 그외 18%로 북아메리카, 유럽, 호주,뉴질랜드쪽 응답자가 많았다.



브라우저 및 OS


웹개발시 사용하는 테스트 브라우저
 


마크업기술

사용하는 마크업




마크업의 경우 얼마나 자주 유효성 검증을 하는가?
 

사용하는 DOCTYPE은?


테이블로 레이아웃을 그리는가?

사용하는 속성이 있는 태그는?

사용하고 있는 MicroFormat(RDFa)은?



CSS기술

웹디자인 철학

크로스브라우징

사이트 디자인시 Qurksmode로 사용하는지?

CSS를 사용하는 목적


CSS사용시 자주 사용하는 선택자 및 CSS3중 사용하는것은?

웹폰트를 사용하는지? 사용하면 어떤식으로 사용하는지?

SVG는 사용하는지? CANVAS태그를 사용하는지?

사이트개발시 노트북이나 PC이외의 장치에 대해서는 고려하는지?
이외 장치에 대해 고려하는 응답자중 15%정도가 mobile, 10%가 iPhone(역시 대세인가?) 1%가 Blackberry 5명이 Wii 에 대해서 고려한다고 응답하였다.



Javascript, Ajax, DOM에 대해서

개발시 자바스크립트를 사용하는 목적
응답자중 5%를 제외한 모든 응답자가 자바스크립트를 사용하였다. (나머지 5%는 뭐지??)

Javascript Coding Practices (무간섭 스크립트를 사용하는가?)
마크업과 자바스크립트를 분리하여 사용하는가에 대한 질문 (Unobtrusive Javascript)

W3C DOM 을 엄격히 고수하는가?


Javascript Library and Framwork

사용하는 자바스크립트 라이브러리나 프레임웍은?

Flash, Silverlight, 다른 embedded content

브라우저 플러그인을 사용하여 웹사이트를 구성하는가? 구성한다면 어떤 종류를 많이 사용하는가? 어떠한 목적으로 사용하나?


Back-end 개발언어 및 시스템

서버하드웨어를 구동하는 환경?


사용하는 웹서버는?

서버의 OS는?

많이 사용하는 데이타베이스는?


사용하는 언어는?


사용하는 서버프레임웍은?















아래는 각각의 통계자료에 바탕하여 패키지화한 페이지들이다 시간있을때 한번씩 둘러보는것도 좋을것 같다.


Javascript

  • jQueryDownload | Site | Docs | Plugins
    My favorite Javascript framework with a small footprint at 20k.
  • SWFObject 2.1 Download | Site
    Defacto script for embedding Flash content.
  • OffspringDownload | Site
    Automatically applies .first-child, .last-child, .only-child classes to DOM elements.
  • Dean Edwards IE7 ScriptDownload | Site
    Library makes IE5/6 behave like IE7.
  • NicEditDownload | Site
    Turns any textarea into a WYSIWYG editor.
  • Reflection 2.0Download | Site
    Adds a wet-floor effect to any image.

jQuery Essential Widgets

jQuery Specialized Widgets

  • Custom Checkboxes 1.1.0b2Download | Site
    Easily replace checkboxes and radios with custom graphics.
  • markItUp! 1.1.5Download | Site
    Turns textarea tag into a markup editor with various syntaxes.
  • jEditable 1.5.1Download | Site
    Makes any element a click-to-edit, Ajaxified item.
  • Date Picker 2.1.2Download | Site
    Creates a popup date picker to easily fill in forms.
  • Table Sorter 2.0.3Download | Site
  • Ingrid Datagrids 0.9.1Download | Site
  • Star RatingDownload | Site
    Creates a star rating interface based on a simple form.
  • jMedia 1.01Download | Site
    Flexible multi-media embedding. Supports: Flash, QT, Real, +.
  • BlockUI 2.14Download | Site
    Prevents activity with the window or elements when using AJAX.
  • jCarousel 0.2.3Download | Site
    Scroll items in horizontal or vertical order with controls.
  • Farbtastic 1.2 Color PickerDownload | Site
    HSL color picker widget.

jQuery “Extensions”

  • jQuery MetadataDownload
    Embed metadata in HTML tags. See code for examples.
  • jQuery Easing 1.3Download | Site
    jQuery library for advanced sliding-type animations.
  • Bgiframe 2.1.1Download | Site
    Used when you show elements over a select control in IE6.More Selectors 1.1.3.1Download | Site
    Adds a plethora of interesting selector options.

PHP/MySQL

  • CodeIgniter 1.7.0Download | Site | Docs | Forums
    Easy, documented framework by the devs of ExpressionEngine.
  • pChart 1.2.7Download | Site | Docs
    PHP classes to render high-quality charts.
  • mySQLDumperDownload | Site
    Quality backup solution for large mySQL databases.
  • PHP Development GuidelinesSite
    Best practices for PHP development from the EE guys.
  • PHPMailer 2.3Download | Site | Tutorial
    Send email with attachments, HTML and embedded images.
  • TAR/GZIP/BZIP2/ZIP Archives 2.1Download | Site
    Builds and downloads zip+ files on the fly.
  • ROS PDF ClassDownload | Site
    Module-free creation of PDF documents from within PHP.

Flash Components

  • Open Source FLV PlayerDownload | Site | Docs
    "OS FLV" - Open source, embedable player for Flash video.
  • JW FLV Player 3.12€30 | Download | Site
    SWF file that displays FLV videos. Free for personal use.
  • SlideShowPro$29 | Site | Wiki
    Gallery and slideshow Flash component. 60 options.
  • MonoSlideShow$19.95 | Site | Manual
    Gallery and slideshow SWF file. 150 options.
  • XSPF Flash MP3 Music Player (Slim)Download | Site
    SWF file that plays mp3 songs and playlists.
  • Date Slider 1.1Download | Site
    SWF file that selects a date range.
  • amChartsFree/€85/€275 | Site
    Customizable Flash charts. Free version embeds link to vendor.
  • TWF Flash Uploader€15/€50 | Site
    Nice-looking, configurable, multi-file, Flash uploader.

Miscellaneous Tools

  • Standalone IE6Download | Site
    Download a standalone version of IE6 you can install in XP.
  • Allan Jardine's "Design" BookmarkletSite
    Four overlay tools: Grid, Ruler/Guides, Measurement, Crosshair.
  • XRAY BookmarkletSite
    Select any page element and display its style info.
  • SpriteNavi Menu Tool for FireworksSite
    Takes the work out of creating sprite-based horizontal menus.
  • Create Favicons in PhotoshopMac Plugin | Win Plugin
    Install this PS plugin to add ability to save in .ico format.
  • Javascript Email Enkoder (Spam protection)Site
    Protect email addresses by converting into encrypted JavaScript.

Grid Design

  • 960 Grid SystemDownload | Site
    CSS grid system based on 960px wide design in 2 col widths.
    12 column - 60px wide columns, 20px gutters.
    16 column - 40px wide columns, 10px gutters.
  • Blueprint CSS 0.8Download | Site
    Stylesheet set that combines some of the best thinking on css design. Grids, typography, reset included.
  • GridMaker2 for Photshop CS2+Download | Site
    Photoshop script that creates custom grids.
  • GridMaker2 (columns only)Download
    A modified version that only outputs columns.
  • Grid DesignerSite
    Online tool to design and preview a grid system. This one also includes side margins.
  • Grid CalculatorSite
    Online tool to design and preview a grid system.
  • Syncotype BookmarkletSite
    Overlays a customizable baseline grid on your web page.

Content Generators

  • Ajax Loading GraphicsSite
    Online tool to customize an animated loading graphic.
  • Loader GeneratorSite
    Another tool to customize one of 99 different loading graphics.
  • Stripe GeneratorSite
    Online tool to customize background stripe tiles.
    Also see Stripe Mania.
  • Background Maker (Tiled Backgrounds)Site
    Online tool to make pixel-by-pixel tiled backgrounds.
  • CornerShopSite
    Online tool to generate rounded corner graphics and code.
  • Dummy Text GeneratorSite
    Best tool for generating dummy content. Highly configurable.
  • LipsumSite | Copyable Text
    Generic lorem ipsum copy for roughing in content.
    Also see Lorem2.com and html-ipsum.com

Pixel Icons

Vector Icons

  • ClickBits$49 | Site
    792 arrows & web-related icons in OpenType font format.
  • InfoBits$29 | Site
    188 web-related icons & dingbats in OpenType font format.
  • 165 Vector Icons by GoSquaredSite | Preview
    Free, useful icons in SVG, JPG and Illustrator CS2 format.

Backgrounds & Styles

  • Illustrator - Basic Gradients by GoSquaredSite
    Free, Web2.0-style gradients in SVG or Illustrator CS2 format.
  • Illustrator - Web 2.0 Gradients by dezinerfolioSite
    130 Illustrator gradients. Matches PS gradients below.
  • Photoshop - Web 2.0 Gradients by dezinerfolioSite
    130 Photoshop gradients.
  • Photoshop - Web 2.0 Layer StylesSite
    131 Photoshop layer styles by deszinerfolio.com.
  • Photoshop - Web 2.0 Gradients by EuphorishSite
    70 Photoshop gradients.

Hosting

  • ServInt - My Current Host of Choice$49 | Site
    Well-regarded Virtual Private Server solution starting at $49. This site is hosted there. Better experience for me than MediaTemple. Cheaper than Mosso.
  • BlueHost - Decent low-cost host$6.95 | Site
    Hosting many sites here. Solid host for small to medium traffic. Great customer support and uptime. Unlimited domains.

Browser Compatibility

  • PNG Support in IEDownload | Site | Code
    Enable transparent PNG support in IE.
  • PNG Support in IE (CSS Only)Site | Code
    Enable transparent PNG support in IE6 using only CSS.
  • Whatever:hover in IEDownload | Site | Code
    Enables css :hover support in IE.
  • IE Browser Filtering/TargetingSite | Code
    Some hacks to target different browsers.
  • Misc Browser WorkaroundsCode
    Click the code link to see some collected browser workarounds.

Must-Know CSS Techniques

  • Sliding DoorsSite
    Not just for tabs, this technique is by far the most useful of all.
  • Taming ListsSite
    Transform the meager list into something useful.
  • CSS ResetSite
    Several variations exist here. Resetting all the styles to a baseline helps a lot in styling websites. Season to taste.
    Yahoo YUI Reset | Eric Meyer's Reset
  • Clearing Floats without Extra MarkupSite | Code
    Avoid adding extra markup to your documents using this method to clear floats.

General HTML Techniques

  • Resize a Popup to Fit an Image's SizeSite | Code
    Make a popup window resize perfectly to the image.

Typography

  • FontSquirrel - High Quality FREE FontsSite
    Free, hand-picked, licensed-for-commercial-use fonts.
  • Typical Cross-Browser Font CascadesSite | Sample
    Use these fonts lists when specifiying fonts in your css.
  • Alternative Font CascadesSample
    Interesting alternative cascades.
  • Default Mac FontsSite | Show
  • Default Windows FontsSite | Show

Firefox Extensions

  • Firebug 1.3Install | Site
    Edit, debug, and monitor CSS, HTML, and JavaScript live.
  • Web Developer's ToolbarInstall | Site
    Adds a menu and a toolbar with various developer tools.
  • View Formatted SourceInstall | Site
    Displays formatted source and CSS info for each element.
  • YSlowInstall | Site
    Analyzes pages and tells why they're slow. REQUIRES FIREBUG.
  • Dust-Me Selectors 2.11Install | Site
    Dust-Me Selectors finds unused CSS selectors in your site.
  • UrlParamsInstall | Site
    Displays the GET and POST parameters of a web page.
  • Link CheckerInstall | Site
    Checks all links on a webpage and reports broken ones.

Mac Software

  • MAMP 1.7.2Download | Site
    Installs a self-contained local hosting environment on your Mac. (M)ac, (A)pache, (M)ySQL, (P)HP.
  • VirtualHostX 1.1.1$9 | Download | Site | Tutorial
    Host multiple sites on your Mac. Useful with MAMP.
  • CSSEdit 2.6€29.95 | Download | Site
    The best CSS editor on the market. An absolute must-have.
  • TextMate 1.5.7€39 | Download | Site
    The best text editor ever.
  • Coda 1.6$99 | Download | Site
    Popular all-in-one web development application.

Services

  • DNSstuffSite
    Configure, monitor & fix problems with your domain & email.
  • Bulk Email with Campaign MonitorSite
    Campaign Monitor is an email newsletter sending service geared towards designers. $5 + 1¢ per address per mailing.
  • Domain Names by PickyDomains$50 | Site
    PickyDomains will help you come up with a good/available domain name for only $50.
  • Bust A Name Domain SearchSite
    Two-word combination searches and quick lookups.
  • NameBoy Domain SearchSite
    Good name suggestor tool.
  • Add This Social Bookmarking WidgetSite
    Widget helps visitors bookmark your page on social media sites.
  • ShareThis Social Bookmarking WidgetSite
    Another widget to help visitors bookmark your page on social media sites.
  • Web Development Project EstimatorSite
    Estimate the time and materials required for a proposed web project.
  • SSLmatic - Cheap SSL Certificates$19.99 | Site
    Discounted SSL certs from RapidSSL, GeoTrust and Verisign.

Cheat Sheets

Post by 넥스트리소프트 데꾸벅(techbug)
, |
HTML이나 XHTML1.0에서 XForms namespace를 사용할수 있다. XHTML2.0은 아직은....

XForms Namespace:  XForms Namespace공식사이트
HTML(혹은 XHTML1.0)에서 XForms를 사용하려면 모든 XForms 엘리먼트들을 XForms 네임스페이스로 선언해야 한다. XHTML2.0에서는 이러한 네임스페이스없이도 사용될수 있다고 한다... (W3School)
아래는 XForms 네임스페이스의 사용예이다.

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xf="http://www.w3.org/2002/xforms">
    <head>
        <xf:model>
            <xf:instance>
                <person>
                    <fname/>
                    <lname/>
                </person>
            </xf:instance>
            <xf:submission id="form1" method="get" action="techbug.php"/>
        </xf:model>
        </head>
   
    <body>
        <xf:input ref="fname">
        <xf:label>First Name</xf:label></xf:input><br />
        <xf:input ref="lname">
        <xf:label>Last Name</xf:label></xf:input><br /><br />
        <xf:submit submission="form1">
        <xf:label>Submit</xf:label></xf:submit>
    </body>
</html>
위 샘플에서는 xf: 를 XForms 네임스페이스 prefix로 사용하고 있다. 그러나 이러한 것은 사용자가 어떠한 걸로 정의하느냐에 따라 다르다. (sample.xhtml 파일로 저장하여 firefox plugin 설치후 확인한다. 단 확장자명은 반드시 .xhtml로 저장해야 한다.)

아래는 국내 모 X-Internet업체의 네임스페이스 사용예이다.
<xhtml:html xmlns:xhtml="http://www.w3.org/1999/xhtml"
    xmlns:xsd="http://www.w3.org/2001/XMLSchema"
    xmlns="http://www.w3.org/2002/01/xforms"
    xmlns:ev="http://www.w3.org/2001/xml-events">
 <xhtml:head>
  <xhtml:title>Untitle</xhtml:title>
  <model id="model1">
   <instance id="instance1">
    <root xmlns="">
     <example>Sample</example>
     <login>
      <userId/>
      <password/>
     </login>
    </root>
   </instance>
  </model>
 </xhtml:head>
 <xhtml:body>
  <input id="input1" ref="/root/login/userId" style="left:155px; top:70px; width:110px; height:20px; "/>
  <input id="input2" ref="/root/login/password" style="left:155px; top:95px; width:110px; height:20px; "/>
  <button id="button1" style="left:270px; top:70px; width:75px; height:45px; ">
   <caption>전송</caption>
  </button>
 </xhtml:body>
</xhtml:html>
위와 같이 처리하면 아래와 같은 화면이 출력된다.


translated by techbug




XForms 예제
아래 예제를 test.html 로 저장하여 각 브라우저에서 본 모양이다.
<xforms>
    <model>
        <instance>
            <person>
                <fname/>
                <lname/>
            </person>
        </instance>
        <submission id="form1" method="get" action="techbug.php"/>
    </model>
    <input ref="fname">
        <label>First Name</label>
    </input>
    <input ref="lname">
        <label>Last Name</label>
    </input>
    <submit submission="form1">
        <label>Submit</label>
    </submit>
</xforms>





위와 같이 XForms를 온라인으로 직접 실행해 보려면 "요기 "를 참조하기 바란다.


샘플파일 :


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

Chap02. XForms Model  (0) 2008.12.14
Chap01. XForms 소개  (0) 2008.12.13
Post by 넥스트리소프트 데꾸벅(techbug)
, |

Chap02. XForms Model

Publisher/XForms / 2008. 12. 14. 00:23

XForms Model은 form에서 수집된 데이타를 위한 템플릿을 정의한다.

XForms Framework
HTML Form의 목적은 데이타를 수집하는것이다. XForms도 마찬가지다.
XForms를 이용하며 두가지 다른 부분안에서 인풋데이타를 서술한다.
  • XForm Model (데이타와 로직)
  • XForm UI (데이타 입력 및 화면출력)

XForm Model은 어떠한 폼인지, 어떤 데이타를 포함하는지, 그래도 어떤 기능을 하는지를 정의한다.
XForm UI는 각 컨트롤 객체들이 화면에 출력되고 인풋 필드를 정의한다.


XForms Model
XForms model데이타를 설명하는데 사용되며, data model은 XML전문의 instance이며 <model>엘리먼트안에서 데이타 모델로 정의된다.

[예제]

<model>
    <instance>
        <person>
            <fname/>
            <lname/>
        </person>
    </instance>
    <submission id="form1" action="techbug.php" method="get"/>
</model>

위의 예제에서 보면 XForms는 <instance> 엘리먼트를 이용해서 수집된 데이타를 XML 템플릿으로 정의하며 <submission>엘리먼트를 통해서 데이타를 전송한다.
XForms model은 UI의 비주얼한 부분을 처리하지는 않는다.



XForms Namespace
위의 예제에서는 XForms 네임스페이스를 빼먹었는데 다음 포스트에서 소개한다.

<instance>엘리먼트
XForms model은 수집된 데이타를 정의하는데 <instance>엘리먼트를 사용한다.
위의 예제에서 data instance에서 수집된 데이타는 아래와 같이 값이 바뀌게 된다.
 

        <person>
            <fname></fname>
            <lname></lname>
        </person>

에서 데이타가 입력되면 아래와 같이 바뀐다.

        <person>
            <fname>John</fname>
            <lname>Smith</lname>
        </person>

<submission>엘리먼트 
데이타 전송시 사용되는 엘리먼트이며 어떻게 submit할건지를 결정하며 HTML의 <form>태그와 마찬가지로 id, action, method를 동일한 방식으로 표기한다.



XForms User Interface : controls
데이타의 표현과 입력을 위해 사용된다.  XForms의 UI 앨리먼트들을 XForms에서는 컨트롤(controls)라고 부른다.

 <input ref="fname"><label>First Name</label></input>
<input ref="lname"><label>Last Name</label></input>
<submit submission="form1"><label>Submit</label></submit>

 과 같이 표현하며 각각의  <input>엘리먼트와 <submi>엘리먼트표현된다. 일반 XHTML의 표기법과 약간 다르게 표현된다.


XForms는 하나의 컨테이너를 필요로 한다.
XForms는 단독으로 설계되지 않으며 XForms 문서로써도 기능을 하지 못한다.
Xforms는 또다른 XML문서안에서 실행되어야 하며 XHTML1.0에서 실행될수 있고 XHTML2.0에서도 동작될 예정이다. (데꾸벅 주 : 아직 2008.12월 현재 XHTML2.0 스펙은 W3C권고안에 없다.)

<xforms>
    <model>
        <instance>
            <person>
                <fname/>
                <lname/>
            </person>
        </instance>
        <submission id="form1" action="submit.asp" method="get"/>
    </model>
    <input ref="fname"><label>First Name</label></input>
    <input ref="lname"><label>Last Name</label></input>
    <submit submission="form1"><label>Submit</label></submit>
</xforms>

 과 같이 작성하면 다음 그림과 같이 표현된다.





XForms Processor
위의 예제에서 서브밋시 아래 XML형태로 서버로 전송하게 되며 혹은 텍스트로 전송하게 된다.

<person>
  <fname>Hege</fname>
  <lname>Refsnes</lname>
</person>

혹은 아래와 같이
fname=Hege;lname=Refsnes


translated by techbug

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

Chap03. XForms Namespace  (0) 2008.12.14
Chap01. XForms 소개  (0) 2008.12.13
Post by 넥스트리소프트 데꾸벅(techbug)
, |

Chap01. XForms 소개

Publisher/XForms / 2008. 12. 13. 14:20

현재 프로젝트에서 사용하는 국내산 X-Internet (컴스퀘어 트러스트폼)이 XForms기반이라 하여 찾다가 내용을 정리해본다.  

트러스트폼은 개인적으로 내가 모르는 소스가 밑단에서 실행되는걸 싫어해서 별로 좋아하는 솔루션은 아님에도 간단한 그리드형식 페이지나 브라우저 컨트롤의 경우는 상당히 맘에 든다.. 개발퍼포먼스는 상당히 빠른 편이다.
그러나 다른 솔루션들도 마찬가지겠지만 개발자들에게 어느정도의 권한을 주는 기능들이 별로 없어서 개발할때는 상당히 까다롭다다. 또한 API나 샘플화면의 부재는 개발상 많은 아쉬움이  남긴다.

우선 잡설은 집어치우고 트러스트폼에서 사용된 XForms에 대해서 알아보기로 한다.
현재 포스팅 중인 이 글은 w3school 내용을 번역해서 올림을 미리 알린다.. ㅡ.ㅡ;


XForms 1.0 (Second Edition) [W3C Recommendation](같은 이름의 X Window System GUI 라이브러리와 혼동하지 말라.)은 XML 데이터 프로세싱용 웹 폼 스팩으로서, 다양한 미디어를 통해 광범위한 플랫폼에서 사용할 수 있다. XForms는 폼의 목적과 표현을 분리한다. 폼이 어떤 것을 수행해야 하는지에 대한 고려 사항과 폼이 어떻게 보여질 것인가를 분리한다. 이것은 XML 콘텐트를 조작하기 위해 폼 UI를 개발할 때 사용할 수 있는 XML 어휘이다. XForms는 XHTML의 일부로 시작되었지만, 이제는 독자적인 길을 가고 있다. 어떤 사람들은 이것이 필요 이상으로 복잡하다고 지적하지만, 웹 폼이라는 복잡한 세계에 질서를 가져다 주었다. 현재 XForms 1.1 [개발 중], 가용성 향상에 초점을 맞추고 있다.

XForms를 하기전에 갖춰야 할 기반 지식
  • HTML
  • HTML Forms
  • XHTML
  • XML

XForms란 도대체 무엇이며 좋은점은?
  • 웹에서 input form을 생성하기 위해 XML을 사용하는 차세대 HTML Forms이다.  
  • HTML Forms보다 더 유연하고 풍부한 기능을 자랑한다.
  • XHTML2.0의 form기준
  • XForms는 장치(device)와 독립적인 플랫폼이다.
  • 화면단으로 부터 로직과 데이타영역을 분리한다.
  • 폼데이타를 정의하기 위해 XML을 사용한다.
  • XML 문서에 데이타를 저장하고 전송한다.
  • 폼데이타를 XML로 정의한다.
  • 폼데이타의 정합성이나 계산과 같은 기능을 가지고 있다.
  • 스크립트할 필요를 없애거나 줄여준다. (이건 아닌것 같아요...)
  • W3C의 권고안이다... 


XForms는 HTML Forms의 후계자(Successors)이다.
오늘날 많은 웹애플리케이션의 중요한 부분이 Formdlek. HTML폼은 웹애플리케이션이 사용자로 부터 입력을 받을수 있도록 해준다. HTML 폼이 HTML표준의 한파트로서 사용된후 10년째인 현재, 웹사용자들은 표준 HTML폼의 한계를 띄어넘는 복잡한 트랜잭션을 사용하고 있다.
XForms는 좀더 풍부하고, 보안성이 뛰어나며 디바이스 독립적인 방법으로 웹입력을 제공한다. 조만간 XForms-enabled된 브라우저를 사용하기를 기대한다.
(데꾸벅 주: 그러나 현재 XForms를 지원하는 브라우저는 없다. 다만 국내에서는 ActiveX를 사용하고 있다.
Firefox에서는 플러그인을 사용하여 XForms를 테스트해볼수 있다.
)

XForms는 화면단으로 부터 로직과 데이타영역을 분리한다.
Xforms는 화면단으로 부터 로직과 데이타 영역을 분리하기 위해 XML을 사용하고 있다. 이 기능은 애플리케이션으로 사용자와 소통을 원할하게 할것이다.  (데꾸벅주 : 무간섭 스크립트와 같이 쓴다면 모르겠지만.. designer


데이타 저장 및 전송을 XML로 처리
XML 문서안에서 데이타를 저장하고 XML전문을 전송하며 화면에 출력한다.

XForms는 장치에 독립적이다.
모든 장치에서 사용할수 있는 DATA MODEL때문에 device 독립적이며  서로다른 UI (모바일폰, 이동장치,점자 판독기)에서 커스터마이징할수 있다. XML에 기반한 Xforms의 장치독립성 때문에 VoiceXML이랑, WML, SVG와 같은 XML애플리케이션안에서 직접적으로 XForms elements를 추가할수 있다.

XForms는 W3C권고안이다.
XForms1.0 은 2003년 10월에 W3C 표준권고안으로 채택되었다.  권고안보기


XHTML2.0 Spec중 하나이다. [XHTML2.0]
XHTML2.0은 아래와 같은 요소로 구성되어 있다 XForms도 그중에 하나로 버젓이 등록되어 있다.. XFrames와 같이..
  • RDFa (Resource Definition Framework)
  • XForms
  • Access
  • Role
  • XML Events (XForms에서도 사용된다.. ㅡ.,ㅡ;)

Specification FPWD LC CR PR Rec
XForms 1.1 Nov 2004 Feb 2007 Nov 2007 July 2008 Sep 2008
XForms 1.2 
Streamlined for Web Authors 
(Transitional)
June 2008 Dec 2008 Mar 2009 Oct 2009 Dec 2009
XForms 2.0 Nov 2008 Sep 2009 Dec 2009 Sep 2010 Nov 2010




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

Chap03. XForms Namespace  (0) 2008.12.14
Chap02. XForms Model  (0) 2008.12.14
Post by 넥스트리소프트 데꾸벅(techbug)
, |

요즘 구글크롬으로 이제껏 작업했던 사이트의 버그 잡는 쏠쏠한(ㅠ.,ㅠ)재미에 푹 빠졌다.
google chrome의 경우 webkit엔진을 사용하므로 safari 와 비슷하게 작동해서 불행히도 css버그도 같이 공유하고 잇따.

Safari , google chrome, FF2 의 경우 Fieldset 버그가 존재한다.
이럴경우에는 다음과 같이 처리하면 된다.

fieldset:after {content: “.”; display: block; height: 0; clear: both; } 

위의 내용중 :after는 CSS2 Spec에 나온것이므로 기술하지 않은 곳에서는 다음과 같이 작업한다.
fieldset {display: block; height: 0; clear: both; }


<=== height:0, clear:both 가 중요하다.. ㅡ.,ㅡ;


사족을 붙이자면 실제 작업을 하다가 보면 DTD버전이 4.01 이냐 xhtml1.0 이냐에 따라 이놈의 fieldset은 유난히 많이 틀리다는것을 알수 있다.

html4.01일 경우에는 <fieldset>밑에  첫번째 자식노드로 <legend>가 반드시 필요하다
html4.01에서 "반드시" 라는 것이 존재하는것이 이놈 뿐이다... 대부분 W3C 권고안이기 때문에 생략이 가능하나 이놈만은 생략하면 validtion부분에서 빨간색으로 표현된다... ㅡ.,ㅡ;

그러나 xhtml1.0에서는 생략이 가능하다....


Post by 넥스트리소프트 데꾸벅(techbug)
, |
브라우저 춘추전국시대 다시 시작하나....

오늘 구글크롬이 다운로드 서비스를 시작했다.
설치후 구글 크롬 이놈은 다른 브라우저의 종합판인듯하다.

Opera,Firefox, Safari 모두다 섞어 놓은것 같은데.. ㅡ.,ㅡ;  상상력이... 쿨럭!!.



각 브라우저의 값들을 비교해보고자
alert(navigator.userAgent+"\n=>"+parseFloat(navigator.appVersion));로 찍어봤다.
구글크롬 0.2
Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13:
=>Netscape

사파리  3.1.2
Mozilla/5.0 (Windows; U; Windows NT 6.0; ko-KR) AppleWebKit/525.19 (KHTML, like Gecko) Version/3.1.2 Safari/525.21:
=>Netscape

Firefox 3
Mozilla/5.0 (Windows; U; Windows NT 6.0; ko; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1:
=>5

IE7
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.04506):
=>4

Opera 9.52
Opera/9.52 (Windows NT 6.0; U; ko):
=>Opera
헉.. 이놈 대단한 놈이다.. safari의 AppleWebkit으로도 유효성검증을 하기가.. ㅠ.,ㅠ;
결국은 다음과 같이 버전체크 부분을 몽땅 바꿔버렸다.

/**
 * @fileoverview 브라우저비교 및 JS상속, 클래스 생성관련 스크립트 모음
 * @author 데꾸벅
 * @version 0.1
 * @since 2003.05.08, 2008.08.27 IE6 판별 버그 수정, 2008.09.03 Google Chrome 판별 추가
 */


 var sUserAgent = navigator.userAgent;
var fAppVersion = parseFloat(navigator.appVersion);

/**
 * 브라우저 버전 비교
 */
function compareVersions(sVersion1, sVersion2) {
    var aVersion1 = sVersion1.split(".");
    var aVersion2 = sVersion2.split(".");

    if (aVersion1.length > aVersion2.length) {
        for (var i=0; i < aVersion1.length - aVersion2.length; i++) {
            aVersion2.push("0");
        }
    } else if (aVersion1.length < aVersion2.length) {
        for (var i=0; i < aVersion2.length - aVersion1.length; i++) {
            aVersion1.push("0");
        }
    }
    for (var i=0; i < aVersion1.length; i++) {
        if (aVersion1[i] < aVersion2[i]) {
            return -1;
        } else if (aVersion1[i] > aVersion2[i]) {
            return 1;
        }
    }
    return 0;
}



//Opera
var isOpera = sUserAgent.indexOf("Opera") > -1;
var isOpera7 = isOpera8 = isOpera9 =isOpera10 = false;
if (isOpera) {
    if (/Opera[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
     var oprversion=new Number(RegExp.$1);
     if (oprversion>=10) isOpera10 = true;
     else if (oprversion>=9) isOpera9 = true;
     else if (oprversion>=8) isOpera8 = true;
     else if (oprversion>=7) isOpera7 = true;
    }
}




//KHTML, Konqueror
var isKHTML = sUserAgent.indexOf("KHTML") > -1 || sUserAgent.indexOf("Konqueror") > -1  || sUserAgent.indexOf("AppleWebKit") > -1;

var isSafari1 = isSafari1_2 = false;
var isKonq2_2 = isKonq3 = isKonq3_1 = isKonq3_2 = false;
var isSafari = false;
if (isKHTML) {
    isSafari = sUserAgent.indexOf("AppleWebKit") > -1;
    isKonq = sUserAgent.indexOf("Konqueror") > -1;

    if (isSafari) {
        var reAppleWebKit = new RegExp("AppleWebKit\\/(\\d+(?:\\.\\d*)?)");
        reAppleWebKit.test(sUserAgent);
        var fAppleWebKitVersion = parseFloat(RegExp["$1"]);
        isSafari1 = fAppleWebKitVersion >= 85;
        isSafari1_2 = fAppleWebKitVersion >= 124;
    } else if (isKonq) {
        var reKonq = new RegExp("Konqueror\\/(\\d+(?:\\.\\d+(?:\\.\\d)?)?)");
        reKonq.test(sUserAgent);
        isKonq2_2 = compareVersions(RegExp["$1"], "2.2") >= 0;
        isKonq3 = compareVersions(RegExp["$1"], "3.0") >= 0;
        isKonq3_1 = compareVersions(RegExp["$1"], "3.1") >= 0;
        isKonq3_2 = compareVersions(RegExp["$1"], "3.2") >= 0;
    }
}


// Internet Explorer
var isIE = sUserAgent.indexOf("compatible") > -1 && sUserAgent.indexOf("MSIE") > -1 && !isOpera;
var isIE4 = isIE5 = isIE5_5 = isIE6 = isIE7 = isIE8 = false;
if (isIE) {
    var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
    reIE.test(sUserAgent);
    var fIEVersion = parseFloat(RegExp["$1"]);
    isIE4 = fIEVersion >= 4  && fIEVersion < 5;
    isIE5 = fIEVersion >= 5  && fIEVersion < 5.5;
    isIE5_5 = fIEVersion >= 5.5  && fIEVersion < 6.0;
    isIE6 = fIEVersion >= 6.0 && fIEVersion < 7.0;
    isIE7 = fIEVersion >= 7.0 && fIEVersion < 8.0;
    isIE8 = fIEVersion >= 8.0 ;
}


// Mozilla 여부
var isMoz = sUserAgent.indexOf("Gecko") > -1 && !isKHTML;
var isMoz1 = sMoz1_4 = isMoz1_5 = false;

if (isMoz) {
    var reMoz = new RegExp("rv:(\\d+\\.\\d+(?:\\.\\d+)?)");
    reMoz.test(sUserAgent);
    isMoz1 = compareVersions(RegExp["$1"], "1.0") >= 0;
    isMoz1_4 = compareVersions(RegExp["$1"], "1.4") >= 0;
    isMoz1_5 = compareVersions(RegExp["$1"], "1.5") >= 0;
}

var isNS4 = !isIE && !isOpera && !isMoz && !isKHTML && (sUserAgent.indexOf("Mozilla") == 0) && (navigator.appName == "Netscape") && (fAppVersion >= 4.0 && fAppVersion < 5.0);
var isNS4 = isNS4_5 = isNS4_7 = isNS4_8 = false;

if (isNS4) {
    isNS4 = true;
    isNS4_5 = fAppVersion >= 4.5;
    isNS4_7 = fAppVersion >= 4.7;
    isNS4_8 = fAppVersion >= 4.8;
}


var isFF = !isIE && !isOpera && isMoz && !isKHTML && (sUserAgent.indexOf("Mozilla") == 0) && (navigator.appName == "Netscape");
var isFF1 = isFF2 = isFF3 = false;
if(isFF){
    if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
     var ffversion=new Number(RegExp.$1);
     if (ffversion>=3)
          isFF3 = true;
     else if (ffversion>=2)
         isFF2 = true;
     else if (ffversion>=1)
          isFF1 = true;
    }
}


//구글 크롬 버전체크 추가 2008.09.03
var isChrome = !isIE && !isFF && !isOpera && !isMoz && !isKonq && isSafari && isKHTML && (sUserAgent.indexOf("Mozilla") == 0) && (sUserAgent.indexOf("Chrome") != -1) && (navigator.appName == "Netscape");
var isChrome02 = false;

if(isChrome){
    if (/Chrome[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
        var ffversion=new Number(RegExp.$1);
        if(parseFloat(ffversion) >= parseFloat('0.2'))
            isChrome02 = true;
    }
}


/**
 * XP인지 아닌지 판별함수
 * @return {boolean} true/false
 */
function isXP(){
    var agent = window.navigator.userAgent;
    if(agent.indexOf("MSIE")!= -1 && agent.indexOf("5.1") !=-1)
        return true;     //SP1
    else
        return false;
}

/**
 * XP의 ServicePack2인지 처리함수
 * @return {boolean} true/false
 */
function isXPSP2(){
    var tmp_MSIE = window.navigator.userAgent.indexOf("MSIE");
    if(tmp_MSIE && window.navigator.userAgent.indexOf("SV1") > tmp_MSIE){
        return true;     //SP2
    }else{
        return false;
    }
}

사용자 삽입 이미지


구글크롬에서는 태터툴즈의 웹에디팅기능이 되지 않아 지금 포스팅은 FF3에서 작성하고 있다. ㅡ.,ㅡa


Acid3 Test 결과화면 : 테스트사이트 (http://acid3.acidtests.org/)
사용자 삽입 이미지
Opera9, Firefox3, IE7,
Safari, google Chrome, IE8
순서로 테스트 (Safari는 네트웍때문에 연결되지 않았으며, google Chrome의 경우 78/100 이 나왔습니다. 사파리하고 비슷한 수준이네요~~



근데... 이건 뭥미???
사용자 삽입 이미지



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








소스보기를 막는 코드는 여러가지가 있습니다.

하지만 소스보기를 막는 코드가 있다고 하더라도 조금만 관심을 가지면 소스는 100%볼 수가 있습니다. 그 어떤 HTML이던 소스보기는 100%차단할 수 없으며(100% 볼수 있음) 소스보기를 번거럽게 할 뿐(소스보기를 까다롭게)입니다.

인터넷의 특성상 소스는 100%오픈되어 있습니다.

네이버카페 역시 모든 소스를 볼수가 있습니다.

아래문서는 소스보기를 막는 코드들로써 어느정도 소스보기를 번거럽게 할 수 있지만 100%차단을 할 수 는 없습니다.

 

 

1. 마우스 오른쪽메뉴, 드래그, 선택복사 금지하기

<body oncontextmenu='return false' ondragstart='return false' onselectstart='return false'>

oncontextmenu='return false' : 마우스 오른쪽 메뉴 금지
ondragstart=return false : 드래그 금지
onselectstart='return false' : 선택복사 금지

참고 onkeydown="return false" 키보드 완전 금지


 

2. 마우스 오른쪽 버튼 클릭시 경고 메세지
<script language=JavaScript>function click() {if ((event.button==2) || (event.button==2)) {alert('죄송합니다. 오른쪽 마우스 금지입니다. - 태그인넷 ');}}document.onmousedown=click// --></script>

 

 

3. 프레임 소스보기 막기

<script language="JavaScript">
if(parent.frames.length <= 0) { top.location.href="http://tagin.net"; }
</script>

프레임을 쓰는 홈페이지에서 프레임 페이지가 아닌 하위 프레임으로 직접 들어갔을 때 http://tagin.net으로 이동하는 예제입니다
head에 넣어주세요

 

4. 새로고침(F5), 전체창(F11) 막기

<SCRIPT LANGUAGE="JavaScript">
<!-- www.tagin.net
function processKey()
{
        if( (event.ctrlKey == true && (event.keyCode == 78 || event.keyCode == 82)) ||
        (event.keyCode >= 112 && event.keyCode <= 123) || event.keyCode == 8)
            {
        event.keyCode = 0;
        event.cancelBubble = true;
        event.returnValue = false;
            }
}
document.onkeydown = processKey;
-->
</script>

 

 

5. shift, ctrl (쉬프트, 컨트롤)키 클릭하면 경고메세지 띄우기

<script language="JavaScript">
<!-- www.tagin.net
function click() {
     if((event.ctrlKey) || (event.shiftKey)) {
       alert('키를 사용할 수 없습니다.');
     }
   }
document.onmousedown=click;
document.onkeydown=click;
-->
</script>

 
6. 동영상 마우스 오른쪽 버튼 막기

<embed src="http://tagin.net/js/1.wmv" EnableContextMenu="false" >

<object classid='clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95' id='MediaPlayer1' width="580" height="387">
  <param name='AudioStream' value='-1'>
  <param name='AutoSize' value='false'>
  <param name='AutoStart' value='true'>
  <param name='AnimationAtStart' value='true'>
  <param name='AllowChangeDisplaySize' value='true'>
  <param name='BufferingTime' value='5'>
  <param name='DisplayBackColor' value='0'>
  <param name='DisplayForeColor' value='16777215'>
  <param name='Enabled' value='true'>
 
 <param name='EnableContextMenu' value='false'>
  <param name='EnableTracker' value='true'>
  <param name='Mute' value='false'>
  <param name='PlayCount' value='1'>
  <param name='Rate' value='1'>
  <param name='ShowCaptioning' value='1'>
  <param name='ShowControls' value='true'>
  <param name='ShowAudioControls' value='true'>
  <param name='ShowDisplay' value='false'>
  <param name='ShowGotoBar' value='false'>
  <param name='ShowPositionControls' value='true'>
  <param name='ShowStatusBar' value='false'>
  <param name='ShowTracker' value='true'>
  <param name='TransparentAtStart' value='false'>
  <param name='Volume' value='-110'>
  <param name="FileName" value="http://tagin.net/js/1.wmv">
  <param NAME="SAMIFileName" VALUE="자막주소">
</object>

동영상 태그(embed, object) 자세히 보기
 
7. 상태바의 링크 주소 감추기

<script language=JavaScript>
setInterval("x()",1);
function x(){window.status="태그인넷"}
</script>
 <A href="http://tagin.net">태그인넷</a>

다른 소스

<a href="http://tagin.net" onmouseover="self.status='태그인넷';return true" onmouseout="self.status=' 태그인넷';return true">링크 </a>

<head>
<script language="JavaScript">
<!--

function hidestatus()
{
window.status='태그인넷'
return true
}
if (document.layers)
document.captureEvents(Event.mouseover | Event.mouseout)
document.onmouseover=hidestatus
document.onmouseout=hidestatus

// -->
</script>
</head>

 
8. 익스플로러 6의 이미지 도구모음(저장버튼 등) 뜨는 것 막기.
<HEAD><META http-equiv="imagetoolbar" content="no"></HEAD>
 
9. 무단링크 금지 스크립트
<script language='JavaScript'>
//link1 과 link2 지정해 넣은 홈을 통해서 들어오지 않으면 무단링크 취급 기본홈페이지로 열리는 소스
var home_url="http://www.tagin.net";   // 기본 홈페이지
var link1="http://tagin.net/";
var link2="http://www.naver.com/";
if (document.referrer.indexOf(home_url)==-1 && document.referrer.indexOf(link1)==-1 && document.referrer.indexOf(link2)==-1) {
        if (document.referrer) {
           alert("무단링크 하셨습니다.!");  // 무단링크시 에러 메세지
                window.location=home_url;  // 기본 홈으로 이동
        } else {
           alert("무단링크 하셨습니다. ");  // 무단링크시 에러 메세지
        window.location=home_url;  // 기본 홈으로 이동
        }
}
</script>

 출처 : 태그인넷










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

[HTML5] Progress Bar CSS입히기  (2) 2013.03.04
SVG와 CANVAS사이의 선택  (16) 2010.03.09
HTML5 Gallery  (4) 2009.04.10
Post by 넥스트리소프트 데꾸벅(techbug)
, |

보통 IE5,5와 IE6에서의 투명 PNG이미지 처리시 CSS와 스크립트로 다음과 같이 처리하는데
.png24 {
    tmp:expression(setPNG24(this));
}


/* png24 이미지 파일을 웹에서 투명하게 변경하는 스크립트 */
function setPNG24(obj) {
    obj.width=obj.height=1;
    obj.className=obj.className.replace(/\bPNG24\b/i,'');
    obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ obj.src +"',sizingMethod='image');"
    obj.src='';
    return '';
}

보통 위와 같이 처리하면 onmouseover='this.src=this.src.replace(".gif","_over.gif")'와 같이 처리하는데..

이미지 토글처리를 하다가 setPNG로 filter:progid:DXImageTransform 필터가 적용되면 mouseover 이벤트로 이미지 변경이 되지 않았다.
IE7, IE6에서 필터가 적용되면  onclick, onmouseover이던지 이벤트는 모두 먹어버리고 심지어 <a>태그도 먹질 않는다. 다른 브라우저에서는 아예 filter 속성이 먹질 않아서 정상적으로 작동한다.

실제 이미지의 소스를 filter속에서 정의하기 때문에 그렇다.

이럴경우 다음과 같이 처리한다. [레퍼런스 : http://homepage.ntlworld.com/bobosola/png_mouseover.htm]
<!--[if lt IE 7]>
<script type="text/javascript">
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 and 6.
{
   if ((version >= 5.5) && (document.body.filters))
   {
       for(var i=0; i<document.images.length; i++)
       {
          var img = document.images[i]
          var imgName = img.src.toUpperCase()
          if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
          {
             var imgID = (img.id) ? "id='" + img.id + "' " : ""
             var imgClass = (img.className) ? "class='" + img.className + "' " : ""
             var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
             var imgStyle = "display:inline-block;" + img.style.cssText
             var imgAttribs = img.attributes;
             for (var j=0; j<imgAttribs.length; j++)
             {
                var imgAttrib = imgAttribs[j];
                if (imgAttrib.nodeName == "align")
                {
                   if (imgAttrib.nodeValue == "left") imgStyle = "float:left;" + imgStyle
                   if (imgAttrib.nodeValue == "right") imgStyle = "float:right;" + imgStyle
                   break
                }
             }
             var strNewHTML = "<span " + imgID + imgClass + imgTitle
             strNewHTML += " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
             strNewHTML += "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
             strNewHTML += "(src='" + img.src + "', sizingMethod='scale');\""
             strNewHTML += " onmouseover=\"PNGswap('" + img.id + "');\" onmouseout=\"PNGswap('" + img.id +"');\""
             strNewHTML += "></span>"
             img.outerHTML = strNewHTML
             i = i-1
          }
       }
   }
}
window.attachEvent("onload", correctPNG);
function PNGswap(myID)
{
   var strOver  = "_on"
   var strOff = "_off"
   var oSpan = document.getElementById(myID)
   var currentAlphaImg = oSpan.filters(0).src
   if (currentAlphaImg.indexOf(strOver) != -1)
      oSpan.filters(0).src = currentAlphaImg.replace(strOver,strOff)
   else
      oSpan.filters(0).src = currentAlphaImg.replace(strOff,strOver)
}

</script>
<![endif]-->

<script language="JavaScript" type="text/javascript">
<!--
function imgSwap(oImg)
{
   var strOver  = "_on"    // image to be used with mouse over
   var strOff = "_off"     // normal image
   var strImg = oImg.src
   if (strImg.indexOf(strOver) != -1)
      oImg.src = strImg.replace(strOver,strOff)
   else
      oImg.src = strImg.replace(strOff,strOver)
}
//-->
</script>

</head>
<body>

<div class="plainbackground">
<img id="img100" src="logo_off.png" width="100" height="100" alt="a PNG logo"
onmouseover="imgSwap(this)" onmouseout="imgSwap(this)"/>
</div>

<div class="plainbackground">
<img id="img200" src="logo2_off.png" width="100" height="100" alt="another PNG logo"
onmouseover="imgSwap(this)" onmouseout="imgSwap(this)"/>

</div>


결국 필터의 src 소스를 변경시켜야 하다는 얘기닷.. ㅡ.,ㅡ;
다들 건승하길... 저 같으면 그냥 gif 깨끗하게 쓰겠어요.. ㅠ.,ㅠ;



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

IE7 의 렌더링 방식이 IE6과 다르다.
CSS testing of Selector and Pseudo selectors 를 보면 IE7 은 FF 에 더 가까와 지고 있다.
그래서 바야흐로 브라우저 3개를 켜고 코딩을 해야하는 시대가 온 것이다.

이를 해결하기 위한 방법 중 하나는 Selector Hack 을 이용하는 것이다.
.context_bar_form_field
{
height: 15px; // 모든 브라우저
#height: 15px; // IE 전용
_height: 21px; // IE6.0 과 이전버젼용
}
우선 파폭에 맞추어 개발을 한 후 E7 에서 점검한다. 수정할 부분이 있다면 # 접두어를 붙여 수정해 준다. #이 붙은 것은 FF 에서 무시한다. 하지만 IE 는 재설정 해준다.
다음에 IE6 을 열고 수정하면서 _ 를 접두어로 붙여 새로 재설정 한다. IE7 은 '-' 가 붙은 것을 무시한다.
 
또 다른 방법은,
.title h3 {height: 21px; }
.title > h3 {height: auto; min-height: 21px; }

이렇게 하는 방법도있다. 맨 아래줄은 파이어폭스와 IE7만 적용된다.

한가지 주의할 점은

body
{
text-align:-moz-center; /*FF*/
#text-align:center; /*IE */
}
속성 키워드 자체가 다른 것이 많다. 주의 할 것!
위에서 처럼 속성값 자체가 다른 경우가 있다. 그러니 안된다고 hack 만 쳐다보고 있으면 밤세야 한다.

내가 보기에 가장 좋은 방법은 Conditional Comments 를 사용하는 것이다.
복잡하게 한 파일에 구질구질 작성하지 말고 파일을 분리해 버리는 것이다.

참고 :http://webborg.blogspot.com/2007/01/css-compatibility-ie6-ie7-firefox-and.html

<head>
<title>my css hacked page</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="iehacks.css">
<![endif]-->
<body>
  <div class="watermark">....</div>...


이렇게 분리해서 각개격파하는 것이 좋을 듯 싶다.






IE 용인 Expression을 사용하여 본다면

a { expression(어쩌구 문법) }

이렇게 해서 a 태그 즉, 링크에 걸린 항목에 대하여 Expression은 적용 시킬 수 있을것입니다.

그럼 예로.. 링크주소중에 pdf 라은 확장자가 있다면 링크 앞에 자동으로 PDF 아이콘을 띄워봅시다.


a {
   padding-left: expression(this.href.indexOf('.pdf') > 0 ? '20px' : '');
   background: expression(this.href.indexOf('.pdf')>0 ? 'transparent url(pdf.gif) no-repeat center left' : '');
}

이건 IE 용입니다. Firefox에선 이렇게 하시면 됩니다.


a[href $='.pdf']{
   padding-left: 20px;
   background: transparent url(pdf.gif) no-repeat center left;
}

음... 불여시에서 사용하는게 훨씬 간편하네요 @@;;

[href $='.pdf'] 이 구문에서 $는 .pdf로 끝나는 것을 의미합니다.

.pdf로 시작하는 것을 찾으려면 $대신에 ^을 사용하시면 됩니다.

[href ^='.pdf']가 되겠죠. 그냥 포함 되어 있는지를 찾는 거라면 *을 사용하시면 됩니다.


<style>
a[href $='.pdf']{
   padding-left: 20px;
   background: transparent url(pdf.gif) no-repeat center left;
}

a {
   padding-left: expression(this.href.indexOf('.pdf') > 0 ? '20px' : '');
   background: expression(this.href.indexOf('.pdf')>0 ? 'transparent url(pdf.gif) no-repeat center left' : '');
}
</style>

<a href="test.pdf">test1</a><br/>
<a href="test.gif">test2</a>










Netscape 4 제외시키기

Netscape 4은 media속성값에 "screen"이외의 값이 올 경우 읽어 들이지 못하는 것을 이용한 방법이다.

<link rel="stylesheet" type="text/css" href="/css/style.css" media="all" /> 이나
<link rel="stylesheet" type="text/css" href="/css/style.css" media="screen, tv" /> 

라고 지정할 경우 Netscape 4은 읽어 들이지 못한다.

부분적으로 읽어들이지 못하게 하는 경우에는 Caio's hack인 /*/*/를 이용한다. 보통 코멘트는 */으로 닫지만 /*/으로 닫게 되면 Netscape 4에서는 인식되지 않는다. 그 뒤에 평상시의 코멘트 /* */를 적어두면 그 뒤의 스타일은 Netscape 4에서도 문제없이 적용된다.

p { /*/*/ color:white; /* */ } 

Mac IE 4.5, Netscape 4 제외시키기

@import룰로 url()함수를 이용하여 외부 스타일시트를 이중인용부호로 지정한다.
Mac IE 4.5는 @import에 url()함수를 이용하는 경우, 단일 인용부호와 인용부호가 없는 것이 아니면 읽어 들이지 못한다. Netscape 4은 @import를 지원하지 않는다.

@import url("/css/style.css")

Mac IE 5 제외시키기

CSS소스 안의 코멘트 서식을 /* \*/ 이라는 방식으로 기술한다. holly hack이라고 하며 그 뒤에 평상시의 코멘트 /* */를 적어두면 그 뒤의 스타일은 Mac IE 5에서도 문제없이 적용된다.

p { /* \*/ color:white; /* */ }

Win IE 4~5 제외시키기

셀렉터 바로 뒤에 /**/라고 적는다.

p/**/ { color:white;}

Win IE 4~5, Mac IE 4.5~5 제외시키기

프로퍼티와 값을 구분하는 콜론(;) 앞에 코멘트에 스페이스를 포함하여 /* */라고 적는다.

p { color/* */:white;}

Win IE 4~6, Mac IE 4, Netscape 4 제외시키기

셀렉터 앞에 html>body를 붙인다.

html>body p { color:white;}

Win IE 6 제외시키기

프로퍼티와 값을 구분하는 콜론(;)의 앞에, 스페이스와 코멘트를 /**/라고 적는다.

p { color /**/:white;}

star hack

셀렉트 앞에 *html를 붙이면, Win IE 4~6, Mac IE 4~5 등에는 스타일이 적용되고, 그 외의 브라우저에서는 적용되지 않는다.

*html p { color:white; }

underscore hack

프로퍼티의 가장 앞부분에 언더스코어(_)를 붙이면, Win IE 4~6에서 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.

p { _color:white; }

hash hack

프로퍼티의 앞에 샾(#)을 붙이면, Win IE 4~6, Mac IE 5, Opera 7, Mozilla, Firefox에서는 스타일이 적용되고, 다른 브라우저에는 적용되지 않는다.

p { #color:white; }

star 7 hack

셀렉트의 앞에 html*을 붙이면, Win IE 5.5~6, Mac IE 5, Safari 등에서 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다. html*과 셀렉터사이에 스페이스를 넣지 않는다.

html*p { color:white; }

xmlns hack

속성셀렉터를 이용하여, html요소에 붙이는 xmlns속성을 스타일적용을 위하여 사용하는 방법.
Mozilla, Fire-fox, Opera 7/8, Safari 등 속성셀렉터를 서포트하는 브라우저에서는 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.

html[xmlns] h1 { color:red; }

:root hack

셀렉터의 앞에 :root를 붙이면, Mozilla, Firefox, Mac IE 5, Safari 등 :root유사클래스를 지원하는 브라우저에만 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.

:root h1 { color:red; }

Tantek box model hack

voice-family프로퍼티를 이용한 가장 유명한 박스모델핵.

div#content { width:500px; voice-family: ""}""; voice-family:inherit; width:400px; }

Win IE 5용 패스필터

@media tty { i{content:"";/*" "*/}}; @import '/css/style.css'; {;}/*";} }/* */

Win IE 5.5용 패스필터

@media tty { i{content:"";/*" "*/}}@m; @import '/css/style.css';/*";} }/* */

Win IE 5-5.5용 패스필터

@media tty { i{content:"";/*" "*/}}@import '/css/style.css';/*";} }/* */

모던브라우저용 패스필터

@import "null?"{"; @import "/css/style.css"; @import "null?"}";

이 이외에도 많은 핵(hack)이 존재한다. CSS Filters (dithered.com)에 다양한 CSS hack이 잘 정리되어 있으므로 참고하시길…


IE7에만 적용

IE7를 포함한 모든 IE에만 적용하는 방법은

IE7을 포함한 모던브라우저에 적용(IE6이하를 제외)

IE7을 제외한 모던브라우저에만 적용


위의 내용은 썬샤인님의 블로그에서 꿈쳐온 것입니다..

나이가 먹다보니 가끔 치매끼가 있어서.. 잊어버릴것 같아 살포시... ^^


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

데꾸벅이 FF를 사용하는 이유 중 하나가 Firebug를 사용할수 있다는 것이다.(너무 과장했나?)
그런데 IE, Opera, Safari에서도 Firebug를 사용할수 있다.

참조사이트 : http://getfirebug.com/lite.html

1. 설치
<script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>

2. 북마크하기
javascript:var firebug=document.createElement('script');firebug.setAttribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js');document.body.appendChild(firebug);(function(){if(window.pi&&window.firebug){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);


3. 오프라인에서 사용하기 (소스다운로드)

<script language="javascript" type="text/javascript" src="/path/to/firebug/pi.js"></script>
<script language="javascript" type="text/javascript" src="/path/to/firebug/firebug-lite.js"></script>


4.console.log() 에서 에러가 발생한다면 아래 파일을 다운로드 받은후 다음과 같이 작성한다.

 <script language="javascript" type="text/javascript"  src="/path/to/firebug/firebugx.js"></script>

 
5. Firebug Lite를 사용하려면 마크업에 다음과 같이 표시한다.
<html debug="true">




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